/* ============================================================
   CloudZero Design System — Design Tokens
   ────────────────────────────────────────────────────────────
   Master file. Sourced verbatim from the canonical Storybook at
   Cloudzero/feature-web-apps@main:
     - libs/foundations/design-system/src/tokens/typography-tokens.json
     - libs/foundations/design-system/src/tokens/size-tokens.json
     - libs/foundations/design-system/src/tokens/text.styles.tokens.json
     - libs/foundations/design-system/src/tokens/effect.styles.tokens.json
     - libs/foundations/design-system/src/tokens/Color/semantic-tokens.{light,dark}.json
     - libs/foundations/design-system/src/tokens/Color/chart-tokens.{light,dark}.json
   All token names mirror the runtime keys in JSX/Chakra config.
   CSS variables use the --cz-* prefix.
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   POPPINS — self-hosted, 100–900 (all nine weights, 2026-08-09).
   300–700 are latin-subset woff2; 100/200/800/900 are full-unicode TTF
   pending conversion. No italics — none shipped, no italic tokens.
   Mirrors apps/web/public/fonts/poppins.css (latin subset, ~39KB).
   ⚠ ENGINEERING HANDOFF: FER's apps/web/public/fonts/ ships 300–700 only.
   Prototypes using 100/200/800/900 will NOT render correctly in Storybook
   until engineering adds the same four faces.
   Resolve `assets/fonts/` from the file that imports tokens.css.
   ──────────────────────────────────────────────────────────── */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/poppins-300.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/poppins-700.woff2') format('woff2'); }
/* 100/200/800/900 added 2026-08-09 — TTF (full unicode, heavier than the woff2 subset above).
   TODO: convert to latin-subset woff2 and swap the src, to match 300–700. */

