/* ============================================================================
   CRHQ Brand Tokens — Layer 3 Visual Identity
   THE authoritative token + helper file. Every brand & product surface pulls
   from this. Nothing hard-codes a hex that lives here. Versioning lives in
   05-governance/changelog.md (never a filename/(v2) suffix).
   ============================================================================ */

:root {
  /* ---- Brand core (the identity colours) -------------------------------- */
  --crhq-navy:        #0E1B4D;  /* anchor core · wordmark · 1-colour mark · primary ink-brand */
  --crhq-navy-2:      #1E3A8A;  /* ramp step between navy and cobalt-deep */
  --crhq-cobalt-deep: #2D4EBD;  /* large building blocks */
  --crhq-cobalt:      #3567E0;  /* PRIMARY action / link / focus */
  --crhq-cobalt-soft: #5A8BF0;  /* small building blocks · cobalt on dark */
  --crhq-cobalt-lt:   #7BA0F4;
  --crhq-cobalt-pale: #93C5FD;
  --crhq-white:       #FFFFFF;

  /* ---- Dark-identity core (Option C violet — raw constants) -------------
     The dark mode's identity colours, named once here so the mode layer,
     ramps, and pixel maps below ALIAS them instead of restating hexes.
     Naming parallels the cobalt family. Values are the locked Option C set. */
  --crhq-violet-ink:    #2A0E42;  /* deepest · primary-deep on dark */
  --crhq-violet-deep:   #3B1464;
  --crhq-violet-core:   #4C1D95;
  --crhq-violet:        #5B21B6;  /* PRIMARY action on dark */
  --crhq-violet-bright: #6D28D9;
  --crhq-violet-soft:   #7C3AED;
  --crhq-violet-lt:     #8B5CF6;
  --crhq-violet-pale:   #A78BFA;  /* link / primary-text on dark */
  --crhq-violet-mist:   #BDA7FF;  /* section labels on dark */
  /* dark surfaces (black-violet, not neutral grey) */
  --crhq-violet-black:     #07070B;  /* dark page */
  --crhq-violet-surface:   #0D0814;  /* dark card */
  --crhq-violet-surface-2: #120A1B;  /* dark card subtle */
  --crhq-violet-line:      #2A1A3A;  /* dark border */
  /* text on the violet-black surfaces (warm lavender stack) */
  --crhq-ink-on-violet:       #F2F2F7;  /* cooled 2026-07-29: was #F7F2FF, R-G +5 read warm (operator) */
  --crhq-ink-on-violet-soft:  #C9CBDC;  /* body on dark; cooled + slightly dimmed 2026-07-29, was #DCD4F0 which read pink and glared (12.5:1 kept) */
  --crhq-ink-on-violet-muted: #85879C;  /* cooled 2026-07-29: was #8F80AA, R-G +15 was the pinkest step */
  /* functional accents tuned for dark mode (never co-primary) */
  --crhq-acc-green-dark: #54D38A;
  --crhq-acc-amber-dark: #D89A56;
  --crhq-acc-cyan-dark:  #73D9E6;
  --crhq-danger-dark:    #FF7A7A;
  /* decorative glow — the violet radial used on dark stages/heroes.
     Use as rgba(var(--crhq-glow-rgb), <alpha>) so the colour is central
     while each surface keeps its own intensity. (= --crhq-violet in RGB) */
  --crhq-glow-rgb: 91, 33, 182;

  /* ---- Scattered "tapestry" ramps (logo/motion fill, per role) ---------- */
  --crhq-anchor-ramp:   var(--crhq-navy),var(--crhq-navy-2),var(--crhq-cobalt-deep);
  --crhq-block-lg-ramp: var(--crhq-cobalt-deep),var(--crhq-cobalt),var(--crhq-navy-2),var(--crhq-cobalt-soft);
  --crhq-block-sm-ramp: var(--crhq-cobalt),var(--crhq-cobalt-soft),var(--crhq-cobalt-lt),var(--crhq-cobalt-pale);

  /* ---- Category accents (verticals / content categories) ----------------
     Use ONLY as the 4-square pixel-block category label (see .crhq-cat).
     Never as page chrome — chrome is navy/cobalt. ~ the "1 light + 3 darker
     pixels" signature; the light pixel POSITION is fixed per accent. -------- */
  --crhq-acc-cobalt:  #3567E0;
  --crhq-acc-green:   #15803D;  /* lifted 2026-07-25 for WCAG AA at label size (was #16A34A, 3.30:1 on white) */
  --crhq-acc-purple:  #7C3AED;
  --crhq-acc-amber:   #A85A2C;
  /* on-dark lifts of the accents (use these on --crhq-dark, never the above) */
  --crhq-acc-cobalt-d:#5A8BF0;
  --crhq-acc-green-d: #6BB088;
  --crhq-acc-purple-d:#A99AC2;
  --crhq-acc-amber-d: #C99A6B;
  --crhq-cat-pixel-soft: 0.42;  /* opacity of the single light pixel */

  /* ---- Functional ------------------------------------------------------- */
  --crhq-success: #16A34A;        /* FILL only: white text on it is fine */
  /* Success as TEXT. #16A34A is 3.30:1 on white and fails AA at label sizes,
     the same fill-versus-text trap the brand already documents for the purple
     primary. Warning and danger pass as text, so they need no variant. */
  --crhq-success-text: #15803D;
  --crhq-warning: #A85A2C;
  --crhq-danger:  #C2410C;

  /* ---- Ink / surface — LIGHT (default, brand is light-mode oriented) ----- */
  --crhq-ink:        #15171A;   /* headlines / primary text */
  --crhq-ink-soft:   #4A5161;   /* body */
  --crhq-ink-muted:  #667085;   /* captions / mono labels; lifted 2026-07-25 for WCAG AA (was #7B8398, 3.79:1 on white) */
  --crhq-line:       #E6E9EE;   /* hairlines / borders */
  --crhq-surface:    #FFFFFF;   /* page */
  --crhq-surface-2:  #F7F8FA;   /* cards / wells */

  /* ---- Ink / surface — DARK (sanctioned dark sections only) -------------
     On dark: text uses the *-on-dark ramp, accents use the *-d lifts,
     borders use --crhq-line-dark. Primary action stays cobalt-soft. -------- */
  --crhq-dark:           #15171A;  /* dark page/section */
  --crhq-dark-2:         #1B1E22;  /* dark card/well */
  --crhq-ink-on-dark:        #F5F6F8;
  --crhq-ink-on-dark-soft:   #C7CCD4;
  --crhq-ink-on-dark-muted:  #8E94A0;
  --crhq-line-dark:          #2A2F38;

  /* ---- Type ------------------------------------------------------------- */
  --crhq-font-display: "Inter Tight", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --crhq-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --crhq-wordmark-weight: 700;
  --crhq-wordmark-track: -0.02em;
  /* type scale (1.250 major-third, 16px base) */
  --crhq-fs-display: clamp(34px, 5vw, 60px);  /* hero H1 */
  --crhq-fs-h1:      clamp(28px, 3.6vw, 40px);
  --crhq-fs-h2:      24px;
  --crhq-fs-h3:      19px;
  --crhq-fs-lede:    18px;
  --crhq-fs-body:    16px;
  --crhq-fs-sm:      14px;
  --crhq-fs-cap:     13px;     /* mono captions */
  --crhq-fs-eyebrow: 12px;     /* mono eyebrow, uppercase, 0.14em */
  --crhq-lh-tight:   1.12;
  --crhq-lh-body:    1.6;
  --crhq-track-display: -0.03em;
  --crhq-track-eyebrow:  0.14em;

  /* ---- Locked logo geometry (240u design grid) -------------------------- */
  --crhq-grid: 240; --crhq-pitch: 40; --crhq-pixel: 36;
  --crhq-pixel-radius: 4;   /* ~11% of pixel — LOCKED */
  --crhq-moat-box: 174; --crhq-moat-radius: 7;  /* ~4% of channel — LOCKED */

  /* ---- Radius / motion -------------------------------------------------- */
  --crhq-radius-sm: 6px; --crhq-radius: 8px; --crhq-radius-lg: 14px;
  --crhq-ease: cubic-bezier(0.37, 0.06, 0.32, 1);  /* the brand motion curve */
}

