/* ============================================================================
 * GENERATED FILE — DO NOT HAND-EDIT.
 * Source of truth: ethos style-guide.md §7 "Visual tokens".
 * guide_version: 0.4-draft   updated: 2026-07-07
 * Regenerate:  bun brand/generate-tokens.ts
 * (Edit the §7 yaml in style-guide.md, then regenerate — never edit this file.)
 * ============================================================================ */
:root {
  /* Type stacks (§7 type:) — Barlow body, Barlow Semi Condensed display,
     JetBrains Mono for code/data, with fallback chains. */
  --font-sans: 'Barlow', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Barlow Semi Condensed', 'Barlow', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Monaco, Consolas, 'Liberation Mono', monospace;

  /* Raw §7 brand palette (aliases — literal hex from the guide). */
  --brand-navy: #0C1826;      /* primary brand ground */
  --brand-paper: #F4F7FA;     /* light background */
  --brand-ink: #15212E;       /* primary text */
  --brand-slate: #54677B;     /* secondary text */
  --brand-consult: #D6803E;   /* Consultancy accent (warm clay) */
  --brand-consult-deep: #B5672C;   /* text-safe clay (links/text on light bg) */
  --brand-laddice: #3AA6B2;   /* Laddice accent (cool teal) */
  --brand-good: #3E8E5A;
  --brand-warning: #C58A2E;
  --brand-critical: #C24A3E;

  /* Structural scale (§7 scale:) — radius / font-size / spacing ramps. */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Semantic roles (consumer naming convention). Light theme is the default;
     dark overrides live in the [data-theme="dark"] block below. */
  --navy: var(--brand-navy);
  --bg: var(--brand-paper);
  --surface: #ffffff;
  --surface-2: var(--brand-paper);
  --ink: var(--brand-ink);
  --muted: var(--brand-slate);
  --accent: var(--brand-consult);
  --accent-2: var(--brand-laddice);

  /* Text-safe accents. Asymmetric on purpose: --accent-deep is a DESIGNED value
     (§7 consult_deep, the consult-db learn-page clay link), so it's transcribed,
     not formula-derived. No designed deep-teal exists, so --accent-2-deep stays a
     color-mix auto-darken; mint a laddice_deep in §7 if one is ever designed. */
  --accent-deep: var(--brand-consult-deep);
  --accent-2-deep: color-mix(in srgb, var(--accent-2), #000 30%);
  --link: var(--accent-deep);

  /* Status palette: fg from the §7 semantic trio; chip bgs are white tints
     derived from each fg via color-mix so the pairs can never drift apart. */
  --status-good-fg: var(--brand-good);
  --status-good-bg: color-mix(in srgb, var(--status-good-fg) 12%, #fff);
  --status-warning-fg: var(--brand-warning);
  --status-warning-bg: color-mix(in srgb, var(--status-warning-fg) 12%, #fff);
  --status-critical-fg: var(--brand-critical);
  --status-critical-bg: color-mix(in srgb, var(--status-critical-fg) 10%, #fff);
  --status-info-fg: var(--accent-2-deep);
  --status-info-bg: color-mix(in srgb, var(--accent-2) 14%, #fff);
  --status-neutral-fg: var(--muted);
  --status-neutral-bg: color-mix(in srgb, var(--muted) 10%, #fff);
}

/* Dark theme (AMPLE dark palette — navy ground, §7 theme_dark). Explicit opt-in
   via data-theme="dark"; the media query auto-applies it unless a consumer has
   pinned data-theme="light". */
:root[data-theme="dark"] {
    --bg: var(--brand-navy);
    --surface: var(--brand-ink);
    --surface-2: color-mix(in srgb, var(--brand-ink), #fff 6%);
    --ink: var(--brand-paper);
    --muted: color-mix(in srgb, var(--brand-slate), #fff 40%);
    --accent-deep: color-mix(in srgb, var(--accent), #fff 15%);
    --status-good-bg: color-mix(in srgb, var(--status-good-fg) 20%, var(--brand-navy));
    --status-warning-bg: color-mix(in srgb, var(--status-warning-fg) 20%, var(--brand-navy));
    --status-critical-bg: color-mix(in srgb, var(--status-critical-fg) 22%, var(--brand-navy));
    --status-info-bg: color-mix(in srgb, var(--accent-2) 20%, var(--brand-navy));
    --status-neutral-bg: color-mix(in srgb, var(--muted) 18%, var(--brand-navy));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--brand-navy);
    --surface: var(--brand-ink);
    --surface-2: color-mix(in srgb, var(--brand-ink), #fff 6%);
    --ink: var(--brand-paper);
    --muted: color-mix(in srgb, var(--brand-slate), #fff 40%);
    --accent-deep: color-mix(in srgb, var(--accent), #fff 15%);
    --status-good-bg: color-mix(in srgb, var(--status-good-fg) 20%, var(--brand-navy));
    --status-warning-bg: color-mix(in srgb, var(--status-warning-fg) 20%, var(--brand-navy));
    --status-critical-bg: color-mix(in srgb, var(--status-critical-fg) 22%, var(--brand-navy));
    --status-info-bg: color-mix(in srgb, var(--accent-2) 20%, var(--brand-navy));
    --status-neutral-bg: color-mix(in srgb, var(--muted) 18%, var(--brand-navy));
  }
}