:root {
  /* ── FONT FAMILIES (typography-tokens.json#fonts) ───────────
     body/heading resolve to Poppins. mono: the Figma token says Poppins,
     but tokens/index.ts OVERRIDES it to a real monospace stack — that is
     what ships, so the mirror matches the shipped value (not the raw token). */
  --cz-font-body:    "Poppins", sans-serif;
  --cz-font-heading: "Poppins", sans-serif;
  --cz-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, monospace;

  /* ── FONT SIZES (typography-tokens.json#fontSizes) ─────────── */
  --cz-fs-2xs: 10px;
  --cz-fs-xs:  12px;
  --cz-fs-sm:  14px;
  --cz-fs-md:  16px;
  --cz-fs-lg:  18px;
  --cz-fs-xl:  20px;
  --cz-fs-2xl: 24px;
  --cz-fs-3xl: 30px;
  --cz-fs-4xl: 36px;
  --cz-fs-5xl: 48px;
  --cz-fs-6xl: 60px;
  --cz-fs-7xl: 72px;
  --cz-fs-8xl: 96px;
  --cz-fs-9xl: 128px;

  /* ── FONT WEIGHTS (typography-tokens.json#fontWeights) ───────
     CHANGED 2026-08-09: `bold` now = 700, matching the CSS spec
     (font-weight: bold IS 700). It was previously a 600 alias for
     semibold — a CZ delta that made the shipped 700 face unreachable
     and left two tokens meaning "bold". Affects CZTabs count badge,
     CZText weight="bold", status-count-card legend.
     ⚠ ENGINEERS: mirror this — set bold to 700 in typography-tokens.json.
     All nine weights now ship. No italics.                            */
  --cz-fw-thin:       100; /* @kind font */
  --cz-fw-extralight: 200; /* @kind font */ /* ⚠ TTF, not woff2 — see @font-face above */
  --cz-fw-light:      300; /* @kind font */
  --cz-fw-normal:     400; /* @kind font */
  --cz-fw-medium:     500; /* @kind font */
  --cz-fw-semibold:   600; /* @kind font */
  --cz-fw-semi:       600; /* @kind font */ /* DEPRECATED 2026-08-09 — zero live usages; use --cz-fw-semibold */
  --cz-fw-bold:       700; /* @kind font */ /* 700 as of 2026-08-09 — was a 600 alias. CZ DELTA vs FER */
  --cz-fw-extrabold:  800; /* @kind font */
  --cz-fw-black:      900; /* @kind font */

  /* ── LINE HEIGHTS · SYSTEM A — loose tokens (typography-tokens.json#lineHeights)
     Hand-set type ONLY. The ts-* presets carry their own paired leading (System B,
     written inline in each .ts-* rule below). NEVER mix the two — see
     design-system/token-registry.md §5. ─────────────────────────── */
  --cz-lh-shorter:  18px; /* @kind font */
  --cz-lh-short:    22px; /* @kind font */
  --cz-lh-moderate: 24px; /* @kind font */
  --cz-lh-tall:     26px; /* @kind font */
  --cz-lh-taller:   32px; /* @kind font */

  /* ── LETTER SPACINGS (typography-tokens.json#letterSpacings) ── */
  --cz-ls-tighter: 0px; /* @kind font */
  --cz-ls-tight:   0px; /* @kind font */
  --cz-ls-wide:    0.4px; /* @kind font */
  --cz-ls-wider:   0.8px; /* @kind font */
  --cz-ls-widest:  1.6px; /* @kind font */

  /* ── SPACING — 4px grid (size-tokens.json#Spacing) ─────────── */
  --cz-sp-0:    0; /* @kind spacing */
  --cz-sp-0_5:  2px;
  --cz-sp-1:    4px;
  --cz-sp-1_5:  6px;
  --cz-sp-2:    8px;
  --cz-sp-2_5:  10px;
  --cz-sp-3:    12px;
  --cz-sp-3_5:  14px;
  --cz-sp-4:    16px;
  --cz-sp-4_5:  18px;
  --cz-sp-5:    20px;
  --cz-sp-6:    24px;
  --cz-sp-7:    28px;
  --cz-sp-8:    32px;
  --cz-sp-9:    36px;
  --cz-sp-10:   40px;
  --cz-sp-11:   44px;
  --cz-sp-12:   48px;
  --cz-sp-14:   56px;
  --cz-sp-16:   64px;
  --cz-sp-20:   80px;
  --cz-sp-24:   96px;
  --cz-sp-28:   112px;
  --cz-sp-32:   128px;
  --cz-sp-36:   144px;
  --cz-sp-40:   160px;
  --cz-sp-44:   176px;
  --cz-sp-48:   192px;
  --cz-sp-52:   208px;
  --cz-sp-56:   224px;
  --cz-sp-60:   240px;
  --cz-sp-64:   256px;
  --cz-sp-72:   288px;
  --cz-sp-80:   320px;
  --cz-sp-96:   384px;

  /* ── RADII (size-tokens.json#Radii) ───────────────────────── */
  --cz-r-none: 0; /* @kind radius */
  --cz-r-2xs:  1px;
  --cz-r-xs:   2px;
  --cz-r-sm:   4px;
  --cz-r-md:   6px;
  --cz-r-lg:   8px;
  --cz-r-xl:   12px;
  --cz-r-2xl:  16px;
  --cz-r-3xl:  24px;     /* nav pills, cards, container l5 */
  --cz-r-4xl:  32px;
  --cz-r-full: 9999px;   /* buttons, inputs, avatars */

  /* Semantic radius aliases (size-tokens.json#Radii.Semantic_tokens) */
  --cz-r-l1: var(--cz-r-xs);   /* 2px */
  --cz-r-l2: var(--cz-r-sm);   /* 4px */
  --cz-r-l3: var(--cz-r-md);   /* 6px */
  --cz-r-l4: var(--cz-r-2xl);  /* 16px */
  --cz-r-l5: var(--cz-r-3xl);  /* 24px */

  /* Component radius tokens (theme.ts#radii overrides) */
  --cz-r-menu:    var(--cz-r-2xl);  /* 16px — Menu / dropdown / set-filter content */
  --cz-r-popover: var(--cz-r-3xl);  /* 24px — Popover content */

  /* ── BORDERS (size-tokens.json#Borders) ───────────────────── */
  --cz-border-xs: 0.5px;
  --cz-border-sm: 1px;
  --cz-border-md: 2px;
  --cz-border-lg: 4px;
  --cz-border-xl: 6px;

  /* ── LARGE SIZES — container / max-width scale (size-tokens.json#Large_Sizes) ─ */
  --cz-size-3xs: 224px;  /* @kind spacing */
  --cz-size-2xs: 256px;
  --cz-size-xs:  320px;
  --cz-size-sm:  384px;
  --cz-size-md:  448px;
  --cz-size-lg:  512px;
  --cz-size-xl:  576px;
  --cz-size-2xl: 672px;
  --cz-size-3xl: 768px;
  --cz-size-4xl: 896px;
  --cz-size-5xl: 1024px;
  --cz-size-6xl: 1152px;
  --cz-size-7xl: 1280px;
  --cz-size-8xl: 1440px;

  /* ── TRANSITIONS (Chakra defaults) ────────────────────────── */
  --cz-ease-fast:     150ms; /* @kind other */
  --cz-ease-normal:   200ms; /* @kind other */
  --cz-ease-moderate: 250ms; /* @kind other */
  --cz-ease-slow:     300ms; /* @kind other */
  --cz-ease-slower:   400ms; /* @kind other */
  --cz-ease-default:  ease; /* @kind other */
  --cz-ease-in-out:   ease-in-out; /* @kind other */

  /* ── DURATIONS (tokens/index.ts#durations — 1:1 FER) ──────── */
  --cz-durations-fastest: 50ms; /* @kind other */
  --cz-durations-faster:  100ms; /* @kind other */
  --cz-durations-fast:    150ms; /* @kind other */
  --cz-durations-normal:  200ms; /* @kind other */
  --cz-durations-slow:    300ms; /* @kind other */
  --cz-durations-slower:  400ms; /* @kind other */
  --cz-durations-slowest: 500ms; /* @kind other */

  /* ── BLURS (effect.styles.tokens.json#Blurs) ──────────────── */
  --cz-blur-none: 0px; /* @kind other */
  --cz-blur-sm:   4px; /* @kind other */
  --cz-blur-md:   8px; /* @kind other */
  --cz-blur-lg:   12px; /* @kind other */
  --cz-blur-xl:   16px; /* @kind other */
  --cz-blur-3xl:  24px; /* @kind other */

  /* ────────────────────────────────────────────────────────
     GLOBAL TOKENS — raw palette steps
     Source: tokens/Color/global-tokens.json
     These are absolute hex values. They do NOT change between
     light and dark themes. Use SEMANTIC tokens for app UI;
     these exist for reference + as building blocks for the
     semantic mappings below.
     ──────────────────────────────────────────────────────── */

  /* whiteAlpha (12 steps) */
  --cz-whiteAlpha-0:   #ffffff;
  --cz-whiteAlpha-50:  #ffffff0a;
  --cz-whiteAlpha-100: #ffffff0f;
  --cz-whiteAlpha-200: #ffffff14;
  --cz-whiteAlpha-300: #ffffff29;
  --cz-whiteAlpha-400: #ffffff3d;
  --cz-whiteAlpha-500: #ffffff5c;
  --cz-whiteAlpha-600: #ffffff7a;
  --cz-whiteAlpha-700: #ffffffa3;
  --cz-whiteAlpha-800: #ffffffcc;
  --cz-whiteAlpha-900: #ffffffeb;
  --cz-whiteAlpha-950: #fffffff2;

  /* blackAlpha (12 steps) */
  --cz-blackAlpha-0:   #000000;
  --cz-blackAlpha-50:  #0000000a;
  --cz-blackAlpha-100: #0000000f;
  --cz-blackAlpha-200: #00000014;
  --cz-blackAlpha-300: #00000029;
  --cz-blackAlpha-400: #0000003d;
  --cz-blackAlpha-500: #0000005c;
  --cz-blackAlpha-600: #0000007a;
  --cz-blackAlpha-700: #000000a3;
  --cz-blackAlpha-800: #000000cc;
  --cz-blackAlpha-900: #000000eb;
  --cz-blackAlpha-950: #000000f2;

  /* gray (11 steps) — allowed for app UI via semantic tokens */
  --cz-gray-50:  #fafafa;
  --cz-gray-100: #f4f4f5;
  --cz-gray-200: #e4e4e7;
  --cz-gray-300: #d4d4d8;
  --cz-gray-400: #a1a1aa;
  --cz-gray-500: #71717a;
  --cz-gray-600: #52525b;
  --cz-gray-700: #3f3f46;
  --cz-gray-800: #27272a;
  --cz-gray-900: #18181b;
  --cz-gray-950: #111111;

  /* orange (11 steps) — allowed for app UI via semantic tokens */
  --cz-orange-50:  #ffeac4;
  --cz-orange-100: #ffd6b0;
  --cz-orange-200: #ffc29c;
  --cz-orange-300: #ffa47e;
  --cz-orange-400: #ff906a;
  --cz-orange-500: #ff7c56;
  --cz-orange-600: #fe552e;
  --cz-orange-700: #c21800;
  --cz-orange-800: #a40000;
  --cz-orange-900: #860000;
  --cz-orange-950: #400000;

  /* teal (11 steps) — allowed */
  --cz-teal-50:  #f3fbfc;
  --cz-teal-100: #e3f5f7;
  --cz-teal-200: #cceaed;
  --cz-teal-300: #a2dce2;
  --cz-teal-400: #74c4cd;
  --cz-teal-500: #4599ac;
  --cz-teal-600: #2286a1;
  --cz-teal-700: #026681;
  --cz-teal-800: #03576e;
  --cz-teal-900: #00485b;
  --cz-teal-950: #01222d;

  /* red (11 steps) — allowed */
  --cz-red-50:  #fef2f2;
  --cz-red-100: #fee2e2;
  --cz-red-200: #fecaca;
  --cz-red-300: #fca5a5;
  --cz-red-400: #f87171;
  --cz-red-500: #ef4444;
  --cz-red-600: #da0a01;
  --cz-red-700: #991919;
  --cz-red-800: #511111;
  --cz-red-900: #300c0c;
  --cz-red-950: #1f0808;

  /* green (11 steps) — allowed */
  --cz-green-50:  #f0fdf4;
  --cz-green-100: #dcfce7;
  --cz-green-200: #bbf7d0;
  --cz-green-300: #86efac;
  --cz-green-400: #4ade80;
  --cz-green-500: #22c55e;
  --cz-green-600: #16a34a;
  --cz-green-700: #116932;
  --cz-green-800: #124a28;
  --cz-green-900: #042713;
  --cz-green-950: #03190c;

  /* yellow (11 steps) — allowed */
  --cz-yellow-50:  #fefce8;
  --cz-yellow-100: #fef9c3;
  --cz-yellow-200: #fef08a;
  --cz-yellow-300: #ffdc27;
  --cz-yellow-400: #facc15;
  --cz-yellow-500: #eab308;
  --cz-yellow-600: #ca8a04;
  --cz-yellow-700: #845209;
  --cz-yellow-800: #713f12;
  --cz-yellow-900: #422006;
  --cz-yellow-950: #281304;
  /* pink (11 steps) — raw scale; semantic `--cz-pink-*` now defined below
     (accent / highlight status, promoted 2026-08-03). */
  --cz-pink-50:  #fdf2f8;
  --cz-pink-100: #fce7f3;
  --cz-pink-200: #fbcfe8;
  --cz-pink-300: #f9a8d4;
  --cz-pink-400: #f472b6;
  --cz-pink-500: #ec4899;
  --cz-pink-600: #db2777;
  --cz-pink-700: #a41752;
  --cz-pink-800: #6d0e34;
  --cz-pink-900: #45061f;
  --cz-pink-950: #2c0514;

  /* purple (11 steps) — raw scale; semantic `--cz-purple-*` now defined below
     (used for the `archived` badge status). */
  --cz-purple-50:  #faf5ff;
  --cz-purple-100: #f3e8ff;
  --cz-purple-200: #e9d5ff;
  --cz-purple-300: #d8b4fe;
  --cz-purple-400: #c084fc;
  --cz-purple-500: #a855f7;
  --cz-purple-600: #9333ea;
  --cz-purple-700: #641ba3;
  --cz-purple-800: #4a1772;
  --cz-purple-900: #2f0553;
  --cz-purple-950: #1a032e;
  /* cyanarchive (11 steps) — LEGACY, retained for canonical parity
     Dark-mode `cyan` semantic tokens resolve to these archived shades. */
  /* ═══════════════════════════════════════════════════════
     SEMANTIC COLOR TOKENS — LIGHT MODE (DEFAULT)
     Source: Color/semantic-tokens.light.json
     ═══════════════════════════════════════════════════════ */

  /* Backgrounds */
  --cz-bg:           #ffffff;
  --cz-bg-subtle:    #fafafa;
  --cz-bg-muted:     #f4f4f5;
  --cz-bg-emphasized:#e4e4e7;
  --cz-bg-inverted:  #000000;
  --cz-bg-panel:     #ffffff;
  /* Drawer/panel surface — muted teal as of 2026-09-01 (was --cz-bg-subtle gray).
     Semantic alias of teal.muted; consume THIS, never --cz-teal-muted directly,
     so the drawer surface can be retuned in one place. See canonical/panel-drawer.md D13. */
  --cz-bg-drawer:        #e3f5f7;  /* = --cz-teal-muted */
  --cz-bg-drawer-hover:  #a2dce2;  /* = --cz-teal-emphasized — ghost hover ON the drawer surface */
  --cz-bg-error:     #fef2f2;
  --cz-bg-warning:   #ffeac4;
  --cz-bg-success:   #f0fdf4;
  --cz-bg-info:      #e3f5f7;
  /* Foreground (text) status colors — semantic fg.* (semantic-tokens.light#fg) */
  --cz-fg-error:     #ef4444;  /* red.500 */
  --cz-fg-warning:   #ffdc27;  /* yellow.300 */
  --cz-fg-success:   #16a34a;  /* green.600 */
  --cz-fg-info:      #2286a1;  /* teal.600 */

  /* Foreground */
  --cz-fg:          #000000;
  --cz-fg-subtle:   #a1a1aa;
  --cz-fg-muted:    #52525b;
  --cz-fg-inverted: #ffffff;

  /* Border */
  --cz-border:           #e4e4e7;
  --cz-border-subtle:    #fafafa;
  --cz-border-muted:     #f4f4f5;
  --cz-border-emphasized:#d4d4d8;
  --cz-border-inverted:  #27272a;
  --cz-border-error:     #ef4444;  /* red.500 */
  --cz-border-warning:   #ff7c56;  /* orange.500 */
  --cz-border-success:   #22c55e;  /* green.500 */
  --cz-border-info:      #4599ac;  /* teal.500 — CZ info=teal (FER border.info = blue.500) */

  /* Text */
  --cz-text-fg:       #000000;
  --cz-text-muted:    #52525b;
  --cz-text-subtle:   #a1a1aa;
  --cz-text-inverted: #fafafa;

  /* Palette: gray (semantic) */
  --cz-gray-contrast:   #ffffff;
  --cz-gray-fg:         #27272a;
  --cz-gray-subtle:     #fafafa;
  --cz-gray-muted:      #e4e4e7;
  --cz-gray-emphasized: #a1a1aa;
  --cz-gray-solid:      #18181b;
  --cz-gray-focus:      #a1a1aa;

  /* Palette: teal — primary brand accent */
  --cz-teal-contrast:   #ffffff;
  --cz-teal-fg:         #026681;
  --cz-teal-subtle:     #f3fbfc;
  --cz-teal-muted:      #e3f5f7;
  --cz-teal-emphasized: #a2dce2;
  --cz-teal-solid:      #2286a1;
  --cz-teal-focus:      #74c4cd;

  /* Palette: orange — CTAs, primary brand mark */
  --cz-orange-contrast:   #ffffff;
  --cz-orange-fg:         #c21800;
  --cz-orange-subtle:     #ffd6b0;
  --cz-orange-muted:      #ffc29c;
  --cz-orange-emphasized: #ffa47e;
  --cz-orange-solid:      #fe552e;
  --cz-orange-solid-hover: #d4431e;  /* brand CTA hover (FER CZ_ORANGE_HOVER) */
  --cz-orange-focus:      #ff906a;

  /* Palette: red — errors */
  --cz-red-contrast:   #ffffff;
  --cz-red-fg:         #991919;
  --cz-red-subtle:     #fee2e2;
  --cz-red-muted:      #fecaca;
  --cz-red-emphasized: #fca5a5;
  --cz-red-solid:      #da0a01;
  --cz-red-focus:      #f87171;

  /* Palette: green — success */
  --cz-green-contrast:   #ffffff;
  --cz-green-fg:         #116932;
  --cz-green-subtle:     #dcfce7;
  --cz-green-muted:      #bbf7d0;
  --cz-green-emphasized: #86efac;
  --cz-green-solid:      #16a34a;
  --cz-green-focus:      #4ade80;

  /* Palette: yellow — warnings */
  --cz-yellow-contrast:   #000000;
  --cz-yellow-fg:         #713f12;
  --cz-yellow-subtle:     #fef9c3;
  --cz-yellow-muted:      #fef08a;
  --cz-yellow-emphasized: #ffdc27;
  --cz-yellow-solid:      #ffdc27;
  --cz-yellow-focus:      #facc15;

  /* Palette: purple — archived / inactive-archival status (semantic).
     Derived from the purple scale on the standard pattern (subtle=100,
     muted=200, emphasized=300, solid=600, fg=700, focus=400). */
  --cz-purple-contrast:   #ffffff;
  --cz-purple-fg:         #641ba3;
  --cz-purple-subtle:     #f3e8ff;
  --cz-purple-muted:      #e9d5ff;
  --cz-purple-emphasized: #d8b4fe;
  --cz-purple-solid:      #9333ea;
  --cz-purple-focus:      #c084fc;

  /* Palette: pink — accent / highlight status (semantic).
     Derived from the pink scale on the standard pattern (subtle=100,
     muted=200, emphasized=300, solid=600, fg=700, focus=400). */
  --cz-pink-contrast:   #ffffff;
  --cz-pink-fg:         #a41752;
  --cz-pink-subtle:     #fce7f3;
  --cz-pink-muted:      #fbcfe8;
  --cz-pink-emphasized: #f9a8d4;
  --cz-pink-solid:      #db2777;
  --cz-pink-focus:      #f472b6;

  /* ────────────────────────────────────────────────────────
     CHART PALETTE — Default (light)
     Source: Color/chart-tokens.light.json — full 25-series palette.
     Use these tokens (--cz-chart-NN-name) for any chart fill or
     stroke. Do not hand-pick hex values for charts.
     ──────────────────────────────────────────────────────── */
  --cz-chart-01-orange:      #fe552e;
  --cz-chart-02-melon:       #ff9041;
  --cz-chart-03-sunset:      #ffab00;
  --cz-chart-04-lemon:       #ffc700;
  --cz-chart-05-deep:        #026681;
  --cz-chart-06-teal:        #2286a1;
  --cz-chart-07-calm:        #00a3a9;
  --cz-chart-08-seafoam:     #00bbaf;
  --cz-chart-09-lime:        #31c997;
  --cz-chart-10-mint:        #51c86d;
  --cz-chart-11-pale:        #97dea8;
  --cz-chart-12-powder:      #7dd8f9;
  --cz-chart-13-sky:         #5fc6ec;
  --cz-chart-14-pool:        #01b1e7;
  --cz-chart-15-ocean:       #009de1;
  --cz-chart-16-night:       #3449c0;
  --cz-chart-17-majestic:    #3d30a1;
  --cz-chart-18-pie:         #5d2fb0;
  --cz-chart-19-vibe:        #932baa;
  --cz-chart-20-groove:      #c32ea7;
  --cz-chart-21-hottestpink: #ef3693;
  --cz-chart-22-dainty:      #f94d77;
  --cz-chart-23-coral:       #fc6766;
  --cz-chart-24-terracotta:  #fd9951;
  --cz-chart-25-butternut:   #fdb338;
  --cz-chart-remaining:      #007e99;


  /* ════════════════════════════════════════════════════════
     EXTENDED CHART PALETTES — light values
     Source: tokens/chart-palettes/{vibrant,mod,soft,spectrum,accessible}.ts
     5 alternate palettes that the user can pick via ChartPaletteProvider.
     Each: 25 ordered fills + remaining slot.
     ════════════════════════════════════════════════════════ */

  /* vibrant — Vibrant — Tableau 10/20 */
  --cz-chart-vibrant-01: #4E79A7;
  --cz-chart-vibrant-02: #F28E2B;
  --cz-chart-vibrant-03: #E15759;
  --cz-chart-vibrant-04: #76B7B2;
  --cz-chart-vibrant-05: #59A14F;
  --cz-chart-vibrant-06: #EDC948;
  --cz-chart-vibrant-07: #B07AA1;
  --cz-chart-vibrant-08: #FF9DA7;
  --cz-chart-vibrant-09: #9C755F;
  --cz-chart-vibrant-10: #BAB0AC;
  --cz-chart-vibrant-11: #A0CBE8;
  --cz-chart-vibrant-12: #FFBE7D;
  --cz-chart-vibrant-13: #FF9D9A;
  --cz-chart-vibrant-14: #8CD17D;
  --cz-chart-vibrant-15: #B6992D;
  --cz-chart-vibrant-16: #499894;
  --cz-chart-vibrant-17: #86BCB6;
  --cz-chart-vibrant-18: #D37295;
  --cz-chart-vibrant-19: #FABFD2;
  --cz-chart-vibrant-20: #79706E;
  --cz-chart-vibrant-21: #D4A6C8;
  --cz-chart-vibrant-22: #9D7660;
  --cz-chart-vibrant-23: #D7B5A6;
  --cz-chart-vibrant-24: #1F77B4;
  --cz-chart-vibrant-25: #2CA02C;
  --cz-chart-vibrant-remaining: #BCC0C4;

  /* mod — Mod — Teal-forward */
  --cz-chart-mod-01: #2AB5A0;
  --cz-chart-mod-02: #F5C542;
  --cz-chart-mod-03: #F06C78;
  --cz-chart-mod-04: #2C3E50;
  --cz-chart-mod-05: #1CAC78;
  --cz-chart-mod-06: #E8B84B;
  --cz-chart-mod-07: #E85B6E;
  --cz-chart-mod-08: #34838F;
  --cz-chart-mod-09: #48CFAD;
  --cz-chart-mod-10: #D4A84B;
  --cz-chart-mod-11: #D94F68;
  --cz-chart-mod-12: #3D5A6E;
  --cz-chart-mod-13: #5BC4A8;
  --cz-chart-mod-14: #F0D264;
  --cz-chart-mod-15: #C44D60;
  --cz-chart-mod-16: #2A6B7C;
  --cz-chart-mod-17: #6DD8B4;
  --cz-chart-mod-18: #E8C85A;
  --cz-chart-mod-19: #B84258;
  --cz-chart-mod-20: #456878;
  --cz-chart-mod-21: #78DCC0;
  --cz-chart-mod-22: #DBC060;
  --cz-chart-mod-23: #A83850;
  --cz-chart-mod-24: #507888;
  --cz-chart-mod-25: #88E0CC;
  --cz-chart-mod-remaining: #2C3E50;

  /* soft — Soft — Warm CZN-derived */
  --cz-chart-soft-01: #F86E5E;
  --cz-chart-soft-02: #28B8A2;
  --cz-chart-soft-03: #E4B844;
  --cz-chart-soft-04: #EEA058;
  --cz-chart-soft-05: #DA6A82;
  --cz-chart-soft-06: #7A6AB2;
  --cz-chart-soft-07: #3CC898;
  --cz-chart-soft-08: #D09055;
  --cz-chart-soft-09: #3C9EBA;
  --cz-chart-soft-10: #C08AA0;
  --cz-chart-soft-11: #9A7AB0;
  --cz-chart-soft-12: #3ABCC0;
  --cz-chart-soft-13: #8CB840;
  --cz-chart-soft-14: #7A60AE;
  --cz-chart-soft-15: #E89860;
  --cz-chart-soft-16: #48A870;
  --cz-chart-soft-17: #4088C0;
  --cz-chart-soft-18: #B04878;
  --cz-chart-soft-19: #889840;
  --cz-chart-soft-20: #C04048;
  --cz-chart-soft-21: #38A8A0;
  --cz-chart-soft-22: #7880B8;
  --cz-chart-soft-23: #D08898;
  --cz-chart-soft-24: #B04840;
  --cz-chart-soft-25: #388888;
  --cz-chart-soft-remaining: #7A6AB2;

  /* spectrum — Spectrum — Blue-forward analytical */
  --cz-chart-spectrum-01: #4269D0;
  --cz-chart-spectrum-02: #EFB118;
  --cz-chart-spectrum-03: #FF725C;
  --cz-chart-spectrum-04: #6CC5B0;
  --cz-chart-spectrum-05: #3CA951;
  --cz-chart-spectrum-06: #FF8AB7;
  --cz-chart-spectrum-07: #A463F2;
  --cz-chart-spectrum-08: #97BBF5;
  --cz-chart-spectrum-09: #9C6B4E;
  --cz-chart-spectrum-10: #9498A0;
  --cz-chart-spectrum-11: #3A8DB8;
  --cz-chart-spectrum-12: #C98622;
  --cz-chart-spectrum-13: #D65A4A;
  --cz-chart-spectrum-14: #52AA97;
  --cz-chart-spectrum-15: #2E8A40;
  --cz-chart-spectrum-16: #D56EA0;
  --cz-chart-spectrum-17: #8A4FD8;
  --cz-chart-spectrum-18: #7FA3E3;
  --cz-chart-spectrum-19: #5A7FDF;
  --cz-chart-spectrum-20: #FFC14A;
  --cz-chart-spectrum-21: #FF9080;
  --cz-chart-spectrum-22: #83D6C2;
  --cz-chart-spectrum-23: #5CC170;
  --cz-chart-spectrum-24: #FFB0D3;
  --cz-chart-spectrum-25: #B98AE6;
  --cz-chart-spectrum-remaining: #9498A0;

  /* accessible — Accessible — Okabe-Ito + Paul Tol (CVD-safe) */
  --cz-chart-accessible-01: #E69F00;
  --cz-chart-accessible-02: #56B4E9;
  --cz-chart-accessible-03: #009E73;
  --cz-chart-accessible-04: #F0E442;
  --cz-chart-accessible-05: #0072B2;
  --cz-chart-accessible-06: #D55E00;
  --cz-chart-accessible-07: #000000;
  --cz-chart-accessible-08: #CC79A7;
  --cz-chart-accessible-09: #4477AA;
  --cz-chart-accessible-10: #EE6677;
  --cz-chart-accessible-11: #228833;
  --cz-chart-accessible-12: #CCBB44;
  --cz-chart-accessible-13: #66CCEE;
  --cz-chart-accessible-14: #AA3377;
  --cz-chart-accessible-15: #BBBBBB;
  --cz-chart-accessible-16: #0077BB;
  --cz-chart-accessible-17: #33BBEE;
  --cz-chart-accessible-18: #009988;
  --cz-chart-accessible-19: #EE7733;
  --cz-chart-accessible-20: #CC3311;
  --cz-chart-accessible-21: #EE3377;
  --cz-chart-accessible-22: #BBBBBB;
  --cz-chart-accessible-23: #332288;
  --cz-chart-accessible-24: #117733;
  --cz-chart-accessible-25: #882255;
  --cz-chart-accessible-remaining: #BBBBBB;

  /* Shadows — light (effect.styles.tokens.json#Shadows.Shadows light) */
  --cz-shadow-xs:    0px 1px 2px 0px #18181b0f, 0px 1px 3px 0px #18181b1a;
  --cz-shadow-sm:    0px 2px 4px 0px #18181b1a, 0px 0px 1px 0px #18181b4d;
  --cz-shadow-md:    0px 4px 8px 0px #18181b1a, 0px 0px 1px 0px #18181b4d;
  --cz-shadow-lg:    0px 8px 16px 0px #18181b1a, 0px 0px 1px 0px #18181b4d;
  --cz-shadow-xl:    0px 16px 24px 0px #18181b1a, 0px 0px 1px 0px #18181b4d;
  --cz-shadow-2xl:   0px 24px 40px 0px #18181b29, 0px 0px 1px 0px #18181b4d;
  --cz-shadow-inner: inset 0px 2px 4px 0px #0000000d;
  --cz-shadow-inset: inset 0px 0px 0px 1px #0000000d;
  --cz-shadow-sm-all: 0 0 4px rgba(24, 24, 27, 0.1), 0 0 1px rgba(24, 24, 27, 0.3); /* tokens/index.ts#shadows (custom append; light-only — FER defines no dark variant) */

  /* Focus rings — light (effect.styles.tokens.json#FocusRing) */
  --cz-focus-orange: 0 0 0 4px var(--cz-orange-focus), 0 0 0 2px #ffffff;
  --cz-focus-teal:   0 0 0 4px var(--cz-teal-focus),   0 0 0 2px #ffffff;
  --cz-focus-yellow: 0 0 0 4px var(--cz-yellow-focus), 0 0 0 2px #ffffff;
  --cz-focus-red:    0 0 0 4px var(--cz-red-focus),    0 0 0 2px #ffffff;
  --cz-focus-green:  0 0 0 4px var(--cz-green-focus),  0 0 0 2px #ffffff;
}