/* ============================================================================
   Category label — the 4-square pixel-block treatment (Treatment 06).
   Brand-native: reuses the pixel/building-block language. The pixel block is
   2x2; three pixels solid accent, ONE pixel at --crhq-cat-pixel-soft. The light
   pixel's CORNER is fixed per accent (cobalt=TL, green=TR, amber=BL,
   purple=BR) — it is an identifier, do not randomise it.
   Markup:
     <span class="crhq-cat crhq-cat--cobalt">
       <span class="crhq-px"><i></i><i></i><i></i><i></i></span>LABEL</span>
   ============================================================================ */
.crhq-cat {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--crhq-font-mono);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em;
}
.crhq-cat .crhq-px {
  display: inline-grid; grid-template-columns: repeat(2, 6px);
  gap: 1px; width: 13px; flex: none;
}
.crhq-cat .crhq-px i { display: block; width: 6px; height: 6px; }

.crhq-cat--cobalt { color: var(--crhq-acc-cobalt); }
.crhq-cat--green  { color: var(--crhq-acc-green); }
.crhq-cat--purple { color: var(--crhq-acc-purple); }
.crhq-cat--amber  { color: var(--crhq-acc-amber); }
.crhq-cat--cobalt .crhq-px i { background: var(--crhq-acc-cobalt); }
.crhq-cat--green  .crhq-px i { background: var(--crhq-acc-green); }
.crhq-cat--purple .crhq-px i { background: var(--crhq-acc-purple); }
.crhq-cat--amber  .crhq-px i { background: var(--crhq-acc-amber); }
/* the single light pixel — fixed corner per accent (identity, not random) */
.crhq-cat--cobalt .crhq-px i:nth-child(1) { opacity: var(--crhq-cat-pixel-soft); } /* TL */
.crhq-cat--green  .crhq-px i:nth-child(2) { opacity: var(--crhq-cat-pixel-soft); } /* TR */
.crhq-cat--amber  .crhq-px i:nth-child(3) { opacity: var(--crhq-cat-pixel-soft); } /* BL */
.crhq-cat--purple .crhq-px i:nth-child(4) { opacity: var(--crhq-cat-pixel-soft); } /* BR */

