/* ================================================
   DATA FOR SPEED MULTICLOUD — Design Tokens
   ================================================ */

:root {
  /* ——— Backgrounds ——— */
  --bg-void:       #000000;
  --bg-deep:       #0A0A0A;
  --bg-card:       #0d0d0d;
  --bg-card-hover: #111111;
  --bg-surface:    #171717;

  /* ——— Brand ——— */
  --brand-blue:    #2B6BFF;
  --brand-cyan:    #00D4FF;
  --brand-neon:    #C6FF00;
  --brand-pink:    #FF2D78;
  --brand-orange:  #FF8C00;

  /* ——— Text ——— */
  --text-primary:  #FFFFFF;
  --text-secondary:#E5E5E5;
  --text-muted:    #A3A3A3;
  --text-subtle:   #737373;
  --text-dim:      #525252;
  --text-ghost:    #404040;

  /* ——— UI / Glow ——— */
  --border-glow:   rgba(43, 107, 255, 0.4);
  --border-subtle: rgba(255, 255, 255, 0.1);
  --border-accent: rgba(43, 107, 255, 0.2);
  --glow-blue:     0 0 30px rgba(43, 107, 255, 0.6);
  --glow-blue-sm:  0 0 15px rgba(43, 107, 255, 0.4);
  --glow-neon:     0 0 20px rgba(198, 255, 0, 0.5);
  --glow-pink:     0 0 20px rgba(255, 45, 120, 0.5);
  --glow-cyan:     0 0 20px rgba(0, 212, 255, 0.5);

  /* ——— Gradients ——— */
  --grad-hero:     linear-gradient(180deg, transparent 0%, #0A0A0A 100%);
  --grad-card:     linear-gradient(135deg, #0d0d0d 0%, #111111 100%);
  --grad-accent:   linear-gradient(90deg, #2B6BFF, #00D4FF);
  --grad-neon:     linear-gradient(90deg, #C6FF00, #2B6BFF);
  --grad-cta:      linear-gradient(135deg, #2B6BFF 0%, #00D4FF 100%);
  --grad-pink:     linear-gradient(90deg, #FF2D78, #2B6BFF);

  /* ——— Typography ——— */
  --font-primary: 'Inter', -apple-system, sans-serif;
  --font-display: 'Barlow Condensed', sans-serif;
  --font-mono:    'Space Mono', monospace;

  /* ——— Type Scale (fluid) ——— */
  --text-hero:     clamp(4rem, 12vw, 10rem);
  --text-h1:       clamp(2.5rem, 6vw, 5rem);
  --text-h2:       clamp(1.8rem, 4vw, 3rem);
  --text-h3:       clamp(1.4rem, 3vw, 2rem);
  --text-body:     clamp(0.875rem, 1.5vw, 1.05rem);
  --text-mono:     clamp(0.75rem, 1.2vw, 0.875rem);
  --text-sm:       clamp(0.7rem, 1vw, 0.8rem);
  --text-xs:       12px;
  --text-micro:    10px;

  /* ——— Spacing ——— */
  --section-pad:   clamp(4rem, 10vw, 8rem);
  --section-padding-v: 80px;
  --section-padding-h: 60px;
  --container-max: 1340px;
  --gap-lg:        3rem;
  --gap-md:        2rem;
  --gap-sm:        1rem;

  /* ——— Radius ——— */
  --radius-sm:     0.5rem;
  --radius-md:     1rem;
  --radius-lg:     1.5rem;
  --radius-xl:     2rem;
  --radius-full:   9999px;

  /* ——— Transitions ——— */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.77, 0, 0.18, 1);
  --duration-fast: 0.2s;
  --duration-med:  0.4s;
  --duration-slow: 0.8s;
}