/* ════════════════════════════════════════════════
   PEAK AUTOMATIONS — DESIGN TOKENS
   All CSS custom properties. Include on every page.
   ════════════════════════════════════════════════ */
:root {
  /* ── Colour primitives ───────────────────────── */
  --bg:        #070D1A;
  --surface:   #0C1525;
  --surface-2: #111E30;
  --surface-3: #162236;
  --teal:      #1DCBAF;
  --teal-dk:   #17A893;
  --gold:      #F0A830;
  --gold-dk:   #CC8A1A;
  --white:     #FFFFFF;
  --text:      #E6EBF4;
  --muted:     #6B7F97;
  --danger:    #ff6363;
  --border:    rgba(255,255,255,0.06);
  --border-lg: rgba(255,255,255,0.10);

  /* ── Typography ──────────────────────────────── */
  --font-heading: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Sizing ──────────────────────────────────── */
  --radius:      14px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-pill: 100px;

  /* ── Shadows ─────────────────────────────────── */
  --shadow-md:      0 4px 24px rgba(0,0,0,0.4);
  --shadow-lg:      0 12px 48px rgba(0,0,0,0.5);
  --shadow-xl:      0 32px 80px rgba(0,0,0,0.6);
  --shadow-teal:    0 8px 30px rgba(29,203,175,0.3);
  --shadow-teal-lg: 0 12px 36px rgba(29,203,175,0.4);
  --shadow-gold:    0 8px 30px rgba(240,168,48,0.25);

  /* ── Transitions ─────────────────────────────── */
  --t-fast: 0.15s ease;
  --t-base: 0.2s ease;
  --t-slow: 0.3s ease;
}