/* ============================================================================
   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: serious, calm, credible, for adult professionals.
   Near-black text on off-white, one confident blue accent, generous
   whitespace. No gamification.
   ========================================================================== */

:root {
  /* ---- Color: text ------------------------------------------------------ */
  --ink:    #191d24;   /* primary text — near-black with a cool cast */
  --muted:  #5c6675;   /* secondary text, labels, ledes */
  --faint:  #8b95a5;   /* tertiary — timestamps, meta lines */

  /* ---- Color: surfaces --------------------------------------------------- */
  --bg:             #f7f8fa;  /* app background, off-white */
  --surface:        #ffffff;  /* cards, panels */
  --surface-sunken: #f2f4f7;  /* wells / insets inside cards */
  --border:         #e4e7ee;
  --border-strong:  #ccd3de;

  /* ---- Color: accent (the one confident blue) ---------------------------- */
  --accent:             #2255c4;
  --accent-hover:       #1b449e;
  --accent-soft:        #edf2fc;  /* tinted background */
  --accent-soft-border: #d3dff6;
  --on-accent:          #ffffff;

  /* ---- Color: semantic ---------------------------------------------------- */
  --ok:               #1a7f42;
  --ok-soft:          #eaf6ee;
  --ok-soft-border:   #c6e5d1;
  --warn:             #96660a;
  --warn-soft:        #fdf6e4;
  --warn-soft-border: #eedfb5;
  --err:              #b3261e;
  --err-soft:         #fdefee;
  --err-soft-border:  #f3cdca;

  /* ---- Typography --------------------------------------------------------- */
  --font-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.375rem;   /* 38px — landing hero */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

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

  --tracking-tight: -0.015em;  /* headings */
  --tracking-wide:   0.04em;   /* 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:   8px;
  --r-lg:   12px;
  --r-full: 999px;

  /* ---- Shadows -------------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-2: 0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-modal: 0 20px 48px rgba(16, 24, 40, 0.18);

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

  /* ---- Focus ------------------------------------------------------------------ */
  --focus-ring: 0 0 0 3px rgba(34, 85, 196, 0.30);

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