/* ════════════════════════════════════════════════════════════
   DARK MODE
   Toggle via EITHER:
     - <html class="dark">              (Chakra v3 / next-themes — production)
     - <html data-theme="dark">         (legacy preview toggle — kept for back-compat)
   Both selectors trigger the same overrides so previews and product code
   share one source of truth.
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"],
html.dark,
.dark {
  /* Backgrounds */
  --cz-bg:           #000000;
  --cz-bg-subtle:    #111111;
  --cz-bg-muted:     #18181b;
  --cz-bg-emphasized:#27272a;
  --cz-bg-inverted:  #ffffff;
  --cz-bg-panel:     #111111;
  --cz-bg-drawer:        #01222d;  /* = --cz-teal-subtle (dark) */
  --cz-bg-drawer-hover:  #03576e;  /* = --cz-teal-muted (dark) */
  --cz-bg-error:     #1f0808;
  --cz-bg-warning:   #400000;
  --cz-bg-success:   #03190c;
  --cz-bg-info:      #01222d;
  /* Foreground (text) status colors — semantic fg.* (semantic-tokens.dark#fg) */
  --cz-fg-error:     #f87171;  /* red.400 */
  --cz-fg-warning:   #ffa47e;  /* orange.300 */
  --cz-fg-success:   #86efac;  /* green.300 */
  --cz-fg-info:      #a2dce2;  /* teal.300 */

  /* Foreground */
  --cz-fg:          #fafafa;
  --cz-fg-subtle:   #71717a;
  --cz-fg-muted:    #71717a;
  --cz-fg-inverted: #111111;

  /* Border */
  --cz-border:           #27272a;
  --cz-border-subtle:    #111111;
  --cz-border-muted:     #18181b;
  --cz-border-error:     #f87171;  /* red.400 */
  --cz-border-warning:   #ff906a;  /* orange.400 */
  --cz-border-success:   #4ade80;  /* green.400 */
  --cz-border-info:      #74c4cd;  /* teal.400 — CZ info=teal (FER border.info = blue.400) */
  --cz-border-emphasized:#3f3f46;
  --cz-border-inverted:  #e4e4e7;

  /* Text */
  --cz-text-fg:       #fafafa;
  --cz-text-muted:    #a1a1aa;
  --cz-text-subtle:   #71717a;
  --cz-text-inverted: #000000;

  /* Gray (semantic, dark) */
  --cz-gray-contrast: #000000;
  --cz-gray-fg:       #e4e4e7;
  --cz-gray-subtle:   #18181b;
  --cz-gray-muted:    #27272a;
  --cz-gray-solid:    #ffffff;

  /* Teal (dark) */
  --cz-teal-fg:         #a2dce2;
  --cz-teal-subtle:     #01222d;
  --cz-teal-muted:      #03576e;
  --cz-teal-emphasized: #026681;

  /* Orange (dark) */
  --cz-orange-fg:         #ffa47e;
  --cz-orange-subtle:     #860000;
  --cz-orange-muted:      #a40000;
  --cz-orange-emphasized: #c21800;

  /* Red (dark) */
  --cz-red-fg:         #fca5a5;
  --cz-red-subtle:     #300c0c;
  --cz-red-muted:      #511111;
  --cz-red-emphasized: #991919;

  /* Green (dark) */
  --cz-green-fg:         #86efac;
  --cz-green-subtle:     #042713;
  --cz-green-muted:      #124a28;
  --cz-green-emphasized: #116932;

  /* Yellow (dark) */
  --cz-yellow-fg:         #ffdc27;
  --cz-yellow-subtle:     #422006;
  --cz-yellow-muted:      #713f12;
  --cz-yellow-emphasized: #845209;

  /* Purple (dark) — fg=300, subtle=900, muted=800, emphasized=700 */
  --cz-purple-fg:         #d8b4fe;
  --cz-purple-subtle:     #2f0553;
  --cz-purple-muted:      #4a1772;
  --cz-purple-emphasized: #641ba3;

  /* Pink (dark) — fg=300, subtle=900, muted=800, emphasized=700 */
  --cz-pink-fg:         #f9a8d4;
  --cz-pink-subtle:     #45061f;
  --cz-pink-muted:      #6d0e34;
  --cz-pink-emphasized: #a41752;

  /* ────────────────────────────────────────────────────────
     CHART PALETTE — Default (dark)
     Source: Color/chart-tokens.dark.json — full 25-series palette.
     ──────────────────────────────────────────────────────── */
  --cz-chart-01-orange:      #f96647;
  --cz-chart-02-melon:       #00a08f; /* 02-teal-chart (dark) */
  --cz-chart-03-sunset:      #f0c358; /* 03-yellow-chart (dark) */
  --cz-chart-04-lemon:       #ff9d52; /* 04-peach-chart (dark) */
  --cz-chart-05-deep:        #e06a7f; /* 05-pink-chart (dark) */
  --cz-chart-06-teal:        #6f61b9; /* 06-purple-chart (dark) */
  --cz-chart-07-calm:        #59c98c; /* 07-mint-chart (dark) */
  --cz-chart-08-seafoam:     #d9a65a; /* 08-amber-chart (dark) */
  --cz-chart-09-lime:        #31a6ba; /* 09-sky-chart (dark) */
  --cz-chart-10-mint:        #d98ba8; /* 10-rose-chart (dark) */
  --cz-chart-11-pale:        #9c7ad9; /* 11-plum-chart (dark) */
  --cz-chart-12-powder:      #4fb3c4; /* 12-cyan-chart (dark) */
  --cz-chart-13-sky:         #a8c96a; /* 13-lime-chart (dark) */
  --cz-chart-14-pool:        #927ad9; /* 14-violet-chart (dark) */
  --cz-chart-15-ocean:       #e0a16a; /* 15-apricot-chart (dark) */
  --cz-chart-16-night:       #63c98b; /* 16-fern-chart (dark) */
  --cz-chart-17-majestic:    #6cbfd9; /* 17-azure-chart (dark) */
  --cz-chart-18-pie:         #c07ad9; /* 18-berry-chart (dark) */
  --cz-chart-19-vibe:        #b8ba6a; /* 19-olive-chart (dark) */
  --cz-chart-20-groove:      #d36a6a; /* 20-crimson-chart (dark) */
  --cz-chart-21-hottestpink: #4fbfaf; /* 21-lagoon-chart (dark) */
  --cz-chart-22-dainty:      #9fa8e0; /* 22-periwinkle-chart (dark) */
  --cz-chart-23-coral:       #d99cb8; /* 23-blush-chart (dark) */
  --cz-chart-24-terracotta:  #b86a6a; /* 24-brick-chart (dark) */
  --cz-chart-25-butternut:   #6a9be0; /* 25-ocean-chart (dark) */
  --cz-chart-remaining:      #007e99;


  /* ────────────────────────────────────────────────────────
     EXTENDED CHART PALETTES — dark values
     ──────────────────────────────────────────────────────── */

  /* vibrant */
  --cz-chart-vibrant-01: #7AA9D6;
  --cz-chart-vibrant-02: #FFA94D;
  --cz-chart-vibrant-03: #F47A7C;
  --cz-chart-vibrant-04: #92D4CE;
  --cz-chart-vibrant-05: #7ABF6E;
  --cz-chart-vibrant-06: #FFD96B;
  --cz-chart-vibrant-07: #C896BA;
  --cz-chart-vibrant-08: #FFB8C0;
  --cz-chart-vibrant-09: #B58E78;
  --cz-chart-vibrant-10: #D4CCC8;
  --cz-chart-vibrant-11: #BCDBF2;
  --cz-chart-vibrant-12: #FFD2A0;
  --cz-chart-vibrant-13: #FFB7B4;
  --cz-chart-vibrant-14: #A8DE9A;
  --cz-chart-vibrant-15: #D4B547;
  --cz-chart-vibrant-16: #65B5B0;
  --cz-chart-vibrant-17: #A2D3CD;
  --cz-chart-vibrant-18: #E58CAB;
  --cz-chart-vibrant-19: #FFD0E0;
  --cz-chart-vibrant-20: #9E9492;
  --cz-chart-vibrant-21: #E6BFD9;
  --cz-chart-vibrant-22: #B8907A;
  --cz-chart-vibrant-23: #E8C9BA;
  --cz-chart-vibrant-24: #5293D0;
  --cz-chart-vibrant-25: #52BC52;
  --cz-chart-vibrant-remaining: #5A6068;

  /* mod */
  --cz-chart-mod-01: #58CCB8;
  --cz-chart-mod-02: #F8D46B;
  --cz-chart-mod-03: #F4909A;
  --cz-chart-mod-04: #5A7088;
  --cz-chart-mod-05: #4EC498;
  --cz-chart-mod-06: #F0CC6E;
  --cz-chart-mod-07: #F08090;
  --cz-chart-mod-08: #5AA4AE;
  --cz-chart-mod-09: #70DCC0;
  --cz-chart-mod-10: #E0BC6E;
  --cz-chart-mod-11: #E47488;
  --cz-chart-mod-12: #6A8498;
  --cz-chart-mod-13: #80D4BC;
  --cz-chart-mod-14: #F4DE88;
  --cz-chart-mod-15: #D47282;
  --cz-chart-mod-16: #5A96A4;
  --cz-chart-mod-17: #90E4C8;
  --cz-chart-mod-18: #F0D878;
  --cz-chart-mod-19: #CC6878;
  --cz-chart-mod-20: #6E8EA0;
  --cz-chart-mod-21: #98E6D0;
  --cz-chart-mod-22: #E4D080;
  --cz-chart-mod-23: #C06070;
  --cz-chart-mod-24: #78A0B0;
  --cz-chart-mod-25: #A8EADA;
  --cz-chart-mod-remaining: #5A6068;

  /* soft */
  --cz-chart-soft-01: #FA9088;
  --cz-chart-soft-02: #52CCB8;
  --cz-chart-soft-03: #ECC868;
  --cz-chart-soft-04: #F4B878;
  --cz-chart-soft-05: #E48C9E;
  --cz-chart-soft-06: #9A8CC8;
  --cz-chart-soft-07: #64D8B0;
  --cz-chart-soft-08: #DCA878;
  --cz-chart-soft-09: #64B4CC;
  --cz-chart-soft-10: #D0A4B8;
  --cz-chart-soft-11: #B498C8;
  --cz-chart-soft-12: #62D0D4;
  --cz-chart-soft-13: #A4CC60;
  --cz-chart-soft-14: #9880C4;
  --cz-chart-soft-15: #F0B080;
  --cz-chart-soft-16: #68BC8C;
  --cz-chart-soft-17: #68A4D4;
  --cz-chart-soft-18: #C86898;
  --cz-chart-soft-19: #A0B060;
  --cz-chart-soft-20: #D46068;
  --cz-chart-soft-21: #58BCB8;
  --cz-chart-soft-22: #9498CC;
  --cz-chart-soft-23: #DCA4B0;
  --cz-chart-soft-24: #C86860;
  --cz-chart-soft-25: #58A4A4;
  --cz-chart-soft-remaining: #5A6068;

  /* spectrum */
  --cz-chart-spectrum-01: #7196E5;
  --cz-chart-spectrum-02: #F5C849;
  --cz-chart-spectrum-03: #FF937F;
  --cz-chart-spectrum-04: #8DD6C5;
  --cz-chart-spectrum-05: #69BC74;
  --cz-chart-spectrum-06: #FFA8C7;
  --cz-chart-spectrum-07: #BB85F5;
  --cz-chart-spectrum-08: #B2CDF8;
  --cz-chart-spectrum-09: #B8896E;
  --cz-chart-spectrum-10: #B5B8C0;
  --cz-chart-spectrum-11: #5FA8D0;
  --cz-chart-spectrum-12: #E0A04A;
  --cz-chart-spectrum-13: #E27A6D;
  --cz-chart-spectrum-14: #7DBFAF;
  --cz-chart-spectrum-15: #5BA56F;
  --cz-chart-spectrum-16: #E290B7;
  --cz-chart-spectrum-17: #A87BE2;
  --cz-chart-spectrum-18: #A2BCEC;
  --cz-chart-spectrum-19: #7E9DE8;
  --cz-chart-spectrum-20: #FFCF73;
  --cz-chart-spectrum-21: #FFAA9D;
  --cz-chart-spectrum-22: #A6E2D2;
  --cz-chart-spectrum-23: #7FCC8E;
  --cz-chart-spectrum-24: #FFC8DE;
  --cz-chart-spectrum-25: #C9A6EC;
  --cz-chart-spectrum-remaining: #5A6068;

  /* accessible */
  --cz-chart-accessible-01: #F5B547;
  --cz-chart-accessible-02: #80C8F0;
  --cz-chart-accessible-03: #3DBE99;
  --cz-chart-accessible-04: #F5EC7C;
  --cz-chart-accessible-05: #3D9BD6;
  --cz-chart-accessible-06: #E8814A;
  --cz-chart-accessible-07: #FFFFFF;
  --cz-chart-accessible-08: #DD9CC1;
  --cz-chart-accessible-09: #7AA2C8;
  --cz-chart-accessible-10: #F08C99;
  --cz-chart-accessible-11: #5BAA66;
  --cz-chart-accessible-12: #DDCC6F;
  --cz-chart-accessible-13: #94DCF2;
  --cz-chart-accessible-14: #C56AA0;
  --cz-chart-accessible-15: #D5D5D5;
  --cz-chart-accessible-16: #3FA0D5;
  --cz-chart-accessible-17: #66D2F2;
  --cz-chart-accessible-18: #3DBBA8;
  --cz-chart-accessible-19: #F39562;
  --cz-chart-accessible-20: #E06A55;
  --cz-chart-accessible-21: #F36AA0;
  --cz-chart-accessible-22: #D5D5D5;
  --cz-chart-accessible-23: #6F66B0;
  --cz-chart-accessible-24: #4DA164;
  --cz-chart-accessible-25: #B05583;
  --cz-chart-accessible-remaining: #5A6068;

  /* Shadows — dark (effect.styles.tokens.json#Shadows.Shadows dark) */
  --cz-shadow-xs:  0px 1px 1px 0px #000000a3, inset 0px 0px 1px 0px #d4d4d833;
  --cz-shadow-sm:  0px 2px 4px 0px #000000a3, inset 0px 0px 1px 0px #d4d4d84d;
  --cz-shadow-md:  0px 4px 8px 0px #000000a3, inset 0px 0px 1px 0px #d4d4d84d;
  --cz-shadow-lg:  0px 8px 16px 0px #18181b1a, inset 0px 0px 1px 0px #d4d4d84d;
  --cz-shadow-xl:  0px 16px 24px 0px #000000a3, inset 0px 0px 1px 0px #d4d4d84d;
  --cz-shadow-2xl: 0px 24px 40px 0px #000000a3, inset 0px 0px 1px 0px #d4d4d84d;
}

