/* Canonical design tokens — the single style source for the browser UI,
   HTML reports and PDF output (Block 2 item 41).

   Rules:
   - Every colour, font, size, radius, shadow, z-index and motion value used
     by platform.css, the page-level <style> blocks and the report builders
     must reference one of these tokens. tests/test_item41_design_system.py
     enforces that page styles contain no literals.
   - Keep the format machine-readable: one `--name: value;` per declaration,
     inside the single `:root { ... }` block. platform/utils/design_tokens.py
     parses this file and renders it (or a resolved, variable-free copy for
     PDF engines without var() support) into every report.
   - Names that existed before this file was extended keep working:
     --color-*, --font-family, --font-size-xs|sm|md, --space-1..6,
     --radius-sm|md|lg, --elevation-sm|md. */
:root {
  /* ── Brand ─────────────────────────────────────────────────────────── */
  --color-navy: #1A2D4F;
  --color-navy-dark: #12203A;
  --color-navy-deep: #142847;        /* hero gradients, dark headings */
  --color-navy-mid: #1B3C68;         /* hero gradient mid stop */
  --color-navy-light: #243D6B;       /* emphasised navy text on light */
  --color-blue: #315EA8;             /* accent blue for links/icons */
  --color-blue-soft: #EDF3FC;        /* icon discs, hover tints */
  --color-orange: #E55A17;
  --color-orange-dark: #C2410C;
  --color-orange-ink: #8E3C20;       /* text on orange-soft */
  --color-orange-soft: #FDE8DC;      /* badge-high / badge-hot background */
  --color-orange-tint: #FFF0E9;      /* softer orange wash */
  --color-orange-glow: #FF9867;      /* attention dot */
  --color-gold: #C8962E;
  --color-gold-dark: #D49A2D;
  --color-gold-soft: #FBF3E0;        /* badge-medium background */
  --color-gold-tint: #F6E8C8;

  /* ── Neutral scale (50 = lightest) ─────────────────────────────────── */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #F9FAFB;
  --color-neutral-100: #F3F4F6;
  --color-neutral-200: #E5E7EB;
  --color-neutral-300: #D1D5DB;
  --color-neutral-400: #9CA3AF;
  --color-neutral-500: #6B7280;
  --color-neutral-600: #4B5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1F2937;
  --color-neutral-900: #111827;

  /* ── Semantic surfaces & text ──────────────────────────────────────── */
  --color-canvas: #F4F5F7;           /* page background */
  --color-surface: #FFFFFF;          /* cards, tables, panels */
  --color-surface-alt: #F8FAFC;      /* table heads, zebra, hover rows */
  --color-surface-sunken: #EDF0F4;   /* sidebar hover, chips, secondary buttons */
  --color-surface-tint: #EEF2FF;     /* info wash (selected rows, notes) */
  --color-line: #E2E5EA;
  --color-line-strong: #D1D5DB;
  --color-line-soft: #EDF0F4;
  --color-line-hover: #B9C7DA;
  --color-ink: #1F2937;
  --color-ink-strong: #0F172A;
  --color-ink-soft: #374151;
  --color-muted: #6B7280;
  --color-muted-soft: #9CA3AF;
  --color-on-dark: #FFFFFF;          /* text on navy/orange */
  --color-on-dark-muted: #D6DCE5;    /* secondary text on navy */
  --color-on-dark-faint: #B9C2D0;    /* tertiary text on navy */

  /* ── State colours: base (text/border), ink (dark text), soft (bg) ─── */
  --color-success: #1E7F4F;
  --color-success-ink: #065F46;
  --color-success-soft: #DCFCE7;
  --color-success-tint: #ECFDF5;
  --color-success-line: #86EFAC;
  --color-warning: #B45309;
  --color-warning-ink: #92400E;
  --color-warning-soft: #FEF3C7;
  --color-warning-tint: #FFFBEB;
  --color-warning-line: #FCD34D;
  --color-danger: #B91C1C;
  --color-danger-ink: #991B1B;
  --color-danger-soft: #FEE2E2;
  --color-danger-tint: #FEF2F2;
  --color-danger-line: #FCA5A5;
  --color-info: #1E40AF;
  --color-info-ink: #1D4ED8;
  --color-info-soft: #DBEAFE;
  --color-info-tint: #EFF6FF;
  --color-violet: #5B21B6;
  --color-violet-soft: #EDE9FE;
  --color-rose: #9D174D;
  --color-rose-soft: #FCE7F3;
  --color-stale: #C8962E;            /* view-state: stale (gold) */
  --color-stale-soft: #FFF7ED;
  --color-loading: #6B7280;

  /* ── Translucent overlays (rgba allowed only here) ─────────────────── */
  --color-backdrop: rgba(18,32,58,.45);
  --color-backdrop-strong: rgba(15,23,42,.55);
  --color-on-dark-wash: rgba(255,255,255,.12);
  --color-on-dark-wash-strong: rgba(255,255,255,.2);
  --color-on-dark-line: rgba(255,255,255,.3);
  --color-on-dark-line-strong: rgba(255,255,255,.45);
  --color-focus-ring: rgba(200,150,46,.45);
  --color-accent-ring: rgba(229,90,23,.3);
  --color-surface-glass: rgba(255,255,255,.92);
  --color-blue-wash: rgba(49,94,168,.1);

  /* ── Typography ────────────────────────────────────────────────────── */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-family-serif: Georgia, "Times New Roman", serif;
  --font-size-2xs: 10px;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 22px;
  --font-size-2xl: 28px;
  --font-size-3xl: 36px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;
  --letter-spacing-caps: .06em;

  /* ── Spacing (4px grid) ────────────────────────────────────────────── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Radii ─────────────────────────────────────────────────────────── */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 22px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ── Elevation ─────────────────────────────────────────────────────── */
  --elevation-none: none;
  --elevation-xs: 0 1px 2px rgba(18,32,58,.08);
  --elevation-sm: 0 1px 3px rgba(18,32,58,.12);
  --elevation-md: 0 8px 24px rgba(18,32,58,.16);
  --elevation-card: 0 6px 20px rgba(20,40,71,.06);
  --elevation-top: 0 -2px 8px rgba(18,32,58,.08);
  --elevation-lg: 0 18px 45px rgba(18,32,58,.18);
  --elevation-panel: -10px 0 32px rgba(15,23,42,.22);
  --elevation-ring-warning: 0 0 0 4px #FBF3E0;
  --elevation-ring-danger: 0 0 0 4px #FDECE6;
  --elevation-ring-accent: 0 0 0 5px rgba(255,152,103,.15);
  --elevation-ring-focus: 0 0 0 2px #FFF1E8;
  --elevation-inset-accent: inset 0 -3px 0 #E55A17;
  --elevation-inset-none: inset 0 -3px 0 transparent;
  --elevation-inset-accent-both: inset 0 2px 0 #E55A17, inset 0 -2px 0 #E55A17;

  /* ── Z-index layers ────────────────────────────────────────────────── */
  --z-sticky: 100;
  --z-dropdown: 500;
  --z-doc-panel: 1000;
  --z-side-panel: 5000;
  --z-popover: 5001;
  --z-modal: 6000;
  --z-palette: 9000;
  --z-help: 9200;
  --z-toast: 9500;

  /* ── Motion ────────────────────────────────────────────────────────── */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 320ms;
  --motion-ease: cubic-bezier(.2,.7,.3,1);

  /* ── Layout & breakpoints (custom properties cannot be used inside
        @media queries; the values are documented here and repeated
        literally in platform.css: 1020px, 900px, 760px, 600px, 480px) ── */
  --breakpoint-xl: 1020px;
  --breakpoint-lg: 900px;
  --breakpoint-md: 760px;
  --breakpoint-sm: 600px;
  --breakpoint-xs: 480px;
  --layout-max-width: 1240px;
  --sidebar-width: 240px;
  --side-panel-width: 520px;
  --control-height: 34px;
  --touch-target: 40px;

  /* ── Print / PDF ───────────────────────────────────────────────────── */
  --page-size: A4 landscape;
  --page-margin: 14mm;
  --page-margin-portrait: 18mm;
  --print-font-size: 10.5pt;
  --print-line-height: 1.45;
}