/* ═══════════════════════════════════════════
   VARIABLES — CSS Custom Properties
   Design tokens for the entire site
   ═══════════════════════════════════════════ */

:root {
  /* ─── SURFACE ZONE (Hero, Nav, Contact) ─── */
  /* MoMoney-inspired: Dark by default, vibrant accents */
  --surface-bg:          #150C2C;
  --surface-text:        #F5F5F7;
  --surface-accent:      #00E5FF;
  --surface-accent-alt:  #40F0FF;

  /* ─── SHALLOW ZONE (Services, Footer) ─── */
  --shallow-bg:          #150C2C;
  --shallow-text:        #EAEAF0;
  --shallow-accent:      #00D4AA;
  --shallow-accent-alt:  #33FFD0;

  /* ─── DEEP ZONE (Work, Numbers, Tech) ─── */
  --deep-bg:             #150C2C;
  --deep-text:           #F0F0F5;
  --deep-accent:         #A855F7;
  --deep-accent-alt:     #C084FC;
  --deep-glow:           #D8B4FE;

  /* ─── BIOLUMINESCENT ZONE (Team, Testimonials) ─── */
  --bio-bg:              #150C2C;
  --bio-text:            #FAFAFE;
  --bio-accent:          #FF6B35;
  --bio-accent-alt:      #FF8C5A;
  --bio-glow:            #FFD166;

  /* ─── UNIVERSAL ACCENT COLORS ─── */
  --pearl:               #FFF8E7;
  --pearl-pink:          #FFD6E0;
  --coral:               #FF3366;
  --seaweed:             #00E68A;
  --sand:                #FFB347;

  /* ─── NEON GLOW COLORS (MoMoney energy) ─── */
  --neon-cyan:           #00E5FF;
  --neon-green:          #00FF88;
  --neon-violet:         #B366FF;
  --neon-orange:         #FF6B35;
  --neon-pink:           #FF3399;

  /* ─── GRADIENTS ─── */
  --gradient-ocean:      linear-gradient(180deg, #00E5FF 0%, #00D4AA 25%, #A855F7 60%, #050510 100%);
  --gradient-pearl:      linear-gradient(135deg, #FFF8E7 0%, #FFD6E0 50%, #E0E7FF 100%);
  --gradient-glow:       radial-gradient(circle, rgba(168,85,247,0.4) 0%, transparent 70%);
  --gradient-surface:    linear-gradient(180deg, #0A0A0F 0%, #0D0D14 100%);
  --gradient-card:       linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  --gradient-hero:       radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0,229,255,0.12) 0%, rgba(168,85,247,0.06) 40%, transparent 70%);

  /* ─── FONT FAMILIES ─── */
  --font-heading:    'Syne', 'Helvetica Neue', sans-serif;
  --font-body:       'Syne', 'Helvetica Neue', sans-serif;
  --font-serif:      'Playfair Display', Georgia, serif;
  --font-mono:       'JetBrains Mono', 'Fira Code', monospace;

  /* ─── FONT SIZES (fluid, clamp-based) ─── */
  --text-xs:         clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
  --text-sm:         clamp(0.8rem, 0.75rem + 0.3vw, 0.95rem);
  --text-base:       clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  --text-lg:         clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --text-xl:         clamp(1.35rem, 1.2rem + 0.75vw, 1.75rem);
  --text-2xl:        clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
  --text-3xl:        clamp(2.25rem, 1.8rem + 2.25vw, 3.75rem);
  --text-4xl:        clamp(3rem, 2.2rem + 4vw, 6rem);
  --text-hero:       clamp(3.5rem, 2.5rem + 5vw, 9rem);

  /* ─── LINE HEIGHTS ─── */
  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;

  /* ─── LETTER SPACING ─── */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;
  --tracking-widest: 0.2em;

  /* ─── FONT WEIGHTS (Syne: 400–800) ─── */
  --weight-light:    400;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    700;

  /* ─── SPACING SCALE ─── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --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;
  --space-40:  10rem;
  --space-section: clamp(6rem, 5rem + 5vw, 12rem);

  /* ─── LAYOUT ─── */
  --container-max:   1440px;
  --container-wide:  1200px;
  --container-text:  720px;
  --gutter:          clamp(1rem, 0.5rem + 2.5vw, 3rem);
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 24px;
  --border-radius-xl: 32px;
  --border-radius-pill: 999px;

  /* ─── SHADOWS & GLOWS (Neon-strength for MoMoney energy) ─── */
  --shadow-sm:       0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:       0 4px 16px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.2);
  --shadow-lg:       0 12px 32px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3);
  --shadow-glow-cyan:    0 0 40px rgba(0,229,255,0.5), 0 0 80px rgba(0,229,255,0.2);
  --shadow-glow-violet:  0 0 40px rgba(168,85,247,0.5), 0 0 80px rgba(168,85,247,0.2);
  --shadow-glow-orange:  0 0 40px rgba(255,107,53,0.5), 0 0 80px rgba(255,107,53,0.2);
  --shadow-glow-pearl:   0 0 50px rgba(255,248,231,0.4), 0 0 100px rgba(255,248,231,0.15);
  --shadow-glow-green:   0 0 40px rgba(0,230,138,0.5), 0 0 80px rgba(0,230,138,0.2);
  --shadow-glow-pink:    0 0 40px rgba(255,51,153,0.5), 0 0 80px rgba(255,51,153,0.2);

  /* ─── 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-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Z-INDEX LAYERS ─── */
  --z-particles:  1;
  --z-content:    10;
  --z-nav:        100;
  --z-mobile-menu: 90;
  --z-cursor:     1000;
  --z-preloader:  9999;
}