/* ==========================================================================
   Tally design tokens. Editorial archetype, split-view nav, committed fired-clay.
   Brand hue 40 (fired clay). Neutrals are true off-white / near-neutral, never cream.
   Danger is pulled to crimson (hue 12) so a delay never reads as brand.
   ========================================================================== */
:root {
  color-scheme: light;

  /* ---- Colour: neutrals, tinted toward the brand hue (never pure grey) ---- */
  --bg: oklch(0.985 0 0);
  --surface: oklch(0.968 0.003 40);
  --surface-2: oklch(0.945 0.005 40);
  --surface-3: oklch(0.92 0.007 40);
  --ink: oklch(0.23 0.02 40);   /* >=7:1 on --bg */
  --ink-2: oklch(0.32 0.02 40);
  --muted: oklch(0.45 0.025 40);   /* >=4.5:1 on --bg */
  --muted-2: oklch(0.55 0.02 40);
  --line: oklch(0.89 0.006 40);
  --line-strong: oklch(0.78 0.01 40);

  /* ---- Colour: brand ---- */
  --primary: oklch(0.48 0.13 40);
  --primary-strong: oklch(0.41 0.12 40);
  --primary-soft: oklch(0.95 0.02 45);
  --primary-soft-2: oklch(0.90 0.04 45);
  --on-primary:    oklch(0.99 0 0);

  --accent: oklch(0.86 0.06 60);
  --accent-strong: oklch(0.74 0.10 55);
  --accent-soft: oklch(0.96 0.02 60);
  --on-accent: oklch(0.25 0.04 40);

  /* One dark band per page, maximum. */
  --drench: oklch(0.30 0.06 40);
  --drench-2: oklch(0.37 0.07 40);
  --on-drench: oklch(0.97 0.008 40);
  --on-drench-muted: oklch(0.86 0.03 40);
  --drench-line: oklch(0.42 0.06 40);

  /* ---- Colour: semantic — STATES ONLY, never decoration ---- */
  --success: oklch(0.50 0.12 155); --success-soft: oklch(0.95 0.04 155); --success-ink: oklch(0.38 0.10 155);
  --warning: oklch(0.72 0.14 80);  --warning-soft: oklch(0.96 0.05 80);  --warning-ink: oklch(0.42 0.10 75);
  --danger: oklch(0.50 0.19 12);  --danger-soft: oklch(0.955 0.03 12);  --danger-ink: oklch(0.42 0.17 12);
  --info: oklch(0.50 0.10 250); --info-soft:    oklch(0.95 0.03 250); --info-ink:    oklch(0.40 0.11 250);

  /* Steel: the counter-colour to the clay, for data only — never a status.
     Far enough from success/warning/danger/info to never be mistaken for one. */
  --steel:      oklch(0.50 0.09 215);
  --steel-lift: oklch(0.80 0.07 215);
  --steel-soft: oklch(0.94 0.028 215);

  /* Charts: a ramp of the brand hue, not the semantic colours. */
  --c-1: oklch(0.88 0.06 40); --c-2: oklch(0.74 0.11 40);
  --c-3: oklch(0.56 0.14 40); --c-4: oklch(0.40 0.14 40); --c-5: oklch(0.28 0.11 40);

  /* ---- Typography: two families, both self-hosted ---- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body:    "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Marketing scale — fluid, ratio ~1.25 */
  --fs-display: clamp(2.6rem, 1.5rem + 3.6vw, 4.75rem);
  --fs-h1:      clamp(2.25rem, 1.5rem + 2.6vw, 4rem);
  --fs-h2:      clamp(1.875rem, 1.35rem + 1.7vw, 2.875rem);
  --fs-h3:      clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem);
  --fs-lead:    clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-xs:      0.8125rem;

  /* Product scale — fixed rem, ratio 1.125 */
  --t-28: 1.75rem; --t-22: 1.375rem; --t-18: 1.125rem; --t-16: 1rem;
  --t-15: 0.9375rem; --t-14: 0.875rem; --t-13: 0.8125rem; --t-12: 0.75rem; --t-11: 0.6875rem;

  --lh-tight: 1.05; --lh-snug: 1.2; --lh-body: 1.6; --lh-relaxed: 1.7;
  --tracking-display: -0.025em; --tracking-heading: -0.02em; --tracking-ui: 0;

  /* ---- Spacing: 4px base ---- */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;   --s-5: 1.5rem;
  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;    --s-9: 5rem;   --s-10: 6rem; --s-12: 8rem;
  --section:       clamp(4.5rem, 3rem + 5vw, 8rem);
  --section-tight: clamp(3rem, 2rem + 3vw, 5rem);
  --gutter:        clamp(1.25rem, 4vw, 2.5rem);
  --container: 1200px; --container-wide: 1400px; --container-narrow: 760px; --measure: 65ch;

  /* ==========================================================================
     FORM LAYER — the six decisions from 02-design-system.md §Form.
     These are NOT defaults to keep. Every value below is chosen per client from
     a named form archetype (Ledger / Frame / Console / Panel / Card deck /
     Sheet / Pill / Slab) and checked by scripts/divergence.py before any
     product page is built. If these match the last POC, the design is a re-skin.
     Nothing in components.css may hardcode a radius, a border width, a shadow,
     a control height or a card padding — it reads them from here.
     ========================================================================== */

  /* 1. Shape: three radii, locked. Never improvise a fourth.
        Ledger 2/3/4 · Frame 0/0/0 · Console 4/6/8 · Panel 8/12/20
        Card deck 12/18/28 · Sheet 0/0/0 · Pill 999/22/32 · Slab 0/0/0 */
  --r-ctl: 4px; --r-card: 8px; --r-lg: 8px; --r-full: 999px;

  /* 2. Border weight. A 2px rule is a different product from a 1px hairline.
        Ledger 1/1 · Frame 2/3 · Console 1/1 · Panel 1/1.5 · Card deck 0/1 */
  --bw: 1px; --bw-strong: 1px;
  --rule: var(--bw) solid var(--line);
  --rule-strong: var(--bw-strong) solid var(--line-strong);

  /* 3. Elevation model — pick ONE and hold it across the whole product.
        hairline: both none, depth comes from --rule
        one-step: --elev-card a single soft shadow
        inset:    --elev-card an inner highlight on a dark ground
        fill:     --elev-card none, depth comes from --surface-2/-3 */
  --elev-card: none;
  --elev-pop:  0 8px 24px -8px oklch(0.20 0.02 40 / 0.14);
  --elev-modal: 0 32px 64px -20px oklch(0.20 0.02 40 / 0.28);

  /* 4. Density — a compliance register and a booking app do not share a row.
        Ledger 30/30 · Console 28/26 · Panel 38/40 · Card deck 44/52 · Pill 48/56 */
  --h-ctl: 40px; --h-ctl-sm: 32px; --h-row: 48px;
  --pad-card: var(--s-6); --gap-grid: var(--s-6);

  /* 5. Divider strategy: grid | rows | none | bands.
        Set --cell-rule to var(--rule) for a ruled ledger grid, none for airy. */
  --cell-rule: none;
  --row-rule: var(--rule);

  /* 6. Heading treatment. */
  --wt-head: 500; --wt-body: 400;
  --tracking-heading: -0.02em;
  --case-head: none;            /* none | uppercase */

  /* ---- Elevation: hairlines over shadows ---- */
  --e-1: 0 1px 2px oklch(0.20 0.02 40 / 0.06);
  --e-2: 0 2px 8px oklch(0.20 0.02 40 / 0.08);
  --e-3: 0 12px 32px oklch(0.20 0.02 40 / 0.12);

  /* ---- Motion ---- */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Prototype chrome ---- */
  --pocbar-h: 44px;
  --z-sticky: 20; --z-layer: 60; --z-toast: 80; --z-pocbar: 90; --z-tour: 100;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
}