/* On dark: switch the accent to its lifted variant (call .on-dark on an
   ancestor, or use the --d token directly).
   SCOPE — .on-dark is the LIGHT identity's sanctioned dark *sections* (navy
   heroes, footer bands): neutral #15171A surfaces, --crhq-acc-*-d lifts.
   It is NOT the dark identity. Inside [data-crhq-mode="dark"] /
   .crhq-theme-dark, the mode layer's accents win — enforced by explicit
   precedence rules after the mode-aware block below. New work should prefer
   the mode layer; .on-dark remains for light-identity dark sections only. */
.on-dark .crhq-cat--cobalt, .crhq-cat--cobalt.on-dark { color: var(--crhq-acc-cobalt-d); }
.on-dark .crhq-cat--green,  .crhq-cat--green.on-dark  { color: var(--crhq-acc-green-d); }
.on-dark .crhq-cat--purple, .crhq-cat--purple.on-dark { color: var(--crhq-acc-purple-d); }
.on-dark .crhq-cat--amber,  .crhq-cat--amber.on-dark  { color: var(--crhq-acc-amber-d); }
.on-dark .crhq-cat--cobalt .crhq-px i { background: var(--crhq-acc-cobalt-d); }
.on-dark .crhq-cat--green  .crhq-px i { background: var(--crhq-acc-green-d); }
.on-dark .crhq-cat--purple .crhq-px i { background: var(--crhq-acc-purple-d); }
.on-dark .crhq-cat--amber  .crhq-px i { background: var(--crhq-acc-amber-d); }

/* ============================================================================
   "Built on CRHQ" endorsement badge (co-branding / white-label).
   Always the MONO mark (never the scattered logo). Reverse on dark via
   .on-dark on an ancestor. Min mark height 20px; clear space = mark height.
   Markup:
     <span class="crhq-builton">
       <img src="assets/logo/crhq-mark-mono.svg" alt="CRHQ">
       <span class="crhq-builton__tx">Built on<b>CRHQ</b></span></span>
   On dark, swap the img src to crhq-mark-reverse.svg.
   ============================================================================ */
