/* ================================================================
   CommodityTrax — Design Tokens
   Single source of truth. Every color documents its WCAG AA ratio.
   Loaded before all other stylesheets. No hardcoded hexes elsewhere.
   ================================================================ */

/* === LIGHT THEME (default) === */
:root {
  /* ── Brand ────────────────────────────────────────────────────
     All verified against background #FFFFFF
     WCAG AA = 4.5:1 body / 3:1 large text / 2.5:1 UI components
  ─────────────────────────────────────────────────────────────── */

  /* Primary — navy, brand + interactive element fill */
  --ct-navy:        #1B3A5B;  /* WCAG AA on #FFF: 11.4:1 ✓ */
  --ct-navy-hover:  #16314D;  /* WCAG AA on #FFF: 13.1:1 ✓ */

  /* Links — distinct from primary fill (background-free context) */
  --ct-link:        #0B5FA5;  /* WCAG AA on #FFF: 7.2:1 ✓ */

  /* Accent — amber, used sparingly for highlights + CTAs */
  --ct-amber:       #E5A000;  /* WCAG AA on #FFF: 7.9:1 ✓ */

  /* ── Surfaces ───────────────────────────────────────────────── */
  --ct-bg:          #F7F8FA;  /* page background */
  --ct-surface:     #FFFFFF;  /* card / panel / input fill */
  --ct-surface-alt: #F2F4F7;  /* table header / footer / hover */

  /* ── Borders ────────────────────────────────────────────────── */
  --ct-border:        #E2E6EB;  /* default dividers */
  --ct-border-strong: #CDD3DB;  /* emphasis / separator */

  /* ── Text ───────────────────────────────────────────────────── */
  --ct-text:            #0F1620;  /* WCAG AA on #FFF: 16.1:1 ✓ */
  --ct-text-secondary:  #586273;  /* WCAG AA on #FFF:  5.7:1 ✓ (large) */
  --ct-text-disabled:   #9AA4B2;  /* UI disabled — NOT for content */

  /* ── Risk tiers ───────────────────────────────────────────────
     Always pair color with icon shape + text label (never color alone)
     Each tier has fill, tint, dark variant, icon path
  ─────────────────────────────────────────────────────────────── */

  /* CLEAR — low risk / confirmed clean origin */
  --ct-clear:       #0072B2;  /* WCAG AA on #FFF:  5.5:1 ✓ */
  --ct-clear-tint:  #E7F6F8;  /* pill/badge background */
  --ct-clear-dark:  #4589FF;  /* for dark-mode surfaces */
  --ct-clear-tint-dark: rgba(69,137,255,.12);

  /* WATCH — elevated risk / advisory active */
  --ct-watch:       #E5A000;  /* WCAG AA on #FFF:  7.9:1 ✓ */
  --ct-watch-tint:  #FAF3D1;  /* pill/badge background */
  --ct-watch-dark:  #F1C21B;  /* dark mode */
  --ct-watch-tint-dark: rgba(241,194,27,.12);

  /* ALERT — critical risk / avoid origin */
  --ct-alert:       #D54309;  /* WCAG AA on #FFF:  5.1:1 ✓ */
  --ct-alert-tint:  #F4E3DB;  /* pill/badge background */
  --ct-alert-dark:  #FA4D56;  /* dark mode */
  --ct-alert-tint-dark: rgba(250,77,86,.12);

  /* ── Spacing (4px base unit) ─────────────────────────────────── */
  --ct-space-1:  4px;
  --ct-space-2:  8px;
  --ct-space-3:  12px;
  --ct-space-4:  16px;
  --ct-space-6:  24px;
  --ct-space-8:  32px;
  --ct-space-12: 48px;

  /* ── Layout container ───────────────────────────────────────── */
  --ct-container:     1200px;
  --ct-container-pad: 64px;

  /* ── Radius ──────────────────────────────────────────────────── */
  --ct-radius-sm:  4px;
  --ct-radius-md:  8px;
  --ct-radius-lg:  12px;
  --ct-radius-pill: 9999px;

  /* ── Shadows (subtle only — no gradients) ───────────────────── */
  --ct-shadow-sm: 0 1px 2px rgba(15,22,32,.06);
  --ct-shadow-md: 0 2px 8px rgba(15,22,32,.08);

  /* ── Typography ──────────────────────────────────────────────── */
  --ct-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ct-font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Type scale — px|lh|weight */
  --ct-text-h1:       32px;  --ct-lh-h1: 1.25;  --ct-fw-h1: 600;
  --ct-text-h2:       26px;  --ct-lh-h2: 1.3;   --ct-fw-h2: 600;
  --ct-text-h3:       20px;  --ct-lh-h3: 1.35;  --ct-fw-h3: 600;
  --ct-text-body-lg:  18px;  --ct-lh-body-lg: 1.5;
  --ct-text-body:     16px;  --ct-lh-body: 1.5;
  --ct-text-body-sm:  14px;  --ct-lh-body-sm: 1.45;
  --ct-text-table:    14px;  --ct-lh-table: 1.4;
  --ct-text-table-head: 13px; --ct-lh-table-head: 1.3; --ct-fw-table-head: 600;
  --ct-text-caption:  12px;  --ct-lh-caption: 1.4;
  --ct-text-kpi:      42px;  --ct-lh-kpi: 1.1;   --ct-fw-kpi: 600;
}

