/* ============================================================================
   Cursivia design tokens — the single source of visual truth.
   Plain CSS custom properties; no build step. Version-string this file when
   it changes (link it as tokens.css?v=N — no hash-busting without a build).

   Design language (direction B, "cool instrument", chosen 2026-10-15 for the
   beta refresh): serious, calm, credible, for adult professionals. Near-black
   text on a cool layered ground, one electric blue, a dark navigation band,
   geometric display type over a plain text face. Depth comes from layered
   surfaces and two-level shadows, never from decoration. No gamification.
   ========================================================================== */

/* ---- Fonts: self-hosted, latin subsets (SIL Open Font License) -------------
   Manrope (display, headings, numerals) and Public Sans (text). Served from
   /static/fonts so no request leaves the app for a font: the privacy notice
   says we do not call third parties from the browser, and that stays true. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/static/fonts/Manrope-normal-latin.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: "Public Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/static/fonts/PublicSans-normal-latin.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: "Public Sans";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("/static/fonts/PublicSans-italic-latin.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;
}

:root {
  /* ---- Color: text ------------------------------------------------------ */
  --ink:    #0f172a;   /* primary text — near-black with a cool cast */
  --muted:  #51607a;   /* secondary text, labels, ledes (4.5:1 on --bg) */
  --faint:  #6b7a94;   /* tertiary — timestamps, meta lines (4.5:1 on white) */

  /* ---- Color: surfaces --------------------------------------------------- */
  --bg:             #eef2f7;  /* app background: cool, one step below white */
  --surface:        #ffffff;  /* cards, panels */
  --surface-sunken: #f6f8fb;  /* wells / insets inside cards */
  --border:         #dbe2ec;
  --border-strong:  #c3cdda;

  /* ---- Color: accent (the one electric blue) ----------------------------- */
  --accent:             #2456e4;
  --accent-hover:       #1b43b8;
  --accent-soft:        #e7edfc;  /* tinted background */
  --accent-soft-border: #c9d7f8;
  --on-accent:          #ffffff;

  /* ---- Color: the dark navigation band ----------------------------------- */
  --nav-bg:     #0f1a33;
  --nav-fg:     #ffffff;
  --nav-muted:  #b7c3da;
  --nav-faint:  #8f9db8;
  --nav-line:   rgba(255, 255, 255, 0.10);
  --nav-hover:  rgba(255, 255, 255, 0.08);
  --nav-accent: #5b86ff;               /* the accent, lifted so it reads on the band */
  --nav-warn:   #fbbf24;
  --nav-err:    #f87171;

  /* ---- Color: semantic ---------------------------------------------------- */
  --ok:               #15803d;
  --ok-soft:          #e8f5ec;
  --ok-soft-border:   #bfe3cb;
  --warn:             #b45309;
  --warn-soft:        #fdf3e4;
  --warn-soft-border: #f3d9ad;
  --err:              #b91c1c;
  --err-soft:         #fdecec;
  --err-soft-border:  #f3c3c3;

  /* ---- Aliases: names a few pages reached for before they existed here.
     Keep them pointing at the real token so nothing drifts to a fallback hex. */
  --brand:     var(--accent);
  --surface-2: var(--surface-sunken);
  --text:      var(--ink);
  --line:      var(--border);
  --good:      var(--ok);
  --bad:       var(--err);

  /* ---- Typography --------------------------------------------------------- */
  --font-display: "Manrope", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               monospace;

  --text-xs:  0.75rem;    /* 12px — badges, meta */
  --text-sm:  0.8125rem;  /* 13px — hints, secondary UI */
  --text-md:  0.9375rem;  /* 15px — body */
  --text-lg:  1.0625rem;  /* 17px — emphasized body, card titles */
  --text-xl:  1.25rem;    /* 20px — section headings */
  --text-2xl: 1.5rem;     /* 24px — page titles */
  --text-3xl: 1.875rem;   /* 30px — large page titles */
  --text-4xl: 2.5rem;     /* 40px — landing hero (phone) */
  --text-5xl: 3.375rem;   /* 54px — landing hero (desktop) */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;  /* display only — Manrope carries it, Public Sans stops at 600 */

  --leading-tight:  1.15;
  --leading-normal: 1.55;
  --leading-loose:  1.65;

  --tracking-tight: -0.02em;   /* display headings */
  --tracking-wide:   0.06em;   /* small caps / badges */

  /* ---- Spacing scale ------------------------------------------------------ */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---- Radii --------------------------------------------------------------- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-full: 999px;

  /* ---- Shadows: two layers, a contact line and a soft lift ------------------- */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.03);
  --shadow-2: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 30px -18px rgba(15, 23, 42, 0.25);
  --shadow-accent: 0 1px 1px rgba(15, 23, 42, 0.10), 0 8px 20px -10px rgba(36, 86, 228, 0.70);
  --shadow-modal: 0 24px 60px -20px rgba(15, 23, 42, 0.45), 0 2px 6px rgba(15, 23, 42, 0.08);

  /* ---- Motion ---------------------------------------------------------------- */
  --t-fast: 120ms ease;   /* hovers */
  --t-med:  200ms ease;   /* panels, reveals */

  /* ---- Focus ------------------------------------------------------------------ */
  --focus-ring: 0 0 0 3px rgba(36, 86, 228, 0.35);

  /* ---- Layout ------------------------------------------------------------------ */
  --wrap-narrow: 640px;   /* forms, focused flows */
  --wrap:        760px;   /* default app pages */
  --wrap-wide:   1080px;  /* landing, dashboards with charts */
  --touch:       44px;    /* minimum touch target */
}