/* Hallmark · genre: modern-minimal · macrostructure: Split Studio
 * theme: custom · vibe: "dark technical consultant precision"
 * paper: oklch(11% 0.012 255) · accent: oklch(64% 0.18 240) electric-blue
 * paper-band: dark · display-style: geometric-sans · accent-hue: cool
 * nav: N9 edge-aligned-minimal · footer: Ft5 statement
 * H2 knobs: ratio=6/6 · right=proof-column · divider=negative-space
 * N9 knobs: CTA=outlined-pill · wordmark=mono · padding-block=spacious
 * Ft5 knobs: sentence-width=38ch · wordmark=under · rule=hairline
 * Pre-emit critique: P5 H4 E5 S5 R4 V5
 */

:root {
  /* ── Colour — dark anchor hue 255 (cool blue-black) ─────────────── */
  --color-paper:        oklch(11%  0.012 255);
  --color-paper-2:      oklch(15%  0.012 255);
  --color-paper-3:      oklch(20%  0.012 255);
  --color-rule:         oklch(28%  0.010 255);
  --color-muted:        oklch(44%  0.008 255);
  --color-ink-dim:      oklch(60%  0.008 255);
  --color-ink:          oklch(93%  0.006 255);
  --color-accent:       oklch(64%  0.18  240);
  --color-accent-dim:   oklch(30%  0.10  240);
  --color-focus:        oklch(70%  0.18  240);
  --color-focus-ring:   oklch(70%  0.18  240 / 0.18);
  --color-nav-bg:       oklch(11%  0.012 255 / 0.88);

  /* Semantic state colours */
  --color-success:      oklch(70%  0.14  160);
  --color-success-bg:   oklch(22%  0.06  160);
  --color-error:        oklch(68%  0.16   25);
  --color-error-bg:     oklch(22%  0.06   25);

  /* Code syntax */
  --color-code-string:  oklch(70%  0.14  160);
  --color-code-fn:      oklch(72%  0.13   60);
  --color-code-body:    oklch(60%  0.008 255);

  /* ── Typography ──────────────────────────────────────────────────── */
  --font-display:  "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-body:     "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono:     "Geist Mono", ui-monospace, monospace;

  /* Scale — 1.25 major third, 16 px base */
  --text-xs:       0.64rem;     /* 10.24 px */
  --text-sm:       0.8rem;      /* 12.8 px  */
  --text-base:     1rem;        /* 16 px    */
  --text-md:       1.25rem;     /* 20 px    */
  --text-lg:       1.5625rem;   /* 25 px    */
  --text-xl:       1.9531rem;   /* 31.25 px */
  --text-2xl:      2.4414rem;
  --text-3xl:      3.0518rem;
  --text-4xl:      3.8147rem;
  --text-display-s: clamp(2.2rem, 4vw + 0.5rem, 3.8rem);
  --text-display:   clamp(2.75rem, 5vw + 1rem, 5.25rem);

  /* ── Spacing — 4 pt scale ────────────────────────────────────────── */
  --space-1:   0.25rem;   /*   4 px */
  --space-2:   0.5rem;    /*   8 px */
  --space-3:   0.75rem;   /*  12 px */
  --space-sm:  1rem;      /*  16 px */
  --space-md:  1.5rem;    /*  24 px */
  --space-lg:  2.5rem;    /*  40 px */
  --space-xl:  4rem;      /*  64 px */
  --space-2xl: 6rem;      /*  96 px */
  --space-3xl: 8rem;      /* 128 px */

  /* ── Motion ─────────────────────────────────────────────────────── */
  --dur-fast:    100ms;
  --dur-base:    200ms;
  --dur-appear:  500ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);

  /* ── Radius ──────────────────────────────────────────────────────── */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   1rem;
  --radius-pill: 9999px;

  /* ── Rule ────────────────────────────────────────────────────────── */
  --rule-hairline: 1px solid var(--color-rule);

  /* ── Nav ─────────────────────────────────────────────────────────── */
  --nav-height: 4.5rem;
}