.crhq-builton { display: inline-flex; align-items: center; gap: 9px; }
.crhq-builton img { height: 26px; width: 26px; display: block; }
.crhq-builton__tx {
  font-family: var(--crhq-font-mono); font-size: 12px; font-weight: 600;
  line-height: 1.15; letter-spacing: 0.02em; color: var(--crhq-ink-muted);
}
.crhq-builton__tx b { display: block; font-size: 13px; letter-spacing: 0;
  color: var(--crhq-navy); }
.crhq-builton--lg img { height: 40px; width: 40px; }
.crhq-builton--lg .crhq-builton__tx { font-size: 14px; }
.crhq-builton--lg .crhq-builton__tx b { font-size: 18px; }
.on-dark .crhq-builton__tx { color: var(--crhq-ink-on-dark-muted); }
.on-dark .crhq-builton__tx b { color: var(--crhq-ink-on-dark); }
/* mode-aware variant — resolves through the mode layer (wins when nested) */
[data-crhq-mode="dark"] .crhq-builton__tx,
.crhq-theme-dark .crhq-builton__tx { color: var(--crhq-text-muted); }
[data-crhq-mode="dark"] .crhq-builton__tx b,
.crhq-theme-dark .crhq-builton__tx b { color: var(--crhq-text); }

/* ============================================================================
   CRHQ Mode Tokens — Light/Dark semantic layer
   Use these tokens for website/product implementation. The original tokens above
   remain canonical raw values; this layer maps them into mode-aware semantics.

   Usage:
     <html data-crhq-mode="light"> or <html data-crhq-mode="dark">
     OR put .crhq-theme-light / .crhq-theme-dark on any subtree.

   Rule: product/site components should use --crhq-bg, --crhq-text,
   --crhq-primary, etc. They should not hard-code raw light/dark hex values.

   Mode selection is EXPLICIT by design — there is intentionally no
   prefers-color-scheme auto-switch. The brand is light-mode oriented
   (cornerstone constraint); dark is an opt-in identity, chosen by the
   surface (site header toggle / product setting), persisted under the
   single localStorage key "crhq-mode" (see assets/mode-sync.js).
   ============================================================================ */

