/*
 * HeyHi design system: fonts and tokens.
 *
 * The stylesheets load in file-name order (Propshaft's :app is sorted by path), so the numbers set the cascade:
 *   00 tokens · 10 base · 20 chrome (nav, footer) · 25 products (cards, previews) · 30 dialogs · 40 assistant
 *   50 home · 60 product page · 70 pages (about, legal)
 *
 * Night bands in the brand navy carry the product; day bands carry reading. Amber is the human "hi" (actions),
 * aqua is the AI's voice (live data). Components use the semantic tokens (--fg, --muted, --line, ...), which
 * .band--day swaps for light values, so the same component works on either band.
 */

/* Self-hosted variable fonts (latin), with their width axes: the security policy only allows our own fonts */
@font-face {
  font-family: "Mona Sans";
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("/assets/mona-sans-latin-5542c666.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Extended Latin, including the IPA in /heɪ haɪ/: downloaded only when a page uses one of these characters */
@font-face {
  font-family: "Mona Sans";
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("/assets/mona-sans-latin-ext-20f6aab5.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 75% 112.5%;
  font-display: swap;
  src: url("/assets/martian-mono-latin-49ce8d69.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 75% 112.5%;
  font-display: swap;
  src: url("/assets/martian-mono-latin-ext-542e1549.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;

  /* Night: the brand navy #001F3D, deepened for the page */
  --night-950: #000A16;
  --night-900: #00132A;
  --night-850: #001A35;
  --night-800: #001F3D;
  --night-700: #072B50;
  --night-600: #0F3A66;
  --night-text: #EDF3FA;
  --night-muted: #97ABC4;
  --night-faint: #7891B0;
  --night-line: rgba(150, 192, 240, 0.13);
  --night-line-strong: rgba(150, 192, 240, 0.24);

  /* Day */
  --day-0: #F1F4F8;
  --day-1: #FFFFFF;
  --day-2: #E7ECF3;
  --day-text: #051A30;
  --day-muted: #4A5E77;
  --day-faint: #64778E;
  --day-line: #D8E0EA;
  --day-line-strong: #C1CDDC;

  /* Accents */
  --signal: #FFB547;
  --signal-hi: #FFC872;
  --signal-deep: #9A5600;
  --voice: #5CD6EA;
  --voice-deep: #077A8F;
  --ok: #5BDB95;
  --ok-deep: #13784A;
  --no: #FF7B7B;
  --no-deep: #B32F2E;

  /* Semantic tokens: night values here, .band--day swaps them. Components use only these. */
  --bg: var(--night-900);
  --fg: var(--night-text);
  --muted: var(--night-muted);
  --faint: var(--night-faint);
  --line: var(--night-line);
  --line-strong: var(--night-line-strong);
  --surface: rgba(140, 180, 230, 0.045);
  --surface-2: rgba(140, 180, 230, 0.085);
  --accent-text: var(--voice);
  --signal-text: var(--signal);
  --ok-text: var(--ok);
  --no-text: var(--no);
  --panel-bg: linear-gradient(180deg, rgba(18, 56, 98, 0.66) 0%, rgba(0, 25, 50, 0.88) 100%);
  --panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px var(--night-line), 0 50px 120px -40px rgba(0, 3, 10, 0.85);

  /* Type */
  --font-sans: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --mono-w: 75%; /* Martian Mono width: condensed, like a call-log readout */
  --t-hero: clamp(2.45rem, 0.6rem + 4.95vw, 5rem);
  --t-h2: clamp(2rem, 1.2rem + 3.1vw, 4rem);
  --t-h3: clamp(1.2rem, 1.06rem + 0.55vw, 1.5rem);
  --t-lead: clamp(1.06rem, 0.98rem + 0.38vw, 1.3rem);
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-label: 0.6875rem;

  /* Space, shape, motion */
  --wrap: 76rem;
  --pad: clamp(16px, 4.5vw, 44px);
  --nav-h: 68px;
  --section-y: clamp(88px, 4.5rem + 4.5vw, 168px);
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  interpolate-size: allow-keywords;
}