/* Hallmark · route: custom (bespoke) · design-system: design.md · designed-as-app
 * structure: three-surface app shell — Workbench admin, Narrative-Workflow pitch, floating prospect bar
 * idea: "weight is the status" — pipeline stage reads as hairline → accent → ink-fill, never as hue
 * vibe: "heavy glass, terminal edge, white and charcoal"
 * paper: oklch(98.6% 0.006 45) · accent: oklch(67% 0.131 39)
 * display: Newsreader 700 · body: Switzer · outlier: JetBrains Mono (role: machine data)
 * axes: light / roman-serif / warm (clay ~39°)
 * gates: all-pass · contrast: pass (40-41) · studied: no
 * pre-emit critique: P5 H5 E4 S5 R4 V5
 *
 * Single source of truth for every surface. admin.css, site.css, and bar.js all
 * read from here. Never inline a colour or a font-family anywhere else.
 */

:root {
  color-scheme: light dark;

  /* ---------- surfaces · light ---------- */
  --color-paper:       oklch(98.6% 0.006 45);   /* #FDFAF8 */
  --color-paper-2:     oklch(96.4% 0.006 45);   /* #F7F2F0 — inputs, hover, wells */
  --color-paper-3:     oklch(93.8% 0.008 45);   /* #EFE9E6 — recessed, archived */

  /* ---------- ink ---------- */
  --color-ink:         oklch(21%   0.012 42);   /* #1D1714 charcoal — 17.0:1 on paper */
  --color-ink-2:       oklch(38%   0.011 42);   /* #48413E — 9.7:1  */
  --color-muted:       oklch(47%   0.011 42);   /* #615956 — 6.6:1  */

  /* ---------- lines ---------- */
  --color-rule:        oklch(86%   0.008 45);   /* #D6CFCD hairline */
  --color-rule-2:      oklch(92%   0.006 45);   /* #E8E3E1 faintest */
  --color-edge:        oklch(58%   0.010 42);   /* #807876 interactive boundary — 4.1:1 */

  /* ---------- accent · Anthropic clay ---------- */
  --color-accent:      oklch(67%   0.131 39);   /* #D87656 fills, rules, dots — 3.0:1, never body text */
  --color-accent-ink:  oklch(21%   0.012 42);   /* text on accent fill — 5.6:1 */
  --color-accent-deep: oklch(54%   0.150 39);   /* #B44821 accent as TEXT + links — 5.2:1 */
  --color-focus:       oklch(54%   0.150 39);   /* ring; always sits on paper via outline-offset */
  --color-accent-hover:     oklch(54% 0.150 39);      /* fill hover — see @supports below */
  --color-accent-hover-ink: oklch(98.6% 0.006 45);    /* paper on the light hover — 5.2:1 */

  /* ---------- the one negative signal (no green anywhere) ---------- */
  --color-danger:      oklch(46%   0.160 15);   /* #9D203A oxblood — 7.5:1 */
  --color-danger-ink:  oklch(98.6% 0.006 45);

  /* ---------- glass · only for surfaces that float over content ---------- */
  --glass-paper:       oklch(98.6% 0.006 45 / 0.72);
  --glass-paper-2:     oklch(96.4% 0.006 45 / 0.86);
  --glass-ink:         oklch(21%   0.012 42 / 0.92);  /* over unknown content — carries its own contrast */
  --glass-scrim:       oklch(21%   0.012 42 / 0.58);
  --glass-blur:        blur(18px) saturate(1.6);
  --glass-edge:        oklch(100%  0      0 / 0.55);  /* inner highlight, light surfaces */
  --glass-edge-ink:    oklch(100%  0      0 / 0.14);  /* inner highlight, ink surfaces */

  /* ---------- type ---------- */
  --font-display: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --font-body:    "Switzer", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wt-body:      400;
  --wt-medium:    500;
  --wt-display:   700;   /* 300 units clear of body */

  /* 1.25 major third off a 16px body */
  --text-2xs:     0.6875rem;  /* 11px  — mono caps only, never prose */
  --text-xs:      0.78125rem; /* 12.5px */
  --text-sm:      0.875rem;   /* 14px  — floor for prose */
  --text-base:    1rem;       /* 16px  */
  --text-md:      1.25rem;    /* 20px  */
  --text-lg:      1.5625rem;  /* 25px  */
  --text-xl:      1.953rem;   /* 31px  */
  --text-2xl:     2.441rem;   /* 39px  */
  --text-3xl:     3.052rem;   /* 49px  */
  --text-display:   clamp(2.5rem, 4.2vw + 1rem, 4.25rem);
  --text-display-s: clamp(1.9rem, 2.6vw + 1rem, 2.75rem);

  --lh-display:   1.06;
  --lh-tight:     1.2;
  --lh-body:      1.55;
  --tr-display:   -0.022em;
  --tr-caps:      0.09em;
  --measure:      65ch;

  /* ---------- 4pt space scale ---------- */
  --space-3xs:    0.125rem;  /*  2px */
  --space-2xs:    0.25rem;   /*  4px */
  --space-xs:     0.5rem;    /*  8px */
  --space-sm:     0.75rem;   /* 12px */
  --space-md:     1rem;      /* 16px */
  --space-lg:     1.5rem;    /* 24px */
  --space-xl:     2.5rem;    /* 40px */
  --space-2xl:    4rem;      /* 64px */
  --space-3xl:    6rem;      /* 96px */
  --space-4xl:    9rem;      /* 144px */

  /* ---------- radii · tight, terminal-edged ---------- */
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-lg:    10px;
  --radius-pill:  999px;   /* prospect bar + status dots only */

  /* ---------- control geometry ---------- */
  --control-h:    2.75rem;  /* 44px — inputs and buttons share it */
  --control-h-sm: 2rem;     /* 32px — dense table actions, pointer-fine only */
  --rail-w:       15rem;
  --topbar-h:     3.5rem;

  /* ---------- motion ---------- */
  --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.65, 0, 0.35, 1);
  --dur-micro:    120ms;
  --dur-short:    200ms;
  --dur-long:     300ms;

  /* ---------- depth · one shadow, never stacked ---------- */
  --shadow-whisper: 0 1px 2px oklch(21% 0.012 42 / 0.06);
  --shadow-float:   0 12px 32px oklch(21% 0.012 42 / 0.16);

  /* ---------- z scale · six named levels ---------- */
  --z-base:       1;
  --z-raised:     10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-sticky-nav: 300;
  --z-modal:      400;
  --z-toast:      500;
  --z-tooltip:    600;
}