/* ════════════════════════════════════════════════════════════
   TYPOGRAPHY HELPERS — short aliases used by preview cards.
   Names mirror the JSX `T` preset map.
   ════════════════════════════════════════════════════════════ */
.t-h1 { font: var(--cz-fw-semibold) var(--cz-fs-3xl)/38px var(--cz-font-heading); }
.t-h2 { font: var(--cz-fw-semibold) var(--cz-fs-2xl)/32px var(--cz-font-heading); }
.t-h3 { font: var(--cz-fw-semibold) var(--cz-fs-xl)/30px  var(--cz-font-heading); }
.t-h4 { font: var(--cz-fw-semibold) var(--cz-fs-lg)/28px  var(--cz-font-heading); }

.t-md-medium  { font: var(--cz-fw-medium)   var(--cz-fs-md)/24px var(--cz-font-body); }
.t-sm-medium  { font: var(--cz-fw-medium)   var(--cz-fs-sm)/20px var(--cz-font-body); }
.t-sm-semi    { font: var(--cz-fw-semibold) var(--cz-fs-sm)/20px var(--cz-font-body); }
.t-sm-normal  { font: var(--cz-fw-normal)   var(--cz-fs-sm)/20px var(--cz-font-body); }
.t-xs-medium  { font: var(--cz-fw-medium)   var(--cz-fs-xs)/16px var(--cz-font-body); }
.t-xs-semi    { font: var(--cz-fw-semibold) var(--cz-fs-xs)/16px var(--cz-font-body); letter-spacing: 0.05em; text-transform: uppercase; }
.t-2xs-medium { font: var(--cz-fw-medium)   var(--cz-fs-2xs)/14px var(--cz-font-body); }

