/* ================================================================
   Ai6iX Design Tokens
   Brand: Dark cyberpunk AI consultancy — cyan/purple/magenta palette
   ================================================================ */

:root {
  /* ─── Background Colors ─── */
  --bg-deepest:    #020510;
  --bg-dark:       #050810;
  --bg-mid:        #080d1a;
  --bg-card:       #0c1220;
  --bg-card-hover: #101828;
  --bg-glass:      rgba(8, 13, 26, 0.65);
  --bg-glass-light:rgba(13, 20, 40, 0.45);

  /* ─── Accent Colors ─── */
  --cyan:          #00e5ff;
  --cyan-dim:      #00b8d4;
  --cyan-dark:     rgba(0, 229, 255, 0.08);
  --purple:        #8b5cf6;
  --purple-dim:    #6d28d9;
  --purple-dark:   rgba(139, 92, 246, 0.08);
  --magenta:       #d946ef;
  --magenta-dim:   #a21caf;
  --gold:          #f59e0b;

  /* ─── Gradients ─── */
  --grad-primary:    linear-gradient(135deg, #8b5cf6 0%, #00e5ff 100%);
  --grad-hero:       linear-gradient(180deg, #020510 0%, #050d28 60%, #020510 100%);
  --grad-card:       linear-gradient(135deg, rgba(139,92,246,0.08) 0%, rgba(0,229,255,0.04) 100%);
  --grad-cta:        linear-gradient(135deg, #7c3aed 0%, #0891b2 100%);
  --grad-text:       linear-gradient(135deg, #8b5cf6, #00e5ff);
  --grad-magenta:    linear-gradient(135deg, #d946ef, #8b5cf6);
  --grad-glow-cyan:  radial-gradient(ellipse at center, rgba(0,229,255,0.15) 0%, transparent 70%);
  --grad-glow-purple:radial-gradient(ellipse at center, rgba(139,92,246,0.15) 0%, transparent 70%);

  /* ─── Typography Colors ─── */
  --text-primary:   #ffffff;
  --text-secondary: #94a3b8;
  --text-muted:     #475569;
  --text-cyan:      #00e5ff;
  --text-purple:    #c4b5fd;

  /* ─── Borders ─── */
  --border-subtle:  1px solid rgba(255,255,255,0.06);
  --border-cyan:    1px solid rgba(0,229,255,0.2);
  --border-purple:  1px solid rgba(139,92,246,0.25);
  --border-glow:    1px solid rgba(0,229,255,0.35);

  /* ─── Shadows ─── */
  --shadow-card:    0 4px 24px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
  --shadow-glow-cyan:   0 0 20px rgba(0,229,255,0.25), 0 0 60px rgba(0,229,255,0.08);
  --shadow-glow-cyan-thin: 0 0 12px rgba(0,229,255,0.15);
  --shadow-glow-purple: 0 0 20px rgba(139,92,246,0.3), 0 0 60px rgba(139,92,246,0.1);
  --shadow-glow-btn:    0 0 30px rgba(0,229,255,0.4);
  --shadow-hero-img:    0 0 80px rgba(0, 229, 255, 0.3), 0 0 160px rgba(139,92,246,0.15);

  /* ─── Spacing ─── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;

  /* ─── Layout ─── */
  --max-width:      1280px;
  --nav-height:     80px;
  --section-pad-y:  100px;
  --card-radius:    16px;
  --btn-radius:     50px;

  /* ─── Typography ─── */
  --font-display:   'Outfit', 'Inter', sans-serif;
  --font-body:      'Inter', sans-serif;

  --size-xs:   12px;
  --size-sm:   14px;
  --size-base: 16px;
  --size-md:   18px;
  --size-lg:   22px;
  --size-xl:   28px;
  --size-2xl:  36px;
  --size-3xl:  48px;
  --size-4xl:  64px;
  --size-5xl:  80px;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  --leading-tight:  1.15;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* ─── Transitions ─── */
  --ease-fast:   0.15s ease;
  --ease-normal: 0.25s ease;
  --ease-slow:   0.4s ease;
  --ease-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Z-indices ─── */
  --z-base:    1;
  --z-card:    10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
}