/* Dark variant. Same 39–45° anchor — only L and C move. Elevation is lightness. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-paper:       oklch(16% 0.010 42);   /* #110C0A */
    --color-paper-2:     oklch(20% 0.012 42);   /* #1B1412 */
    --color-paper-3:     oklch(24% 0.012 42);   /* #241D1B */

    --color-ink:         oklch(94% 0.006 45);   /* #EFEAE8 — 16.3:1 */
    --color-ink-2:       oklch(76% 0.008 45);   /* #B6B0AD — 9.0:1  */
    --color-muted:       oklch(64% 0.009 42);   /* #918A88 — 5.8:1  */

    --color-rule:        oklch(30% 0.010 42);
    --color-rule-2:      oklch(25% 0.010 42);
    --color-edge:        oklch(53% 0.013 42);   /* 3.7:1 */

    --color-accent:      oklch(74% 0.110 39);   /* #E69276 — chroma down, L up */
    --color-accent-ink:  oklch(17% 0.012 42);
    --color-accent-deep: oklch(78% 0.110 39);   /* accent as text — 9.4:1 */
    --color-focus:       oklch(80% 0.110 39);
    --color-accent-hover:     oklch(80% 0.100 39);
    --color-accent-hover-ink: oklch(17% 0.012 42);   /* 9.9:1 on the dark hover */

    --color-danger:      oklch(64% 0.150 18);   /* #D86069 — 5.4:1 */
    --color-danger-ink:  oklch(16% 0.010 42);

    --glass-paper:       oklch(20% 0.012 42 / 0.74);
    --glass-paper-2:     oklch(24% 0.012 42 / 0.88);
    --glass-scrim:       oklch(10% 0.008 42 / 0.66);
    --glass-edge:        oklch(100% 0 0 / 0.10);

    --wt-body:           350;   /* light-on-dark optical compensation */

    --shadow-whisper:    0 1px 2px oklch(0% 0 0 / 0.4);
    --shadow-float:      0 12px 32px oklch(0% 0 0 / 0.5);
  }
}

/* The fill-hover derives from whatever --color-accent currently is, so an accent
 * changed in Settings carries its own hover instead of reverting to clay. The
 * 72% ratio is the point where --color-accent-hover-ink still clears 4.5:1
 * against the mixed result (light 5.0:1 · dark 9.9:1). Guarded, because an
 * unsupported color-mix() in a custom property is invalid at computed-value
 * time and would drop the hover entirely. */
@supports (color: color-mix(in oklab, red, blue)) {
  :root {
    --color-accent-hover: color-mix(in oklab, var(--color-accent) 72%, var(--color-ink));
  }
}