/* ============================================================
   ExpertChoice — Design tokens
   Single source of truth for color, type scale, spacing, grid.
   ============================================================ */
:root {
  /* Palette */
  --color-bg:        #1a2a3d;
  --color-surface:   #243348;
  --color-surface-2: #2d3f57;
  --color-border:    rgba(255, 255, 255, 0.10);
  --color-border-2:  rgba(255, 255, 255, 0.18);
  --color-text:      #f0f4f8;
  --color-muted:     rgba(240, 244, 248, 0.65); /* raised from 0.55 for WCAG AA */
  --color-accent:    #3b7ac9;  /* institutional blue - deep */
  --color-accent-2:  #2de08a;  /* positive metrics green */
  --color-accent-3:  #f7c94a;  /* amber warnings / regulatory */
  --color-danger:    #e03d3d;
  --color-warn:      #f77a4a;
  --color-code-bg:   #10202f;  /* code / chart panels */

  /* Legacy aliases — used by ported demo widgets. Keep in sync with the
     canonical --color-* values above. */
  --black:    var(--color-bg);
  --surface:  var(--color-surface);
  --surface2: var(--color-surface-2);
  --border:   var(--color-border);
  --border2:  var(--color-border-2);
  --white:    var(--color-text);
  --muted:    var(--color-muted);
  --accent:   var(--color-accent);
  --accent2:  var(--color-accent-2);
  --accent3:  var(--color-accent-3);

  /* Typography */
  --font-heading: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;

  --text-h1:      56px;
  --text-h2:      40px;
  --text-h3:      24px;
  --text-h4:      18px;
  --text-body:    16px;
  --text-small:   13px;
  --text-eyebrow: 11px;

  /* Spacing scale — no arbitrary values outside this scale */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  /* Section rhythm */
  --section-gap:     var(--space-7);
  --section-pad:     var(--space-6);

  /* Grid */
  --container-max: 1200px;
  --gutter:        24px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
}

@media (max-width: 768px) {
  :root {
    --text-h1:   34px;
    --text-h2:   28px;
    --text-h3:   20px;
    --text-h4:   16px;
    --text-body: 15px;
    --section-gap: var(--space-6);
    --section-pad: var(--space-5);
  }
}