/* ------------------------------------------------------------------
   Threshold — Advant design tokens

   Brand-layer prefix --th-* per design-system §1 layered token
   discipline (mirrors canon's docs/design-references/.../tokens.css).
   Light mode is primary. Dark is a variant.

   Layers:
     --bs-*  Bootstrap chrome (defined in threshold-bootstrap.css)
     --th-*  Threshold brand substrate (this file)
     --cx-*  form-builder semantic layer (form-builder-tokens.css)
     --re-*  rules-editor local layer (rules-editor.css)
     --cmp-* Compass tenant layer (Compass project)
   ------------------------------------------------------------------ */

:root {
  /* ----- Surfaces (cool-neutral, crisp — contemporary, not cream) ----- */
  --th-paper:        oklch(98.8% 0.002 250);    /* page background — crisp, very slightly cool */
  --th-paper-2:      oklch(96.5% 0.003 250);    /* secondary surface, table zebra */
  --th-paper-3:      oklch(94.2% 0.004 250);    /* tertiary, sidenav bg */
  --th-paper-sunk:   oklch(99.6% 0.001 250);    /* card / content surface — sits above paper */

  /* ----- Ink — confident, slight cool. The text reads as graphite, not sepia. ----- */
  --th-ink:          oklch(19% 0.018 255);      /* primary text */
  --th-ink-2:        oklch(38% 0.015 255);      /* secondary text */
  --th-ink-3:        oklch(56% 0.012 255);      /* tertiary / labels */
  --th-ink-4:        oklch(72% 0.008 255);      /* muted / placeholder */

  /* ----- Hairlines (very low contrast — the structure language) ----- */
  --th-line:         oklch(91% 0.005 250);
  --th-line-2:       oklch(85.5% 0.007 250);
  --th-line-soft:    oklch(94.5% 0.004 250);

  /* ----- Advant — sharper, more confident blue. Contemporary, not glossy. ----- */
  --th-advant:       oklch(54% 0.16 245);       /* primary brand — selection, links, accent */
  --th-advant-deep:  oklch(34% 0.13 250);       /* "Advant Ink" — chrome wordmark, primary button */
  --th-advant-soft:  oklch(94% 0.04 245);       /* tint for selected nav, focus */
  --th-advant-fg:    oklch(99% 0.005 245);

  /* ----- Copper — single warm accent. Used sparingly: AUTHORING context, section editorialism.
           Refined from the previous marigold — lower lightness, more copper than golden. ----- */
  --th-marigold:     oklch(62% 0.14 55);
  --th-marigold-deep:oklch(45% 0.13 50);
  --th-marigold-soft:oklch(95% 0.03 60);

  /* ----- Oxblood (brand chrome only) — Crossroads' binding stripe.
           Locked-accent per ADR-0035 Hard Rule 4: appears in EXACTLY two
           places — the sidenav lockup threshold rule and the footer
           endorsement rule. Never in dashboard / submissions / AppDef
           chrome. Defined in :root so light-mode chrome resolves it; the
           dark-variant override below adjusts lightness for the warm-dark
           substrate. ----- */
  --th-xr-bind:      oklch(38% 0.10 25);
  --th-xr-bind-soft: oklch(94% 0.028 30);

  /* ----- Status — muted, earned. No alarm chrome ----- */
  --th-ok:           oklch(56% 0.10 155);
  --th-ok-soft:      oklch(95% 0.03 155);
  --th-warn:         oklch(68% 0.12 75);
  --th-warn-soft:    oklch(95% 0.04 80);
  --th-risk:         oklch(56% 0.14 25);
  --th-risk-soft:    oklch(95% 0.035 30);
  --th-info:         var(--th-advant);
  --th-info-soft:    var(--th-advant-soft);
  /* Rule — a semantic UI accent (purple) for the audit Rule pill. Not a brand
     accent; does not touch the ADR-0035 locked oxblood/copper inventory. */
  --th-rule:         oklch(52% 0.17 300);
  --th-rule-soft:    oklch(94% 0.04 300);

  /* Banner tokens (--banner-cross-tenant-*, --banner-impersonation-*)
     live in threshold-chrome.css alongside the .cc-banner rules that
     consume them — they're surface-specific session signals, not a
     brand-layer primitive. */

  /* ----- Type ----- */
  --th-font-sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --th-font-serif: "Source Serif 4", "Source Serif Pro", Charter, Georgia, serif;
  --th-font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Canon-naming aliases for the font tokens. The design handoff's chrome.css
     and fb.css reference --th-f-* throughout; impl historically used --th-font-*.
     Per the CSS audit (Phase 1 Session 1 finding #4), bridging both names avoids
     a 30+ site rename while letting Phase 2's .cc-* backfill atoms (lifted
     verbatim from canon) resolve correctly. Pure aliases — no behavior change. */
  --th-f-sans:  var(--th-font-sans);
  --th-f-serif: var(--th-font-serif);
  --th-f-mono:  var(--th-font-mono);

  /* ----- Sizes (density-first; tables read at 13/14, body at 14/15) ----- */
  --th-size-12: 11.5px;
  --th-size-13: 12.5px;
  --th-size-14: 13.5px;
  --th-size-15: 14.5px;
  --th-size-17: 16px;
  --th-size-20: 19px;
  --th-size-24: 23px;
  --th-size-32: 30px;
  --th-size-44: 42px;

  /* ----- Radii (restrained) ----- */
  --th-radius-2: 2px;
  --th-radius-3: 3px;
  --th-radius-5: 5px;
  --th-radius-8: 8px;
  --th-radius-pill: 999px;

  /* ----- Chrome ----- */
  --th-chrome-sidenav-w: 232px;
  --th-chrome-topbar-h:  52px;
  --th-chrome-subbar-h:  44px;  /* AppDef context switcher row */
}