/* ════════════════════════════════════════════════════════════
   TEXT STYLE PRESETS — full port of text.styles.tokens.json
   Use these exclusively — never hand-roll `font:` shorthand.
   Pattern: .ts-{size}-{weight} where weight ∈ normal|medium|semibold.
   ════════════════════════════════════════════════════════════ */

/* Headers (Headers.H1-H4) */
.ts-h1 { font: 600 var(--cz-fs-3xl)/38px var(--cz-font-heading); letter-spacing: 0; }
.ts-h2 { font: 600 var(--cz-fs-2xl)/32px var(--cz-font-body); letter-spacing: 0; } /* FER H2 cites fonts.body */
.ts-h3 { font: 600 var(--cz-fs-xl)/30px  var(--cz-font-heading); letter-spacing: 0; }
.ts-h4 { font: 600 var(--cz-fs-lg)/28px  var(--cz-font-heading); letter-spacing: 0; }

/* 2xs / 10 / 14 */
.ts-2xs-normal   { font: 400 var(--cz-fs-2xs)/14px var(--cz-font-body); }
.ts-2xs-medium   { font: 500 var(--cz-fs-2xs)/14px var(--cz-font-body); }
.ts-2xs-semibold { font: 600 var(--cz-fs-2xs)/14px var(--cz-font-body); }

