/* ============================================================
   Cold Anvil website — Color tokens
   Identity source: The Forge design system. Same physics —
   cool charcoal neutrals (hue 264), ember orange signature
   (~hue 49), OKLCH throughout — different posture: this is a
   communication surface. LIGHT is the default and the design
   baseline; dark is an equal remap behind [data-theme="dark"].

   Two tiers: primitive ramps → semantic aliases. Components
   consume ONLY the semantic tier.

   LOAD-BEARING BRAND RULES:
   - The ember (--brand-accent) is a thin signature: links, the
     ONE primary action per view, focus rings, selection. Never
     a panel fill, never a theme, never a state color.
   - Warning stays distinctly yellow; every state carries
     icon + label + shape, never color alone.
   ============================================================ */

:root {
  /* ---------- Primitive · Neutral (cool charcoal family, light ramp) ----------
     1–2 backgrounds · 3–5 interactive surface · 6–8 borders · 9–10 solid · 11–12 text */
  --neutral-1:  oklch(0.988 0.002 264);   /* page — bright, faintly cool */
  --neutral-2:  oklch(0.972 0.003 264);   /* subtle background / alt section */
  --neutral-3:  oklch(0.952 0.004 264);   /* surface rest / inset */
  --neutral-4:  oklch(0.928 0.005 264);   /* surface hover */
  --neutral-5:  oklch(0.902 0.006 264);   /* surface active / selected */
  --neutral-6:  oklch(0.878 0.006 264);   /* border subtle (hairline) */
  --neutral-7:  oklch(0.836 0.007 264);   /* border default */
  --neutral-8:  oklch(0.756 0.009 264);   /* border strong */
  --neutral-9:  oklch(0.612 0.012 264);   /* solid / muted icon */
  --neutral-10: oklch(0.548 0.012 264);   /* solid hover / subtle text */
  --neutral-11: oklch(0.442 0.011 264);   /* secondary text */
  --neutral-12: oklch(0.228 0.010 264);   /* primary text — charcoal ink */

  /* Neutral alpha (dividers / hover washes that sit on any surface) */
  --neutral-a6:  oklch(0.20 0.01 264 / 0.07);
  --neutral-a8:  oklch(0.20 0.01 264 / 0.13);
  --neutral-a11: oklch(0.15 0.01 264 / 0.70);

  /* ---------- Primitive · Ember (the signature, ~hue 49 — shared across themes) */
  --ember-5:  oklch(0.362 0.100 45);
  --ember-6:  oklch(0.424 0.116 46);
  --ember-7:  oklch(0.506 0.132 47);      /* accessible ember text on light */
  --ember-8:  oklch(0.604 0.156 48);      /* solid accent on light */
  --ember-9:  oklch(0.705 0.176 49);      /* THE ember — solid accent on dark */
  --ember-10: oklch(0.748 0.166 52);      /* hover (hotter) on dark */
  --ember-11: oklch(0.805 0.130 56);      /* ember text on dark */
  --ember-a9: oklch(0.705 0.176 49 / 0.14);   /* tinted fill (selection) */
  --ember-a7: oklch(0.705 0.176 49 / 0.32);   /* tinted border */

  /* ---------- Primitive · Green (success / active) ---------- */
  --green-7:  oklch(0.470 0.105 155);     /* text on light */
  --green-9:  oklch(0.720 0.165 152);     /* solid */
  --green-11: oklch(0.800 0.130 153);     /* text on dark */
  --green-a3: oklch(0.720 0.165 152 / 0.10);
  --green-a7: oklch(0.720 0.165 152 / 0.32);

  /* ---------- Primitive · Amber (warning / parked — kept distinctly YELLOW) */
  --amber-7:  oklch(0.520 0.105 88);      /* text on light */
  --amber-9:  oklch(0.808 0.150 92);      /* solid */
  --amber-11: oklch(0.860 0.120 95);      /* text on dark */
  --amber-a3: oklch(0.808 0.150 92 / 0.13);
  --amber-a7: oklch(0.808 0.150 92 / 0.36);

  /* ---------- Primitive · Red (danger / correction) ---------- */
  --red-7:  oklch(0.505 0.185 27);        /* text on light */
  --red-9:  oklch(0.628 0.222 26);        /* solid */
  --red-11: oklch(0.760 0.160 24);        /* text on dark */
  --red-a3: oklch(0.628 0.222 26 / 0.10);
  --red-a7: oklch(0.628 0.222 26 / 0.32);

  /* ---------- Primitive · Blue (info / links-secondary never) ---------- */
  --blue-7:  oklch(0.478 0.120 250);      /* text on light */
  --blue-9:  oklch(0.640 0.150 248);      /* solid */
  --blue-11: oklch(0.780 0.110 246);      /* text on dark */
  --blue-a3: oklch(0.640 0.150 248 / 0.10);
  --blue-a7: oklch(0.640 0.150 248 / 0.32);

  /* ============================================================
     SEMANTIC TIER — components consume ONLY these.
     ============================================================ */

  /* Surfaces — flat; hairline borders carry separation, not shadows */
  --bg:            var(--neutral-1);      /* the page */
  --bg-subtle:     var(--neutral-2);      /* alternate sections, footer */
  --surface:       oklch(0.998 0.001 264);/* cards — white lifts off the page */
  --surface-hover: var(--neutral-2);
  --surface-inset: var(--neutral-3);      /* code blocks, table headers */

  /* Borders */
  --border-subtle:  var(--neutral-6);
  --border-default: var(--neutral-7);
  --border-strong:  var(--neutral-8);

  /* Text */
  --text-primary:   var(--neutral-12);
  --text-secondary: var(--neutral-11);
  --text-subtle:    var(--neutral-10);
  --text-disabled:  var(--neutral-8);
  --text-on-emphasis: oklch(0.99 0.005 264);  /* on solid ember / solid states */

  /* The signature — links, one primary action, focus, selection. Nothing else. */
  --brand-accent:        var(--ember-8);
  --brand-accent-hover:  var(--ember-7);
  --brand-accent-active: var(--ember-9);
  --brand-accent-muted:  var(--ember-a9);
  --brand-accent-border: var(--ember-a7);
  --brand-accent-text:   var(--ember-7);  /* accessible ember for text */
  --text-link:           var(--ember-7);
  --text-link-hover:     var(--ember-6);
  --focus-ring:          var(--ember-8);

  /* State · fg / bg (faint tint) / border / emphasis (solid) / on-emphasis */
  --state-neutral-fg: var(--neutral-11);
  --state-neutral-bg: var(--neutral-a6);
  --state-neutral-border: var(--neutral-a8);
  --state-neutral-emphasis: var(--neutral-9);
  --state-neutral-on-emphasis: oklch(0.99 0.005 264);

  --state-success-fg: var(--green-7);
  --state-success-bg: var(--green-a3);
  --state-success-border: var(--green-a7);
  --state-success-emphasis: var(--green-9);
  --state-success-on-emphasis: oklch(0.18 0.02 156);

  --state-warning-fg: var(--amber-7);
  --state-warning-bg: var(--amber-a3);
  --state-warning-border: var(--amber-a7);
  --state-warning-emphasis: var(--amber-9);
  --state-warning-on-emphasis: oklch(0.20 0.03 92);

  --state-danger-fg: var(--red-7);
  --state-danger-bg: var(--red-a3);
  --state-danger-border: var(--red-a7);
  --state-danger-emphasis: var(--red-9);
  --state-danger-on-emphasis: oklch(0.97 0.02 25);

  --state-info-fg: var(--blue-7);
  --state-info-bg: var(--blue-a3);
  --state-info-border: var(--blue-a7);
  --state-info-emphasis: var(--blue-9);
  --state-info-on-emphasis: oklch(0.97 0.02 248);

  /* Project status — honest labels (concept / active / parked) */
  --status-concept-fg: var(--state-neutral-fg);
  --status-concept-bg: var(--state-neutral-bg);
  --status-concept-border: var(--state-neutral-border);
  --status-active-fg: var(--state-success-fg);
  --status-active-bg: var(--state-success-bg);
  --status-active-border: var(--state-success-border);
  --status-parked-fg: var(--state-warning-fg);
  --status-parked-bg: var(--state-warning-bg);
  --status-parked-border: var(--state-warning-border);

  /* Selection + scrim */
  --selection-bg: var(--ember-a9);
  --scrim: oklch(0.30 0.02 264 / 0.40);
}

