/* Trazadera design tokens — single source of truth.
   Values from trazadera-branding SKILL.md (authoritative teal system).

   STRICT USAGE CONTRACT (this file is the ONLY place brand/palette hex may
   appear; everything else references var(--tz-*). Bare white uses --tz-white,
   and rgba() overlays use the matching --tz-*-rgb triplet):
     - Neutrals n50–n950 ...... the canvas: backgrounds, text, borders, muted (~90% of UI).
     - Primary / primary-dark .. primary actions, active state, focus rings, emphasis. Sparingly.
     - Accent-blue ............. links and the "info" semantic only.
     - Semantic ................ STATUS ONLY, never decoration; always paired with icon/label.
     - Accent (cyan #53BDD0) ... data-viz (charts/maps) ONLY — never in UI chrome.
     - White ................... raised surfaces only (cards/modals/popovers); page bg stays n50. */
:root {
  /* brand */
  --tz-primary: #024256;
  --tz-primary-rgb: 2, 66, 86;
  --tz-primary-dark: #02232D;
  --tz-accent: #53BDD0; /* data-viz only — not UI chrome */
  --tz-accent-rgb: 83, 189, 208;
  --tz-accent-blue: #0080AA;
  --tz-accent-blue-dark: #03578A;
  --tz-white: #fff;
  --tz-white-rgb: 255, 255, 255;

  /* teal-tinted neutral ramp — never pure gray */
  --tz-n950: #0B1D24;
  --tz-n900: #122A33;
  --tz-n800: #1E3F4C;
  --tz-n700: #2E5565;
  --tz-n600: #436D7D;
  --tz-n500: #5E8794;
  --tz-n400: #82A3AD;
  --tz-n300: #ACC3CA;
  --tz-n200: #D5E1E5;
  --tz-n100: #EDF2F4;
  --tz-n50:  #F6F9FA;

  /* Status primitives. The brand book's "Light" column is the tint, its "Dark"
     column the deep shade. The light theme pairs tint-as-fill with deep-as-text;
     the dark theme swaps them, which is why both live here as named primitives
     instead of being inlined into the pair tokens below. */
  --tz-success-tint: #D1FAE5; --tz-success-deep: #065F46;
  --tz-warning-tint: #FEF3C7; --tz-warning-deep: #92400E;
  --tz-error-tint:   #FEE2E2; --tz-error-deep:   #991B1B;
  --tz-info-tint:    #E0F4FA; --tz-info-deep:    #03578A;

  /* semantic: main / bg / fg — bg+fg swap per theme (see theme.css). */
  --tz-success: #10B981; --tz-success-bg: var(--tz-success-tint); --tz-success-fg: var(--tz-success-deep);
  --tz-warning: #F59E0B; --tz-warning-bg: var(--tz-warning-tint); --tz-warning-fg: var(--tz-warning-deep);
  --tz-error:   #EF4444; --tz-error-bg:   var(--tz-error-tint);   --tz-error-fg:   var(--tz-error-deep);
  --tz-info:    #0080AA; --tz-info-bg:    var(--tz-info-tint);    --tz-info-fg:    var(--tz-info-deep);

  /* rgb triplets for the semantic colors — Bootstrap composes .bg-*/.text-*
     as rgba(var(--bs-*-rgb), …), so the remap in theme.css needs these. */
  --tz-success-rgb: 16, 185, 129;
  --tz-warning-rgb: 245, 158, 11;
  --tz-error-rgb:   239, 68, 68;
  --tz-info-rgb:    0, 128, 170;

  /* spacing — 8px grid */
  --tz-sp-1: 4px;  --tz-sp-2: 8px;  --tz-sp-3: 12px; --tz-sp-4: 16px;
  --tz-sp-6: 24px; --tz-sp-8: 32px;

  /* rules — table passages begin with one shared ink rule */
  --tz-table-head-rule-width: 2px;

  /* radius */
  --tz-r-sm: 6px; --tz-r-md: 8px; --tz-r-lg: 12px; --tz-r-xl: 16px; --tz-r-full: 9999px;

  /* shadows — teal-tinted, never black */
  --tz-shadow-sm: 0 1px 2px rgba(2,35,45,.06);
  --tz-shadow-md: 0 4px 12px rgba(2,35,45,.08);
  --tz-shadow-lg: 0 8px 32px rgba(2,35,45,.10);
  --tz-shadow-xl: 0 16px 48px rgba(2,35,45,.14);

  /* Dark-theme shadows — same teal tint, raised opacity so they register against a
     dark surface (brand book: "increase opacity slightly, keep teal tint"). */
  --tz-shadow-sm-dark: 0 1px 2px rgba(2,35,45,.40);
  --tz-shadow-md-dark: 0 4px 12px rgba(2,35,45,.50);
  --tz-shadow-lg-dark: 0 8px 32px rgba(2,35,45,.60);
  --tz-shadow-xl-dark: 0 16px 48px rgba(2,35,45,.70);

  /* type families.
     The display face is Source Serif 4 - the editorial reskin of September 2026. It is a
     deliberate brand extension (the brand book has no serif; flagged to trazadera-branding):
     page titles and hero figures carry it, everything else stays Inter. Montserrat remains
     reserved for the brand wordmark, which is what the brand book actually assigns it to. */
  --tz-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tz-font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --tz-font-brand: 'Montserrat', var(--tz-font-sans);
  --tz-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Consolas', monospace;

  /* type scale — one source for every font-size
     xs  11  uppercase micro-labels (table headers, eyebrows)
     sm  13  secondary / meta / muted, small controls
     base 14 default UI text: body, nav, buttons, inputs, tables, chips
             (named --tz-text-base: the bare --tz-text is theme.css's COLOUR alias,
             which loads later and shadowed this size for as long as both existed —
             every font-size:var(--tz-text) silently inherited 16px instead)
     lg  16  lead / emphasized body, h5
     h4-h1 the heading ramp — h1/h2 widened in the editorial reskin so the serif
     display face has the range it needs (an editorial page is title-led; the old
     28px h1 gave a 2:1 range against body text, which reads as an admin panel)
     hero    the figure-as-headline: one number that is the page's subject */
  --tz-text-xs: 11px;
  --tz-text-sm: 13px;
  --tz-text-base: 14px;
  --tz-text-lg: 16px;
  --tz-text-h4: 18px;
  --tz-text-h3: 20px;
  --tz-text-h2: 26px;
  --tz-text-h1: 40px;
  --tz-text-hero: 76px;
}