/* xs / 12 / 16 */
.ts-xs-normal    { font: 400 var(--cz-fs-xs)/16px var(--cz-font-body); }
.ts-xs-medium    { font: 500 var(--cz-fs-xs)/16px var(--cz-font-body); }
.ts-xs-semibold  { font: 600 var(--cz-fs-xs)/16px var(--cz-font-body); }

/* sm / 14 / 20 */
.ts-sm-normal    { font: 400 var(--cz-fs-sm)/20px var(--cz-font-body); }
.ts-sm-medium    { font: 500 var(--cz-fs-sm)/20px var(--cz-font-body); }
.ts-sm-semibold  { font: 600 var(--cz-fs-sm)/20px var(--cz-font-body); }

/* md / 16 / 24 */
.ts-md-normal    { font: 400 var(--cz-fs-md)/24px var(--cz-font-body); }
.ts-md-medium    { font: 500 var(--cz-fs-md)/24px var(--cz-font-body); }
.ts-md-semibold  { font: 600 var(--cz-fs-md)/24px var(--cz-font-body); }

/* lg / 18 / 28 */
.ts-lg-normal    { font: 400 var(--cz-fs-lg)/28px var(--cz-font-body); }
.ts-lg-medium    { font: 500 var(--cz-fs-lg)/28px var(--cz-font-body); }
.ts-lg-semibold  { font: 600 var(--cz-fs-lg)/28px var(--cz-font-body); }