/* ------------------------------------------------------------------
   Dark variant — warm-dark by design.
   Threshold's brand character in light is warm parchment; in dark we
   carry the warmth (low-chroma 60° hue at 16-22% lightness), not a
   neutral graphite. Atlas is the cool-dark sibling per ADR-0033 —
   the temperature departure is what differentiates them. Ink stays
   warm-tinted; copper holds at the same role; oxblood brightens
   just enough to register on the dark substrate.
   ------------------------------------------------------------------ */
[data-theme="dark"] {
  /* Warm-dark substrate. Hue 60° (parchment territory) with very
     low chroma so it doesn't read as "tan SaaS" — it reads as ink
     on aged paper at night. */
  --th-paper:        oklch(16% 0.010 60);     /* page */
  --th-paper-2:      oklch(20% 0.011 60);     /* table zebra, hover */
  --th-paper-3:      oklch(13% 0.009 60);     /* sidenav, footer well */
  --th-paper-sunk:   oklch(22% 0.012 60);     /* cards / panels */

  /* Ink — warm-tinted primary. Secondary decisively muted; tertiary
     and quaternary track hierarchy without lifting toward primary. */
  --th-ink:          oklch(94% 0.010 75);     /* primary text */
  --th-ink-2:        oklch(72% 0.010 75);     /* secondary */
  --th-ink-3:        oklch(54% 0.011 75);     /* labels */
  --th-ink-4:        oklch(40% 0.011 75);     /* muted / placeholder */

  /* Hairlines — 3 steps. line is soft; line-2 carries weight. */
  --th-line:         oklch(28% 0.012 60);
  --th-line-2:       oklch(36% 0.013 60);
  --th-line-soft:    oklch(22% 0.011 60);

  /* Advant — readable but never glowing on warm-dark. */
  --th-advant:       oklch(70% 0.13 245);
  --th-advant-deep:  oklch(78% 0.10 245);
  --th-advant-soft:  oklch(28% 0.06 245);
  --th-advant-fg:    oklch(14% 0.010 60);

  /* Copper — Threshold's working accent. Slight lift in lightness,
     same chroma; reads as copper, not orange. */
  --th-marigold:     oklch(70% 0.14 55);
  --th-marigold-deep:oklch(76% 0.12 50);
  --th-marigold-soft:oklch(26% 0.05 55);

  /* Oxblood (brand chrome only) — brightened just enough to register. */
  --th-xr-bind:      oklch(58% 0.14 25);
  --th-xr-bind-soft: oklch(26% 0.06 25);

  /* Status — earned, never alarmist. Pills retuned for soft-bg legibility. */
  --th-ok:           oklch(70% 0.13 155);
  --th-ok-soft:      oklch(24% 0.04 155);
  --th-warn:         oklch(76% 0.13 75);
  --th-warn-soft:    oklch(26% 0.05 75);
  --th-risk:         oklch(70% 0.15 25);
  --th-risk-soft:    oklch(26% 0.06 25);
  --th-rule:         oklch(72% 0.14 300);
  --th-rule-soft:    oklch(26% 0.06 300);
}