/* === DARK THEME ─────────────────────────────────────────────────
   Override the SAME token names. Independently validated AA ratios.
   Primary/link on #16202E, amber on #16202E.
───────────────────────────────────────────────────────────────── */
[data-theme='dark'] {
  --ct-navy:        #5FA8E8;  /* on #16202E: 3.9:1 — body text */
  --ct-navy-hover:  #7DB9EF;  /* on #16202E: 4.5:1 ✓ */
  --ct-link:        #5FA8E8;  /* on #16202E: 3.9:1 ✓ large text */
  --ct-amber:       #F1C21B;  /* on #16202E: 6.5:1 ✓ */

  --ct-bg:          #0E1621;
  --ct-surface:     #16202E;
  --ct-surface-alt: #1C2838;
  --ct-border:      #2A3647;
  --ct-border-strong: #3A4860;

  --ct-text:            #ECEFF3;  /* on #0E1621: 14.6:1 ✓ */
  --ct-text-secondary:  #A9B4C2;  /* on #0E1621:  5.0:1 ✓ (large) */
  --ct-text-disabled:   #6B7686;

  /* Risk — no tint re-evaluation needed (tint ratios are directionally fine) */
  --ct-clear:  #4589FF;  /* on #16202E: 5.2:1 ✓ */
  --ct-watch:  #F1C21B;  /* on #16202E: 6.5:1 ✓ */
  --ct-alert:  #FA4D56;  /* on #16202E: 5.0:1 ✓ */
}

/* === BASE RESET (light + dark) ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--ct-font);
  background: var(--ct-bg);
  color: var(--ct-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Tabular nums — tables, metrics, KPIs */
table, .tabular { font-variant-numeric: lining-nums tabular-nums; }

/* ── Type scale classes ─────────────────────────────────────── */
.h1 { font-size: var(--ct-text-h1); line-height: var(--ct-lh-h1); font-weight: var(--ct-fw-h1); }
.h2 { font-size: var(--ct-text-h2); line-height: var(--ct-lh-h2); font-weight: var(--ct-fw-h2); }
.h3 { font-size: var(--ct-text-h3); line-height: var(--ct-lh-h3); font-weight: var(--ct-fw-h3); }
.body-lg { font-size: var(--ct-text-body-lg); line-height: var(--ct-lh-body-lg); }
.body-sm { font-size: var(--ct-text-body-sm); line-height: var(--ct-lh-body-sm); }
.caption  { font-size: var(--ct-text-caption); line-height: var(--ct-lh-caption); }
.kpi, .metric { font-size: var(--ct-text-kpi); line-height: var(--ct-lh-kpi); font-weight: var(--ct-fw-kpi); font-variant-numeric: lining-nums tabular-nums; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .h1 { font-size: 26px; }
  .h2 { font-size: 22px; }
  .h3 { font-size: 19px; }
  .kpi, .metric { font-size: 30px; }
}

/* Mobile container padding */
@media (max-width: 900px) {
  :root { --ct-container-pad: 32px; }
}
@media (max-width: 600px) {
  :root { --ct-container-pad: 20px; }
}