/* xl / 20 / 30 */
.ts-xl-normal    { font: 400 var(--cz-fs-xl)/30px var(--cz-font-body); }
.ts-xl-medium    { font: 500 var(--cz-fs-xl)/30px var(--cz-font-body); }
.ts-xl-semibold  { font: 600 var(--cz-fs-xl)/30px var(--cz-font-body); }

/* 2xl / 24 / 32 */
.ts-2xl-normal   { font: 400 var(--cz-fs-2xl)/32px var(--cz-font-body); }
.ts-2xl-medium   { font: 500 var(--cz-fs-2xl)/32px var(--cz-font-body); }
.ts-2xl-semibold { font: 600 var(--cz-fs-2xl)/32px var(--cz-font-body); }

/* 3xl / 30 / 38 */
.ts-3xl-normal   { font: 400 var(--cz-fs-3xl)/38px var(--cz-font-body); }
.ts-3xl-medium   { font: 500 var(--cz-fs-3xl)/38px var(--cz-font-body); }
.ts-3xl-semibold { font: 600 var(--cz-fs-3xl)/38px var(--cz-font-body); }

/* 4xl / 36 / 44 — letter-spacing −0.4px on normal only */
.ts-4xl-normal   { font: 400 var(--cz-fs-4xl)/44px var(--cz-font-body); letter-spacing: -0.4px; }
.ts-4xl-medium   { font: 500 var(--cz-fs-4xl)/44px var(--cz-font-body); }
.ts-4xl-semibold { font: 600 var(--cz-fs-4xl)/44px var(--cz-font-body); }