:root,
[data-crhq-mode="light"],
.crhq-theme-light {
  color-scheme: light;

  /* surfaces */
  --crhq-bg: var(--crhq-surface);
  --crhq-bg-subtle: var(--crhq-surface-2);
  --crhq-card: var(--crhq-surface);
  --crhq-card-subtle: var(--crhq-surface-2);
  --crhq-border: var(--crhq-line);

  /* text */
  --crhq-text: var(--crhq-ink);
  --crhq-text-soft: var(--crhq-ink-soft);
  --crhq-text-muted: var(--crhq-ink-muted);
  --crhq-text-inverse: var(--crhq-ink-on-dark);

  /* primary brand/action */
  --crhq-primary-deep: var(--crhq-navy);
  --crhq-primary: var(--crhq-cobalt);
  --crhq-primary-soft: var(--crhq-cobalt-soft);
  --crhq-primary-pale: var(--crhq-cobalt-pale);
  --crhq-primary-text: var(--crhq-cobalt);
  --crhq-link: var(--crhq-cobalt);
  --crhq-focus: var(--crhq-cobalt);

  /* accessible editorial labels / section eyebrows */
  --crhq-section-label: var(--crhq-primary-deep);
  --crhq-section-label-soft: var(--crhq-primary);

  /* logo / motion ramp, index-stable — aliases the raw cobalt family */
  --crhq-ramp-0: var(--crhq-navy);
  --crhq-ramp-1: var(--crhq-navy-2);
  --crhq-ramp-2: var(--crhq-cobalt-deep);
  --crhq-ramp-3: var(--crhq-cobalt);
  --crhq-ramp-4: var(--crhq-cobalt-soft);
  --crhq-ramp-5: var(--crhq-cobalt-lt);
  --crhq-ramp-6: var(--crhq-cobalt-pale);

  /* canonical 42-pixel mark colour map; index order mirrors
     assets/logo/crhq-mark-color-map.json and motion MARK[].
     Each pixel aliases a ramp step — change the ramp, the mark follows. */
  --crhq-mark-px-01: var(--crhq-ramp-2);
  --crhq-mark-px-02: var(--crhq-ramp-3);
  --crhq-mark-px-03: var(--crhq-ramp-2);
  --crhq-mark-px-04: var(--crhq-ramp-3);
  --crhq-mark-px-05: var(--crhq-ramp-3);
  --crhq-mark-px-06: var(--crhq-ramp-3);
  --crhq-mark-px-07: var(--crhq-ramp-4);
  --crhq-mark-px-08: var(--crhq-ramp-4);
  --crhq-mark-px-09: var(--crhq-ramp-3);
  --crhq-mark-px-10: var(--crhq-ramp-4);
  --crhq-mark-px-11: var(--crhq-ramp-4);
  --crhq-mark-px-12: var(--crhq-ramp-4);
  --crhq-mark-px-13: var(--crhq-ramp-4);
  --crhq-mark-px-14: var(--crhq-ramp-4);
  --crhq-mark-px-15: var(--crhq-ramp-4);
  --crhq-mark-px-16: var(--crhq-ramp-5);
  --crhq-mark-px-17: var(--crhq-ramp-6);
  --crhq-mark-px-18: var(--crhq-ramp-2);
  --crhq-mark-px-19: var(--crhq-ramp-1);
  --crhq-mark-px-20: var(--crhq-ramp-2);
  --crhq-mark-px-21: var(--crhq-ramp-3);
  --crhq-mark-px-22: var(--crhq-ramp-1);
  --crhq-mark-px-23: var(--crhq-ramp-4);
  --crhq-mark-px-24: var(--crhq-ramp-2);
  --crhq-mark-px-25: var(--crhq-ramp-3);
  --crhq-mark-px-26: var(--crhq-ramp-3);
  --crhq-mark-px-27: var(--crhq-ramp-1);
  --crhq-mark-px-28: var(--crhq-ramp-0);
  --crhq-mark-px-29: var(--crhq-ramp-0);
  --crhq-mark-px-30: var(--crhq-ramp-1);
  --crhq-mark-px-31: var(--crhq-ramp-1);
  --crhq-mark-px-32: var(--crhq-ramp-2);
  --crhq-mark-px-33: var(--crhq-ramp-1);
  --crhq-mark-px-34: var(--crhq-ramp-2);
  --crhq-mark-px-35: var(--crhq-ramp-0);
  --crhq-mark-px-36: var(--crhq-ramp-2);
  --crhq-mark-px-37: var(--crhq-ramp-1);
  --crhq-mark-px-38: var(--crhq-ramp-1);
  --crhq-mark-px-39: var(--crhq-ramp-2);
  --crhq-mark-px-40: var(--crhq-ramp-0);
  --crhq-mark-px-41: var(--crhq-ramp-1);
  --crhq-mark-px-42: var(--crhq-ramp-0);

  /* semantic accents */
  --crhq-accent-positive: var(--crhq-acc-green);
  --crhq-accent-warning: var(--crhq-acc-amber);
  --crhq-accent-info: var(--crhq-acc-cobalt);
  --crhq-accent-memory: var(--crhq-acc-purple);
  --crhq-accent-danger: var(--crhq-danger);
}

