:root {
  /* Brand Colors */
  --color-sky: #6EC1E4;
  --color-sky-bright: #8fd4f0;
  --color-sky-dim: #4a9bc4;
  --color-green: #61CE70;
  --color-green-dim: #4aad58;
  --color-navy: #202959;
  --color-navy-deep: #161d42;
  --color-navy-light: #2a367a;

  /* Glow variants */
  --glow-sky: rgba(110, 193, 228, 0.35);
  --glow-green: rgba(97, 206, 112, 0.25);
  --glow-navy: rgba(32, 41, 89, 0.6);

  /* Neutral Palette */
  --color-white: #ffffff;
  --color-gray-50: #f0f2f5;
  --color-gray-100: #e4e7ec;
  --color-gray-200: #d0d5dd;
  --color-gray-300: #b8c0cc;
  --color-gray-400: #98a2b3;
  --color-gray-500: #667085;
  --color-gray-600: #475467;
  --color-gray-700: #344054;
  --color-gray-800: #1d2939;
  --color-gray-900: #101828;
  --color-black: #000000;

  /* Semantic Colors */
  --color-text: #e0e4eb;
  --color-text-muted: #98a2b3;
  --color-text-light: var(--color-white);
  --color-bg: #0d1117;
  --color-bg-raised: #151b27;
  --color-bg-surface: rgba(255, 255, 255, 0.04);
  --color-bg-alt: #111827;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(255, 255, 255, 0.15);
  --color-link: var(--color-sky);
  --color-link-hover: var(--color-sky-bright);
  --color-accent: var(--color-green);

  /* Typography */
  --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Roboto Slab', Georgia, 'Times New Roman', serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;

  /* Fluid Type Scale */
  --text-xs: clamp(0.7rem, 0.1vw + 0.68rem, 0.78rem);
  --text-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
  --text-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
  --text-lg: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
  --text-xl: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
  --text-2xl: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);
  --text-3xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
  --text-4xl: clamp(3rem, 3.5vw + 2rem, 5rem);

  /* Spacing Scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --container-max: 1400px;
  --content-max: 860px;
  --container-padding: clamp(1.25rem, 4vw, 2.5rem);

  /* Borders & Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows - deep, layered, atmospheric */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.4);
  --shadow-glow-sky: 0 0 30px rgba(110, 193, 228, 0.15), 0 0 60px rgba(110, 193, 228, 0.05);
  --shadow-glow-green: 0 0 30px rgba(97, 206, 112, 0.12), 0 0 60px rgba(97, 206, 112, 0.04);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Header */
  --header-height: 72px;
}