/* 5xl / 48 / 60 */
.ts-5xl-normal   { font: 400 var(--cz-fs-5xl)/60px var(--cz-font-body); letter-spacing: -0.4px; }
.ts-5xl-medium   { font: 500 var(--cz-fs-5xl)/60px var(--cz-font-body); }
.ts-5xl-semibold { font: 600 var(--cz-fs-5xl)/60px var(--cz-font-body); }

/* 6xl / 60 / 72 */
.ts-6xl-normal   { font: 400 var(--cz-fs-6xl)/72px var(--cz-font-body); letter-spacing: -0.4px; }
.ts-6xl-medium   { font: 500 var(--cz-fs-6xl)/72px var(--cz-font-body); }
.ts-6xl-semibold { font: 600 var(--cz-fs-6xl)/72px var(--cz-font-body); }

/* 7xl / 72 / 92 */
.ts-7xl-normal   { font: 400 var(--cz-fs-7xl)/92px var(--cz-font-body); letter-spacing: -0.4px; }
.ts-7xl-medium   { font: 500 var(--cz-fs-7xl)/92px var(--cz-font-body); }
.ts-7xl-semibold { font: 600 var(--cz-fs-7xl)/92px var(--cz-font-body); }

.ts-uppercase    { text-transform: uppercase; letter-spacing: 0.05em; }

/* ════════════════════════════════════════════════════════════
   PREVIEW-CARD PAGE SHELL
   Used by the design-system preview HTML files.
   ════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

.cz-preview-body {
  margin: 0;
  font: var(--cz-fw-normal) var(--cz-fs-sm)/20px var(--cz-font-body);
  color: var(--cz-fg);
  background: var(--cz-bg-subtle);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Body copy default — every block of running text inherits sm-normal / --cz-fg
   unless an explicit text-style class or component overrides it. */
body,
.cz-preview-body p,
.cz-preview-body li,
.cz-preview-body code,
.cz-preview-body span:not([class*="ts-"]):not([class*="t-"]):not(.badge):not(.dot) {
  font-family: var(--cz-font-body);
}
.cz-preview-body p,
.cz-preview-body li {
  font: var(--cz-fw-normal) var(--cz-fs-sm)/20px var(--cz-font-body);
  color: var(--cz-fg);
  margin: 0;
}

/* ════════════════════════════════════════════════════════════
   EYEBROW — opt-in only (component-registry.md §9)
   Use ONLY when the user explicitly asks for an eyebrow above a
   heading. Never add arbitrarily.
   ════════════════════════════════════════════════════════════ */
.cz-eyebrow {
  font: var(--cz-fw-medium) var(--cz-fs-sm)/20px var(--cz-font-body);
  color: var(--cz-gray-solid);
  letter-spacing: 0;
  text-transform: none;
}

/* Card frame for each preview */
.cz-card {
  background: var(--cz-bg);
  border: var(--cz-border-xs) solid var(--cz-border);
  border-radius: var(--cz-r-3xl);
  box-shadow: var(--cz-shadow-xs);
  padding: var(--cz-sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--cz-sp-10);
}

.cz-card-header {
  display: flex;
  flex-direction: column;
  gap: var(--cz-sp-1);
}
.cz-card-title    { color: var(--cz-gray-solid); }
.cz-card-subtitle { color: var(--cz-fg); }

/* Story section — ONE canonical gap owns the within-section vertical rhythm
   (subtitle → description → component → description → alert). 12px / sp-3. */
.cz-story { display: flex; flex-direction: column; gap: var(--cz-sp-6); }
/* Subtitle hugs its description: tighten ONLY the ts-h3 → <p> pair to 8px (sp-2). */
.cz-story > .ts-h3:has(+ p) { margin-bottom: calc(var(--cz-sp-2) - var(--cz-sp-6)); }

/* Section label inside a card (e.g. "BACKGROUND", "PALETTE: TEAL") */
.cz-section-label {
  font: var(--cz-fw-semibold) var(--cz-fs-xs)/16px var(--cz-font-body);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cz-text-subtle);
}


/* ════════════════════════════════════════════════════════════
   BACK-TO-TOP — fixed orange circular IconButton bottom-right.
   Click anchors back to the top of the preview page.
   ════════════════════════════════════════════════════════════ */
.cz-back-to-top {
  position: fixed;
  bottom: var(--cz-sp-6);
  right: var(--cz-sp-6);
  width: 48px;
  height: 48px;
  border-radius: var(--cz-r-full);
  background: var(--cz-orange-solid);
  color: var(--cz-orange-contrast);
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--cz-shadow-lg);
  z-index: 9999;
  transition: background var(--cz-ease-fast) var(--cz-ease-default);
}
.cz-back-to-top:hover {
  background: var(--cz-orange-emphasized);
  transform: scale(1.05);
}
.cz-back-to-top:active {
  background: var(--cz-orange-fg);
}
.cz-back-to-top:focus-visible {
  outline: 2px solid var(--cz-orange-focus);
  outline-offset: 2px;
}