[data-crhq-mode="dark"],
.crhq-theme-dark {
  color-scheme: dark;

  /* surfaces: black-violet, not neutral grey */
  --crhq-bg: var(--crhq-violet-black);
  --crhq-bg-subtle: var(--crhq-violet-surface);
  --crhq-card: var(--crhq-violet-surface);
  --crhq-card-subtle: var(--crhq-violet-surface-2);
  --crhq-border: var(--crhq-violet-line);

  /* text: warm lavender stack */
  --crhq-text: var(--crhq-ink-on-violet);
  --crhq-text-soft: var(--crhq-ink-on-violet-soft);
  --crhq-text-muted: var(--crhq-ink-on-violet-muted);
  --crhq-text-inverse: var(--crhq-ink);

  /* primary brand/action: Option C violet */
  --crhq-primary-deep: var(--crhq-violet-ink);
  --crhq-primary: var(--crhq-violet);
  --crhq-primary-soft: var(--crhq-violet-soft);
  --crhq-primary-pale: var(--crhq-violet-lt);
  --crhq-primary-text: var(--crhq-violet-pale);
  --crhq-link: var(--crhq-violet-pale);
  --crhq-focus: var(--crhq-violet-soft);

  /* accessible editorial labels / section eyebrows */
  --crhq-section-label: var(--crhq-violet-mist);
  --crhq-section-label-soft: var(--crhq-violet-pale);

  /* logo / motion ramp, index-stable — aliases the raw violet family */
  --crhq-ramp-0: var(--crhq-violet-ink);
  --crhq-ramp-1: var(--crhq-violet-deep);
  --crhq-ramp-2: var(--crhq-violet-core);
  --crhq-ramp-3: var(--crhq-violet);
  --crhq-ramp-4: var(--crhq-violet-bright);
  --crhq-ramp-5: var(--crhq-violet-soft);
  --crhq-ramp-6: var(--crhq-violet-lt);

  /* canonical 42-pixel mark colour map; index order mirrors
     assets/logo/crhq-mark-color-map.json and motion MARK[].
     Each pixel aliases a ramp step (px-16 sits above the ramp top). */
  --crhq-mark-px-01: var(--crhq-ramp-4);
  --crhq-mark-px-02: var(--crhq-ramp-5);
  --crhq-mark-px-03: var(--crhq-ramp-4);
  --crhq-mark-px-04: var(--crhq-ramp-5);
  --crhq-mark-px-05: var(--crhq-ramp-5);
  --crhq-mark-px-06: var(--crhq-ramp-5);
  --crhq-mark-px-07: var(--crhq-ramp-3);
  --crhq-mark-px-08: var(--crhq-ramp-3);
  --crhq-mark-px-09: var(--crhq-ramp-5);
  --crhq-mark-px-10: var(--crhq-ramp-6);
  --crhq-mark-px-11: var(--crhq-ramp-6);
  --crhq-mark-px-12: var(--crhq-ramp-6);
  --crhq-mark-px-13: var(--crhq-ramp-6);
  --crhq-mark-px-14: var(--crhq-ramp-6);
  --crhq-mark-px-15: var(--crhq-ramp-6);
  --crhq-mark-px-16: var(--crhq-violet-pale);
  --crhq-mark-px-17: var(--crhq-ramp-4);
  --crhq-mark-px-18: var(--crhq-ramp-4);
  --crhq-mark-px-19: var(--crhq-ramp-6);
  --crhq-mark-px-20: var(--crhq-ramp-4);
  --crhq-mark-px-21: var(--crhq-ramp-5);
  --crhq-mark-px-22: var(--crhq-ramp-6);
  --crhq-mark-px-23: var(--crhq-ramp-3);
  --crhq-mark-px-24: var(--crhq-ramp-4);
  --crhq-mark-px-25: var(--crhq-ramp-5);
  --crhq-mark-px-26: var(--crhq-ramp-5);
  --crhq-mark-px-27: var(--crhq-ramp-5);
  --crhq-mark-px-28: var(--crhq-ramp-6);
  --crhq-mark-px-29: var(--crhq-ramp-6);
  --crhq-mark-px-30: var(--crhq-ramp-5);
  --crhq-mark-px-31: var(--crhq-ramp-5);
  --crhq-mark-px-32: var(--crhq-ramp-4);
  --crhq-mark-px-33: var(--crhq-ramp-5);
  --crhq-mark-px-34: var(--crhq-ramp-4);
  --crhq-mark-px-35: var(--crhq-ramp-6);
  --crhq-mark-px-36: var(--crhq-ramp-4);
  --crhq-mark-px-37: var(--crhq-ramp-5);
  --crhq-mark-px-38: var(--crhq-ramp-5);
  --crhq-mark-px-39: var(--crhq-ramp-4);
  --crhq-mark-px-40: var(--crhq-ramp-6);
  --crhq-mark-px-41: var(--crhq-ramp-5);
  --crhq-mark-px-42: var(--crhq-ramp-6);

  /* semantic accents: limited, never co-primary */
  --crhq-accent-positive: var(--crhq-acc-green-dark);
  --crhq-accent-warning: var(--crhq-acc-amber-dark);
  --crhq-accent-info: var(--crhq-acc-cyan-dark);
  --crhq-accent-memory: var(--crhq-violet-lt);
  --crhq-accent-danger: var(--crhq-danger-dark);
}

