/* ═══════════════════════════════════════════════════════════════════
   A&S AI SOLUTIONS — DESIGN TOKENS
   Premium multi-color palette with section-specific identities
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Core Background Palette ── */
  --color-bg-deep:        #030014;
  --color-bg-primary:     #0a0f1e;
  --color-bg-secondary:   #0f172a;
  --color-bg-tertiary:    #1e293b;
  --color-bg-light:       #f8fafc;
  --color-bg-light-warm:  #faf5f0;
  --color-bg-cream:       #f1f5f9;
  --color-bg-white:       #ffffff;

  /* ── Accent Colors (Each section gets its own) ── */
  --color-cyan:           #00d4ff;
  --color-cyan-glow:      rgba(0, 212, 255, 0.15);
  --color-purple:         #8b5cf6;
  --color-purple-glow:    rgba(139, 92, 246, 0.15);
  --color-violet:         #7c3aed;
  --color-magenta:        #ec4899;
  --color-coral:          #ff6b35;
  --color-coral-glow:     rgba(255, 107, 53, 0.15);
  --color-emerald:        #10b981;
  --color-emerald-glow:   rgba(16, 185, 129, 0.15);
  --color-gold:           #f59e0b;
  --color-sky:            #0ea5e9;
  --color-rose:           #f43f5e;
  --color-indigo:         #6366f1;

  /* ── Text Colors ── */
  --color-text-white:     #ffffff;
  --color-text-light:     #e2e8f0;
  --color-text-muted:     #94a3b8;
  --color-text-dim:       #64748b;
  --color-text-dark:      #1e293b;
  --color-text-dark-muted:#475569;

  /* ── Premium Gradients ── */
  --gradient-hero:        linear-gradient(135deg, #00d4ff 0%, #8b5cf6 50%, #ec4899 100%);
  --gradient-hero-text:   linear-gradient(90deg, #00d4ff, #8b5cf6, #ec4899);
  --gradient-cta:         linear-gradient(135deg, #7c3aed 0%, #ec4899 50%, #f97316 100%);
  --gradient-stats:       linear-gradient(135deg, #7c3aed 0%, #ec4899 40%, #f97316 100%);
  --gradient-cyan:        linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%);
  --gradient-purple:      linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  --gradient-coral:       linear-gradient(135deg, #ff6b35 0%, #f43f5e 100%);
  --gradient-emerald:     linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  --gradient-gold:        linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  --gradient-surface:     linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);

  /* ── Typography ── */
  --font-heading:         'Space Grotesk', sans-serif;
  --font-body:            'Inter', sans-serif;

  --fs-display:           clamp(3.5rem, 10vw, 8rem);
  --fs-h1:                clamp(2.5rem, 5vw, 4.5rem);
  --fs-h2:                clamp(2rem, 4vw, 3.5rem);
  --fs-h3:                clamp(1.5rem, 3vw, 2rem);
  --fs-h4:                clamp(1.2rem, 2vw, 1.5rem);
  --fs-body:              1rem;
  --fs-body-lg:           1.125rem;
  --fs-small:             0.875rem;
  --fs-xs:                0.75rem;

  --fw-light:             300;
  --fw-regular:           400;
  --fw-medium:            500;
  --fw-semibold:          600;
  --fw-bold:              700;
  --fw-extrabold:         800;
  --fw-black:             900;

  --lh-tight:             1.1;
  --lh-heading:           1.2;
  --lh-body:              1.6;
  --lh-relaxed:           1.8;

  --ls-tight:             -0.03em;
  --ls-normal:            0;
  --ls-wide:              0.05em;
  --ls-wider:             0.1em;
  --ls-widest:            0.2em;

  /* ── Spacing ── */
  --space-xs:             0.5rem;
  --space-sm:             1rem;
  --space-md:             1.5rem;
  --space-lg:             2rem;
  --space-xl:             3rem;
  --space-2xl:            4rem;
  --space-3xl:            6rem;
  --space-4xl:            8rem;
  --space-5xl:            12rem;
  --space-section:        clamp(4rem, 10vh, 8rem);

  /* ── Border Radius ── */
  --radius-sm:            0.5rem;
  --radius-md:            0.75rem;
  --radius-lg:            1rem;
  --radius-xl:            1.5rem;
  --radius-2xl:           2rem;
  --radius-3xl:           3rem;
  --radius-full:          9999px;
  --radius-section:       2.5rem;

  /* ── Shadows ── */
  --shadow-sm:            0 1px 3px rgba(0,0,0,0.12);
  --shadow-md:            0 4px 12px rgba(0,0,0,0.15);
  --shadow-lg:            0 12px 40px rgba(0,0,0,0.25);
  --shadow-xl:            0 20px 60px rgba(0,0,0,0.3);
  --shadow-glow-cyan:     0 0 30px rgba(0, 212, 255, 0.3), 0 0 60px rgba(0, 212, 255, 0.1);
  --shadow-glow-purple:   0 0 30px rgba(139, 92, 246, 0.3), 0 0 60px rgba(139, 92, 246, 0.1);
  --shadow-glow-coral:    0 0 30px rgba(255, 107, 53, 0.3), 0 0 60px rgba(255, 107, 53, 0.1);
  --shadow-glow-emerald:  0 0 30px rgba(16, 185, 129, 0.3), 0 0 60px rgba(16, 185, 129, 0.1);

  /* ── Glassmorphism ── */
  --glass-bg:             rgba(255, 255, 255, 0.03);
  --glass-bg-hover:       rgba(255, 255, 255, 0.06);
  --glass-border:         rgba(255, 255, 255, 0.08);
  --glass-border-hover:   rgba(255, 255, 255, 0.15);
  --glass-blur:           20px;

  /* ── Transitions ── */
  --ease-smooth:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce:          cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-expo:            cubic-bezier(0.19, 1, 0.22, 1);
  --duration-fast:        150ms;
  --duration-normal:      300ms;
  --duration-slow:        500ms;
  --duration-slower:      800ms;

  /* ── Container ── */
  --container-max:        1280px;
  --container-wide:       1440px;
  --container-narrow:     720px;
  --container-padding:    clamp(1.5rem, 5vw, 4rem);

  /* ── Cursor ── */
  --cursor-size:          20px;
  --cursor-size-hover:    60px;
}