/* Astryd brand type: Cabinet Grotesk (display) + Satoshi (UI/body).
   Caliber similar to Shopify/Whop product marketing. Self-hosted. */

@font-face {
  font-family: "Cabinet Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/cabinet-500.woff2") format("woff2");
}

@font-face {
  font-family: "Cabinet Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/cabinet-700.woff2") format("woff2");
}

@font-face {
  font-family: "Cabinet Grotesk";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/cabinet-800.woff2") format("woff2");
}

@font-face {
  font-family: "Satoshi";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/satoshi-400.woff2") format("woff2");
}

@font-face {
  font-family: "Satoshi";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/satoshi-500.woff2") format("woff2");
}

@font-face {
  font-family: "Satoshi";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/satoshi-700.woff2") format("woff2");
}

:root {
  --font-display: "Cabinet Grotesk", system-ui, sans-serif;
  --font-sans: "Satoshi", system-ui, sans-serif;
  --color-ink: #050b16;
  --color-surface: #07101c;
  --color-panel: rgba(255, 255, 255, 0.035);
  --color-panel-border: rgba(255, 255, 255, 0.09);
  --color-text: #f2f6fb;
  --color-muted: #8fa8c8;
  --color-faint: #4a6480;
  --color-accent: #00c4cd;
  --color-accent-deep: #009aa1;
  --color-accent-ink: #04222a;
}