/* Safe Hands — design tokens (source of truth).
   Direction: "Clear + Code" — calm, precise, expert. Light base, ink-navy text,
   a single refined teal accent, dark code panels as proof.
   The site copies this file via `npm run sync` (site/scripts/sync.mjs). */

:root {
  /* ── Colour: ink (navy) ─────────────────────────────── */
  --ink-950: #070d18;
  --ink-900: #0b1424;   /* primary text, wordmark, dark panels */
  --ink-850: #0f1a2d;
  --ink-800: #142136;
  --ink-700: #1f2d45;
  --ink-600: #36445c;
  --ink-500: #4f5b70;   /* secondary text on light — 6.9:1 on white */
  --ink-400: #626d80;   /* tertiary text on light — 5.2:1 on white, 4.7:1 on bg-sunken */
  --ink-300: #9aa3b2;
  --ink-200: #c9cfd8;
  --ink-150: #dfe3e9;
  --ink-100: #eceff3;
  --ink-50:  #f6f7f9;

  /* ── Colour: teal (the only accent) ────────────────── */
  --teal-700: #0b675f;
  --teal-600: #0c7a70;  /* accent text/links on light — 5.2:1 on white */
  --teal-500: #11968a;  /* fills, focus rings */
  --teal-400: #2bbfae;
  --teal-300: #5eead4;  /* accent on dark panels */
  --teal-200: #a7f3e6;
  --teal-100: #d6f7f1;
  --teal-50:  #eefbf8;

  /* ── Colour: severity (code panels + report only) ──── */
  --sev-critical: #ff8a8a;
  --sev-high:     #ffb672;
  --sev-medium:   #f2d27a;
  --sev-low:      #8ab8f0;
  --diff-add-bg:  rgba(94, 234, 212, 0.10);
  --diff-del-bg:  rgba(255, 138, 138, 0.10);

  /* ── Colour: roles ──────────────────────────────────── */
  --bg:            #ffffff;
  --bg-subtle:     #f7f8fa;
  --bg-sunken:     #f1f3f6;
  --fg:            var(--ink-900);
  --fg-muted:      var(--ink-500);
  --fg-subtle:     var(--ink-400);
  --accent:        var(--teal-600);
  --accent-strong: var(--teal-700);
  --accent-soft:   var(--teal-50);
  --line:          rgba(11, 20, 36, 0.08);   /* hairline */
  --line-strong:   rgba(11, 20, 36, 0.14);
  --focus:         var(--teal-500);

  --code-bg:       #0a1221;
  --code-bg-2:     #0e1829;
  --code-line:     rgba(255, 255, 255, 0.07);
  --code-fg:       #d5dbe5;
  --code-muted:    #7d889b;
  --code-accent:   var(--teal-300);

  /* ── Type ───────────────────────────────────────────── */
  --font-sans:  "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;  /* italic accent, sparingly */

  /* Fluid scale (375px → 1440px). Line-heights and tracking tighten as size grows. */
  --text-xs:   0.75rem;                                   /* 12 */
  --text-sm:   0.875rem;                                  /* 14 */
  --text-base: 1rem;                                      /* 16 */
  --text-md:   clamp(1.0625rem, 1.02rem + 0.18vw, 1.125rem);  /* 17→18 body-lead */
  --text-lg:   clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);   /* 18→21 */
  --text-xl:   clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);      /* 20→24 */
  --text-2xl:  clamp(1.875rem, 1.5rem + 1.6vw, 2.875rem);     /* 30→46 section titles */
  --text-3xl:  clamp(2.5rem, 1.85rem + 2.9vw, 4.5rem);        /* 40→72 hero */

  --leading-tight: 1.04;
  --leading-snug:  1.2;
  --leading-body:  1.6;
  --tracking-display: -0.038em;
  --tracking-title:   -0.028em;
  --tracking-tight:   -0.012em;
  --tracking-caps:    0.08em;

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

  /* ── Space (4px base) ───────────────────────────────── */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;
  --space-32: 8rem;
  --section-y: clamp(5rem, 3.4rem + 6.8vw, 9.5rem);
  --gutter:    clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --container: 1160px;
  --measure:   36rem;

  /* ── Radii ──────────────────────────────────────────── */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ── Shadows (layered, soft, ink-tinted) ────────────── */
  --shadow-xs: 0 1px 2px rgba(11, 20, 36, 0.05);
  --shadow-sm: 0 1px 2px rgba(11, 20, 36, 0.04), 0 2px 6px -1px rgba(11, 20, 36, 0.05);
  --shadow-md: 0 1px 2px rgba(11, 20, 36, 0.04), 0 4px 10px -2px rgba(11, 20, 36, 0.05), 0 16px 32px -12px rgba(11, 20, 36, 0.10);
  --shadow-lg: 0 1px 2px rgba(11, 20, 36, 0.05), 0 10px 24px -6px rgba(11, 20, 36, 0.08), 0 40px 80px -24px rgba(11, 20, 36, 0.22);
  --ring:      0 0 0 1px var(--line);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);

  /* ── Motion ─────────────────────────────────────────── */
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 520ms;
  --dur-reveal: 760ms;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);

  /* ── Night surfaces (v2: hero stage, dark interludes) ── */
  --night-950: #040a14;
  --night-900: #07101e;
  --night-800: #0b1728;
  --night-700: #12203a;
  --night-fg:        #ffffff;
  --night-fg-muted:  #a9b2c1;   /* 8.6:1 on night-900 */
  --night-fg-subtle: #8b95a6;   /* 6.0:1 on night-900 */
  --glass-bg:     rgba(255, 255, 255, 0.05);
  --glass-bg-2:   rgba(255, 255, 255, 0.08);
  --glass-line:   rgba(255, 255, 255, 0.10);
  --glass-hi:     rgba(255, 255, 255, 0.18);
  --glow-teal:    rgba(43, 191, 174, 0.32);
  --marker:       rgba(17, 150, 138, 0.55);  /* hand-painted highlight */

  /* ── Motion (v2) ───────────────────────────────────── */
  --ease-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-story:  900ms;
}