/* Echelon design tokens. Values are the site's canonical hex (see DESIGN.md).
   Dark only: there is no light theme. */

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

/* Metric-matched fallback so the swap does not shift layout. */
@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial");
  size-adjust: 113%;
  ascent-override: 84%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  color-scheme: dark;

  /* Surfaces (stepped navy) */
  --background: #04070f;
  --card: #08101f;
  --muted: #0b1424;
  --secondary: #0d1728;
  --accent: #0f1b2f;
  --border: #16223a;
  --hair: #ffffff12;
  --hair-strong: #ffffff24;
  --navy: #0b1f3b;

  /* Text */
  --foreground: #eff2f8;
  --muted-foreground: #93a3bd;
  --on-royal: #c9d3e6; /* secondary text on the royal band: >= 5:1 across the gradient */

  /* Action (blue) and distinction (gold) never share an element */
  --primary: #2f5bff;
  --primary-hover: #3f68ff;
  --primary-link: #6f8dff;
  --ring: #2f5bff;
  --gold: #d0ac37;
  --gold-soft: #e6c976;
  --gold-line: #d0ac378c;

  /* Market direction: always paired with a text label */
  --bull: #0ecb81;
  --bear: #e0475c;

  /* Derived state tints (message text on a tinted fill) */
  --bear-text: #ffb4be;
  --bull-text: #9ee8c8;
  /* Landing bands (DESIGN.md "Bands"): royal gradient stops */
  --royal-top: #10285f;
  --royal-mid: #0a1733;
  --royal-bottom: #060d1c;

  --border-hover: #26385c;
  --scrim: #02040acc;
  --shadow-float: #000000cc;

  /* Type */
  --font-sans: "Montserrat", "Montserrat Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5625rem;
  --text-2xl: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);
  --text-display: clamp(2.5rem, 1rem + 4vw, 4.5rem);

  /* Space: 4pt base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-section: clamp(4rem, 2.5rem + 7vw, 8rem);
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --content: 76rem;

  /* Shape */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 16px;

  /* Motion */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;

  /* Z-index scale */
  --z-base: 1;
  --z-header: 20;
  --z-modal: 40;
}