/* Theme scaffolding helpers for prototypes and the website. */
.crhq-theme {
  background: var(--crhq-bg);
  color: var(--crhq-text);
  font-family: var(--crhq-font-display);
}
.crhq-theme a { color: var(--crhq-link); }
.crhq-theme .crhq-card {
  background: var(--crhq-card);
  border: 1px solid var(--crhq-border);
  color: var(--crhq-text);
  border-radius: var(--crhq-radius-lg);
}
.crhq-theme .crhq-muted { color: var(--crhq-text-muted); }
.crhq-theme .crhq-soft { color: var(--crhq-text-soft); }
.crhq-theme .crhq-primary { color: var(--crhq-primary-text); }
.crhq-theme .crhq-button-primary {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--crhq-primary); color: #fff;
  border: 1px solid color-mix(in srgb, var(--crhq-primary) 72%, #fff 28%);
  border-radius: var(--crhq-radius); padding: 10px 14px;
  font-weight: 700; text-decoration: none;
}

/* Mode-aware category label variant. Existing .on-dark remains supported
   for light-identity dark sections (see scope note at the .on-dark block). */
[data-crhq-mode="dark"] .crhq-cat--cobalt,
.crhq-theme-dark .crhq-cat--cobalt { color: var(--crhq-primary-pale); }
[data-crhq-mode="dark"] .crhq-cat--green,
.crhq-theme-dark .crhq-cat--green { color: var(--crhq-accent-positive); }
[data-crhq-mode="dark"] .crhq-cat--purple,
.crhq-theme-dark .crhq-cat--purple { color: var(--crhq-accent-memory); }
[data-crhq-mode="dark"] .crhq-cat--amber,
.crhq-theme-dark .crhq-cat--amber { color: var(--crhq-accent-warning); }
[data-crhq-mode="dark"] .crhq-cat--cobalt .crhq-px i,
.crhq-theme-dark .crhq-cat--cobalt .crhq-px i { background: var(--crhq-primary-pale); }
[data-crhq-mode="dark"] .crhq-cat--green .crhq-px i,
.crhq-theme-dark .crhq-cat--green .crhq-px i { background: var(--crhq-accent-positive); }
[data-crhq-mode="dark"] .crhq-cat--purple .crhq-px i,
.crhq-theme-dark .crhq-cat--purple .crhq-px i { background: var(--crhq-accent-memory); }
[data-crhq-mode="dark"] .crhq-cat--amber .crhq-px i,
.crhq-theme-dark .crhq-cat--amber .crhq-px i { background: var(--crhq-accent-warning); }

/* PRECEDENCE — when .on-dark is nested inside the dark identity, the mode
   layer wins deterministically (not by file order). One system, one answer. */
[data-crhq-mode="dark"] .on-dark .crhq-cat--cobalt,
.crhq-theme-dark .on-dark .crhq-cat--cobalt { color: var(--crhq-primary-pale); }
[data-crhq-mode="dark"] .on-dark .crhq-cat--green,
.crhq-theme-dark .on-dark .crhq-cat--green { color: var(--crhq-accent-positive); }
[data-crhq-mode="dark"] .on-dark .crhq-cat--purple,
.crhq-theme-dark .on-dark .crhq-cat--purple { color: var(--crhq-accent-memory); }
[data-crhq-mode="dark"] .on-dark .crhq-cat--amber,
.crhq-theme-dark .on-dark .crhq-cat--amber { color: var(--crhq-accent-warning); }
[data-crhq-mode="dark"] .on-dark .crhq-cat--cobalt .crhq-px i,
.crhq-theme-dark .on-dark .crhq-cat--cobalt .crhq-px i { background: var(--crhq-primary-pale); }
[data-crhq-mode="dark"] .on-dark .crhq-cat--green .crhq-px i,
.crhq-theme-dark .on-dark .crhq-cat--green .crhq-px i { background: var(--crhq-accent-positive); }
[data-crhq-mode="dark"] .on-dark .crhq-cat--purple .crhq-px i,
.crhq-theme-dark .on-dark .crhq-cat--purple .crhq-px i { background: var(--crhq-accent-memory); }
[data-crhq-mode="dark"] .on-dark .crhq-cat--amber .crhq-px i,
.crhq-theme-dark .on-dark .crhq-cat--amber .crhq-px i { background: var(--crhq-accent-warning); }

