/* ═══════════════════════════════════════════════
   UMBLE LEARN — Design Tokens
   Source: umble_branding_kit_v2.html
   ═══════════════════════════════════════════════ */

:root {
  /* Surfaces */
  --ink: #080E13;
  --surface: #111820;
  --surface-2: #1A2433;
  --surface-3: #222D3C;
  --illus-bg: #2D3340;

  /* Brand */
  --signal-blue: #0052CC;
  --electric: #4DA3FF;
  --data-green: #00C896;
  --amber: #FFB020;
  --violet: #9B7FE8;

  /* Text */
  --fog: #F5F6F8;
  --fog-80: rgba(245,246,248,0.8);
  --fog-60: rgba(245,246,248,0.6);
  --fog-40: rgba(245,246,248,0.4);
  --fog-20: rgba(245,246,248,0.2);
  --fog-10: rgba(245,246,248,0.1);
  --fog-06: rgba(245,246,248,0.06);

  /* Category accent colors */
  --cat-a: #4DA3FF;
  --cat-b: #00C896;
  --cat-c: #FFB020;
  --cat-d: #9B7FE8;
  --cat-e: #4DA3FF;
  --cat-f: #00C896;
  --cat-g: #FFB020;
  --cat-h: #00C896;

  /* Typography */
  --font-sans: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Spacing */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 40px;
  --sp-2xl: 64px;
  --sp-3xl: 100px;

  /* Dynamic category color (set by JS) */
  --cat-accent: var(--signal-blue);
}