/* ================================
   Design Tokens — Color System
   ================================ */
:root {
  /* Colors — Palette */
  --color-bg: #0d1a21;
  --color-bg-soft: #13232c;
  --color-surface: #182f3a;

  --color-text-primary: #e8f1f5;
  --color-text-secondary: #b3c4cc;
  --color-text-muted: #7f98a3;

  --color-accent: #5ddcff;
  --color-accent-alt: #6ee7ff;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-light: rgba(255, 255, 255, 0.12);
  --color-border-lighter: rgba(255, 255, 255, 0.18);

  /* ================================
     Typography
     ================================ */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* Font sizes (fluid, modern) */
  --fs-900: clamp(2.6rem, 4vw, 3.4rem);
  --fs-800: clamp(2.1rem, 3vw, 2.6rem);
  --fs-700: 1.5rem;
  --fs-600: 1.2rem;
  --fs-500: 1rem;
  --fs-400: 0.9rem;
  --fs-300: 0.8rem;

  /* ================================
     Spacing Scale
     ================================ */
  --space-xxl: 6rem;
  --space-xl: 4rem;
  --space-lg: 2.5rem;
  --space-md: 1.5rem;
  --space-sm: 1rem;
  --space-xs: 0.5rem;

  /* ================================
     Border Radius
     ================================ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* ================================
     Layout
     ================================ */
  --max-width: 1200px;
  --max-width-lg: 1240px;
  --max-width-md: 1100px;

  /* ================================
     Motion / Timing
     ================================ */
  --motion-fast: 180ms;
  --motion-medium: 320ms;
  --motion-slow: 520ms;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ================================
     Z-Index Scale
     ================================ */
  --z-base: 1;
  --z-nav: 100;
  --z-modal: 1000;

  /* ================================
     Breakpoints (Mobile First)
     ================================ */
  --bp-mobile: 768px;
  --bp-tablet: 1024px;
  --bp-desktop: 1440px;

  /* ================================
   Canonical Spacing Contracts
=============================== */

--section-padding-y: var(--space-xxl);
--section-padding-y-mobile: var(--space-xl);

--content-gap: var(--space-md);
--content-gap-lg: var(--space-lg);

--lh-tight: 1.2;
--lh-normal: 1.5;
--lh-relaxed: 1.7;


}