/* ============================================================
   DARK THEME — an equal remap, never an inversion. Toggle with
   <html data-theme="dark">; any subtree can also opt in with
   data-theme="dark" (dark hero on a light page, specimens).
   Semantic names stay identical. Ramp values are shared with
   The Forge operator DS; the ember runs one step hotter here
   so it reads the same against charcoal as against paper.
   ============================================================ */
:root[data-theme="dark"], [data-theme="dark"] {
  --neutral-1:  oklch(0.165 0.005 264);
  --neutral-2:  oklch(0.198 0.006 264);
  --neutral-3:  oklch(0.242 0.007 264);
  --neutral-4:  oklch(0.276 0.008 264);
  --neutral-5:  oklch(0.308 0.009 264);
  --neutral-6:  oklch(0.346 0.009 264);
  --neutral-7:  oklch(0.398 0.010 264);
  --neutral-8:  oklch(0.488 0.011 264);
  --neutral-9:  oklch(0.575 0.012 264);
  --neutral-10: oklch(0.645 0.011 264);
  --neutral-11: oklch(0.760 0.008 264);
  --neutral-12: oklch(0.955 0.004 264);

  --neutral-a6:  oklch(0.95 0.01 264 / 0.10);
  --neutral-a8:  oklch(0.95 0.01 264 / 0.18);
  --neutral-a11: oklch(0.98 0.01 264 / 0.62);

  /* The FULL semantic tier is re-declared here, not just the changed lines:
     alias substitution happens where the alias is DECLARED, so a subtree
     theme that only overrode primitives would inherit light-baked values. */
  --bg:            var(--neutral-1);
  --bg-subtle:     var(--neutral-2);
  --surface:       var(--neutral-3);
  --surface-hover: var(--neutral-4);
  --surface-inset: oklch(0.145 0.005 264);

  --border-subtle:  var(--neutral-6);
  --border-default: var(--neutral-7);
  --border-strong:  var(--neutral-8);

  --text-primary:   var(--neutral-12);
  --text-secondary: var(--neutral-11);
  --text-subtle:    var(--neutral-10);
  --text-disabled:  var(--neutral-8);
  --text-on-emphasis: oklch(0.18 0.01 264); /* dark ink on the bright ember */

  --brand-accent:        var(--ember-9);
  --brand-accent-hover:  var(--ember-10);
  --brand-accent-active: var(--ember-8);
  --brand-accent-muted:  var(--ember-a9);
  --brand-accent-border: var(--ember-a7);
  --brand-accent-text:   var(--ember-11);
  --text-link:           var(--ember-11);
  --text-link-hover:     var(--ember-10);
  --focus-ring:          var(--ember-8);

  --state-neutral-fg: var(--neutral-11);
  --state-neutral-bg: var(--neutral-a6);
  --state-neutral-border: var(--neutral-a8);
  --state-neutral-emphasis: var(--neutral-9);
  --state-neutral-on-emphasis: var(--neutral-1);

  --state-success-fg: var(--green-11);
  --state-success-bg: oklch(0.720 0.165 152 / 0.14);
  --state-success-border: var(--green-a7);
  --state-success-emphasis: var(--green-9);
  --state-success-on-emphasis: oklch(0.18 0.02 156);

  --state-warning-fg: var(--amber-11);
  --state-warning-bg: oklch(0.808 0.150 92 / 0.14);
  --state-warning-border: var(--amber-a7);
  --state-warning-emphasis: var(--amber-9);
  --state-warning-on-emphasis: oklch(0.20 0.03 92);

  --state-danger-fg: var(--red-11);
  --state-danger-bg: oklch(0.628 0.222 26 / 0.16);
  --state-danger-border: var(--red-a7);
  --state-danger-emphasis: var(--red-9);
  --state-danger-on-emphasis: oklch(0.97 0.02 25);

  --state-info-fg: var(--blue-11);
  --state-info-bg: oklch(0.640 0.150 248 / 0.14);
  --state-info-border: var(--blue-a7);
  --state-info-emphasis: var(--blue-9);
  --state-info-on-emphasis: oklch(0.97 0.02 248);

  --status-concept-fg: var(--state-neutral-fg);
  --status-concept-bg: var(--state-neutral-bg);
  --status-concept-border: var(--state-neutral-border);
  --status-active-fg: var(--state-success-fg);
  --status-active-bg: var(--state-success-bg);
  --status-active-border: var(--state-success-border);
  --status-parked-fg: var(--state-warning-fg);
  --status-parked-bg: var(--state-warning-bg);
  --status-parked-border: var(--state-warning-border);

  --selection-bg: var(--ember-a9);
  --scrim: oklch(0.10 0.01 264 / 0.72);
}