/* ============================================================================
   CRHQ Typography Tokens — semantic type API
   These sit above the raw font/scale tokens and should be used by components.
   They are mode-safe because colour aliases resolve through the mode layer.
   ============================================================================ */

:root {
  /* font roles */
  --crhq-type-font-display: var(--crhq-font-display);
  --crhq-type-font-body: var(--crhq-font-display);
  --crhq-type-font-ui: var(--crhq-font-display);
  --crhq-type-font-mono: var(--crhq-font-mono);

  /* display hierarchy */
  --crhq-type-display-size: var(--crhq-fs-display);
  --crhq-type-display-line: var(--crhq-lh-tight);
  --crhq-type-display-weight: 700;
  --crhq-type-display-track: var(--crhq-track-display);

  --crhq-type-h1-size: var(--crhq-fs-h1);
  --crhq-type-h1-line: var(--crhq-lh-tight);
  --crhq-type-h1-weight: 700;
  --crhq-type-h1-track: -0.025em;

  --crhq-type-h2-size: var(--crhq-fs-h2);
  --crhq-type-h2-line: 1.18;
  --crhq-type-h2-weight: 700;
  --crhq-type-h2-track: -0.02em;

  --crhq-type-h3-size: var(--crhq-fs-h3);
  --crhq-type-h3-line: 1.25;
  --crhq-type-h3-weight: 600;
  --crhq-type-h3-track: 0;

  /* reading hierarchy */
  --crhq-type-lede-size: var(--crhq-fs-lede);
  --crhq-type-lede-line: 1.55;
  --crhq-type-lede-weight: 400;

  --crhq-type-body-size: var(--crhq-fs-body);
  --crhq-type-body-line: var(--crhq-lh-body);
  --crhq-type-body-weight: 400;

  --crhq-type-small-size: var(--crhq-fs-sm);
  --crhq-type-small-line: 1.5;
  --crhq-type-caption-size: var(--crhq-fs-cap);
  --crhq-type-caption-line: 1.45;

  /* machine voice */
  --crhq-type-eyebrow-size: var(--crhq-fs-eyebrow);
  --crhq-type-eyebrow-line: 1.25;
  --crhq-type-eyebrow-weight: 600;
  --crhq-type-eyebrow-track: var(--crhq-track-eyebrow);
  --crhq-type-eyebrow-case: uppercase;

  /* wordmark lock */
  --crhq-type-wordmark-font: var(--crhq-font-display);
  --crhq-type-wordmark-weight: var(--crhq-wordmark-weight);
  --crhq-type-wordmark-track: var(--crhq-wordmark-track);

  /* semantic colours for type */
  --crhq-type-color-heading: var(--crhq-text);
  --crhq-type-color-body: var(--crhq-text-soft);
  --crhq-type-color-muted: var(--crhq-text-muted);
  --crhq-type-color-accent: var(--crhq-primary-text);
  --crhq-type-color-label: var(--crhq-section-label);
}

.crhq-type-display {
  font-family: var(--crhq-type-font-display);
  font-size: var(--crhq-type-display-size);
  line-height: var(--crhq-type-display-line);
  font-weight: var(--crhq-type-display-weight);
  letter-spacing: var(--crhq-type-display-track);
  color: var(--crhq-type-color-heading);
}
.crhq-type-h1 {
  font-family: var(--crhq-type-font-display);
  font-size: var(--crhq-type-h1-size);
  line-height: var(--crhq-type-h1-line);
  font-weight: var(--crhq-type-h1-weight);
  letter-spacing: var(--crhq-type-h1-track);
  color: var(--crhq-type-color-heading);
}
.crhq-type-body {
  font-family: var(--crhq-type-font-body);
  font-size: var(--crhq-type-body-size);
  line-height: var(--crhq-type-body-line);
  font-weight: var(--crhq-type-body-weight);
  color: var(--crhq-type-color-body);
}
.crhq-type-eyebrow {
  font-family: var(--crhq-type-font-mono);
  font-size: var(--crhq-type-eyebrow-size);
  line-height: var(--crhq-type-eyebrow-line);
  font-weight: var(--crhq-type-eyebrow-weight);
  letter-spacing: var(--crhq-type-eyebrow-track);
  text-transform: var(--crhq-type-eyebrow-case);
  color: var(--crhq-type-color-label,var(--crhq-type-color-accent));
}