/* ================================================
   DESIGN TOKENS
================================================ */

    :root {
      /* --- Primary Palette --- */
      --color-black:        #000000;
      --color-blue-primary: #0f70b7;
      --color-gray-mid:     #878786;
      --color-blue-light:   #89a4d6;
      --color-gray-light:   #c6c6c6;
      --color-blue-pale:    #dae0f3;

      /* --- Semantic Roles --- */
      --primary:     var(--color-blue-primary);
      --secondary:   var(--color-blue-light);
      --accent:      #1a8fe0;
      --neutral:     var(--color-gray-mid);
      --surface:     #0a0e1a;
      --surface-2:   #0d1322;
      --surface-3:   #121929;
      --border:      rgba(15, 112, 183, 0.25);
      --border-soft: rgba(255, 255, 255, 0.06);
      --text-primary:   #ffffff;
      --text-secondary: var(--color-gray-light);
      --text-muted:     var(--color-gray-mid);
      --text-accent:    var(--color-blue-primary);

      /* --- Opacity Variants --- */
      --primary-10:  rgba(15, 112, 183, 0.10);
      --primary-20:  rgba(15, 112, 183, 0.20);
      --primary-40:  rgba(15, 112, 183, 0.40);
      --primary-60:  rgba(15, 112, 183, 0.60);

      /* --- Gradients --- */
      --gradient-hero:    linear-gradient(135deg, #000000 0%, #051226 50%, #0a1f3d 100%);
      --gradient-primary: linear-gradient(135deg, #0f70b7 0%, #1a8fe0 50%, #89a4d6 100%);
      --gradient-glow:    radial-gradient(ellipse at center, rgba(15,112,183,0.35) 0%, transparent 70%);
      --gradient-card:    linear-gradient(160deg, rgba(13,19,34,0.95) 0%, rgba(10,14,26,0.98) 100%);
      --gradient-glass:   linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);

      /* --- Typography Scale --- */
      --font-primary:   'Poppins', system-ui, -apple-system, sans-serif;
      --font-mono:      'JetBrains Mono', 'Courier New', monospace;

      /* --- Type Scale --- */
      --text-h1:     clamp(3rem, 6vw, 5.5rem);
      --text-h2:     clamp(2.25rem, 4.5vw, 3.75rem);
      --text-h3:     clamp(1.75rem, 3vw, 2.5rem);
      --text-h4:     clamp(1.375rem, 2.2vw, 1.875rem);
      --text-h5:     clamp(1.125rem, 1.6vw, 1.375rem);
      --text-h6:     clamp(1rem, 1.2vw, 1.125rem);
      --text-body-lg: 1.125rem;
      --text-body:    1rem;
      --text-body-sm: 0.875rem;
      --text-caption: 0.8125rem;
      --text-label:   0.75rem;

      /* --- Spacing --- */
      --space-xs:  0.25rem;
      --space-sm:  0.5rem;
      --space-md:  1rem;
      --space-lg:  1.5rem;
      --space-xl:  2.5rem;
      --space-2xl: 4rem;
      --space-3xl: 6rem;

      /* --- Border Radius --- */
      --radius-sm:   6px;
      --radius-md:   12px;
      --radius-lg:   20px;
      --radius-xl:   28px;
      --radius-2xl:  40px;
      --radius-full: 9999px;

      /* --- Shadows --- */
      --shadow-sm:      0 4px 16px rgba(0, 0, 0, 0.4);
      --shadow-md:      0 8px 32px rgba(0, 0, 0, 0.5);
      --shadow-lg:      0 16px 64px rgba(0, 0, 0, 0.6);
      --shadow-glow-sm: 0 0 20px rgba(15, 112, 183, 0.4);
      --shadow-glow-md: 0 0 40px rgba(15, 112, 183, 0.5);
      --shadow-glow-lg: 0 0 80px rgba(15, 112, 183, 0.3);

      /* --- Transitions --- */
      --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
      --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
      --duration-fast: 200ms;
      --duration-base: 350ms;
      --duration-slow: 600ms;
      --duration-reveal: 600ms;
    }