/* =============================================================
   MCU Tracker — Design Tokens (variables.css)
   Maps directly from the Design System document §2–§4
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Colors ─────────────────────────────────────────────── */
  --color-void:            #0B0B0F;
  --color-surface:         #16161D;
  --color-surface-raised:  #1F1F29;
  --color-hero-red:        #ED1D24;
  --color-red-dim:         #8C1116;
  --color-infinity-gold:   #C9A227;
  --color-multiverse-blue: #4A90E2;
  --color-text-primary:    #F5F5F7;
  --color-text-secondary:  #9B9BA5;
  --color-text-muted:      #5C5C66;
  --color-border:          #2A2A34;
  --color-success:         #2FAE66;

  /* Derived / utility */
  --color-surface-highlight: rgba(255, 255, 255, 0.06);
  --color-red-tint:        rgba(237, 29, 36, 0.08);
  --color-success-tint:    rgba(47, 174, 102, 0.10);
  --color-gold-tint:       rgba(201, 162, 39, 0.10);
  --color-overlay:         rgba(11, 11, 15, 0.85);

  /* ── Typography ─────────────────────────────────────────── */
  --font-display:  'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:     'JetBrains Mono', 'Consolas', monospace;

  /* Type scale (Design §3) */
  --text-display-xl:  3.5rem;    /* 56px */
  --text-display:     2.25rem;   /* 36px */
  --text-h1:          1.75rem;   /* 28px */
  --text-h2:          1.25rem;   /* 20px */
  --text-body:        1rem;      /* 16px */
  --text-small:       0.875rem;  /* 14px */
  --text-micro:       0.75rem;   /* 12px */

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* ── Spacing Scale ──────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;

  /* ── Radius ─────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-pill: 999px;

  /* ── Transitions ────────────────────────────────────────── */
  --transition-tap:    120ms ease;
  --transition-page:   150ms ease;
  --transition-fill:   400ms ease-out;

  /* ── Layout ─────────────────────────────────────────────── */
  --content-max-width: 1200px;
  --gutter:            24px;
  --nav-height:        64px;
  --nav-width-desktop: 240px;

  /* ── Focus ──────────────────────────────────────────────── */
  --focus-ring: 2px solid var(--color-infinity-gold);
  --focus-offset: 2px;
}