/* Dark-mode polish — selector tweaks that can't be expressed as token swaps */
[data-theme="dark"] .cc-pill.is-ok    { color: oklch(82% 0.12 155); background: oklch(22% 0.045 155); }
[data-theme="dark"] .cc-pill.is-warn  { color: oklch(84% 0.12 75);  background: oklch(24% 0.05 75); }
[data-theme="dark"] .cc-pill.is-risk  { color: oklch(82% 0.13 25);  background: oklch(24% 0.06 25); }
[data-theme="dark"] .cc-pill.is-info  { color: oklch(82% 0.10 245); background: oklch(24% 0.06 245); }
[data-theme="dark"] .cc-pill.is-neutral { background: var(--th-paper-2); color: var(--th-ink-2); border-color: var(--th-line-2); }

/* Phase 2 canon v6.1 Group 0 (2026-05-27): dark-mode .cc-btn.is-primary
 * override removed. The atom now consumes --cx-action / --cx-action-hover
 * (per canon v6.1 chrome.css); --cx-action's [data-bs-theme="dark"]
 * retune in form-builder-tokens.css handles the dark-mode resolution
 * automatically. The legacy override forced advant-blue in dark mode
 * — out of step with canon's marigold-everywhere primary. */
[data-theme="dark"] .cc-nav-item:hover { background: oklch(20% 0.012 255); }
[data-theme="dark"] .cc-nav-child:hover { background: oklch(20% 0.012 255); }
[data-theme="dark"] .cc-icon-btn-dot { border-color: var(--th-paper); }
[data-theme="dark"] .cc-tenant-crest { color: var(--th-paper); }
[data-theme="dark"] .cc-user-avatar { background: oklch(40% 0.08 220); color: var(--th-ink); }

/* Topbar search well — needs to sit visibly above paper in dark */
[data-theme="dark"] .cc-topbar-search {
  background: var(--th-paper-3);
  border-color: var(--th-line-2);
}

/* Reset-y baseline */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--th-font-sans);
  font-size: var(--th-size-14);
  color: var(--th-ink);
  background: var(--th-paper);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "ss02", "cv11";
}

/* Reusable atoms */
.serif { font-family: var(--th-font-serif); font-feature-settings: "onum"; }
.mono  { font-family: var(--th-font-mono); font-feature-settings: "tnum", "zero"; }
.tabular { font-variant-numeric: tabular-nums; }

.hairline { border: 1px solid var(--th-line); }
.hairline-b { border-bottom: 1px solid var(--th-line); }
.hairline-t { border-top: 1px solid var(--th-line); }
.hairline-r { border-right: 1px solid var(--th-line); }

.muted { color: var(--th-ink-3); }
.faint { color: var(--th-ink-4); }