/* ═══════════════════════════════════════════
   DESIGN TOKENS (ITCSS: Settings Layer)
   CSS Custom Properties — Single source of truth
   ═══════════════════════════════════════════ */
:root {
  /* ── Color Palette ── */
  --navy-deep: #0b1120;
  --navy: #121d33;
  --navy-light: #1a2b4a;
  --blue-accent: #0ea5e9;
  --blue-glow: #38bdf8;
  --blue-subtle: #0c4a6e;
  --cyan: #22d3ee;
  --white: #f8fafc;
  --gray-100: #e2e8f0;
  --gray-300: #94a3b8;
  --gray-500: #64748b;
  --gray-700: #334155;

  /* ── Gradients ── */
  --gradient-brand: linear-gradient(135deg, #0ea5e9, #22d3ee);
  --gradient-dark: linear-gradient(180deg, #0b1120 0%, #121d33 100%);

  /* ── Typography ── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ── Spacing ── */
  --space-section-desktop: 7rem;
  --space-section-tablet: 5rem;
  --space-section-mobile: 3.5rem;
  --space-section-small: 2.5rem;
  --space-container-desktop: 2rem;
  --space-container-mobile: 1.25rem;
  --space-container-small: 1rem;

  /* ── Touch Targets ── */
  --touch-min: 44px;

  /* ── Typography Scale (fluid) ── */
  --fs-section-title: clamp(1.75rem, 4vw, 3rem);
  --fs-section-subtitle: clamp(0.95rem, 2vw, 1.125rem);
  --fs-section-label: clamp(0.7rem, 1.5vw, 0.75rem);
  --fs-body-small: clamp(0.78rem, 1.5vw, 0.85rem);
  --fs-code: clamp(0.75rem, 1.5vw, 0.85rem);

  /* ── Transitions ── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.4s ease;
}