/* ============================================================
   Monte — Design Tokens
   Mirror to tokens.dart at deploy. Single source of truth.
   ============================================================ */

:root {
  /* ---------- Color: Dark ---------- */
  /* The app's own palette (app/lib/design/tokens.dart, 2026-10-11): the
     same canvas, ink and "futures" blue, so the site and the app read as
     one product. */
  --bg:            #0D0E11;
  --bg-elev:       #17191E;
  --bg-elev-2:     #1E2027;
  --hairline:      #262930;
  --hairline-2:    #33363E;

  --ink-hi:        #F2F1EC;
  --ink-mid:       #A9ABB1;
  --ink-low:       #73767E;
  --ink-faint:     #3A3D44;

  --primary:       #8F9CFF;       /* futures */
  --primary-deep:  #5D6BE0;
  --primary-soft:  #B4BDFF;
  --primary-glow:  rgba(143, 156, 255, 0.16);

  /* Fan chart percentile band fills */
  --band-90:       rgba(143, 156, 255, 0.08);   /* p5–p95  outer */
  --band-50:       rgba(143, 156, 255, 0.18);   /* p25–p75 mid   */
  --band-median:   #B4BDFF;                     /* p50 line      */
  --band-axis:     #33363E;

  --success:       #5FBDA2;
  --warn:          #DDAA4E;
  --danger:        #E08A84;

  /* ---------- Type ---------- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Monte Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-21: 21px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-56: 56px;
  --fs-72: 72px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --tr-display: -0.022em;
  --tr-heading: -0.015em;
  --tr-body:    -0.005em;
  --tr-mono:    -0.01em;
  --tr-eyebrow:  0.08em;

  /* ---------- Layout ---------- */
  --maxw:    1120px;
  --maxw-r:  720px;        /* reading column */
  --gutter:  32px;
  --section: 144px;
  --section-sm: 96px;

  /* ---------- Radius / borders ---------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 20px;

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 800ms;
  --dur-fan:  1400ms;
}

[data-theme="light"] {
  --bg:            #F5F4F0;
  --bg-elev:       #FFFFFF;
  --bg-elev-2:     #ECEAE4;
  --hairline:      #E2DFD6;
  --hairline-2:    #D3CFC4;

  --ink-hi:        #121316;
  --ink-mid:       #55565A;
  --ink-low:       #75756F;
  --ink-faint:     #BDBBB3;

  --primary:       #2F3FD1;
  --primary-deep:  #1F2B9E;
  --primary-soft:  #2F3FD1;
  --primary-glow:  rgba(47, 63, 209, 0.10);

  --band-90:       rgba(47, 63, 209, 0.07);
  --band-50:       rgba(47, 63, 209, 0.16);
  --band-median:   #2F3FD1;
  --band-axis:     #D3CFC4;

  --success:       #1C6A58;
  --warn:          #875900;
  --danger:        #B03A32;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink-hi);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  letter-spacing: var(--tr-body);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--primary-glow); color: var(--ink-hi); }

/* Numerals always mono */
.num, .mono { font-family: var(--font-mono); letter-spacing: var(--tr-mono); font-feature-settings: 'tnum'; }

/* Container */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.container-r { max-width: var(--maxw-r); margin: 0 auto; padding: 0 var(--gutter); }

/* Hairline rule */
.hr { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* Eyebrow */
.eyebrow {
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--ink-mid);
  font-family: var(--font-mono);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}