/* ==========================================================================
   NEXO MARKETING — DESIGN SYSTEM & TOKENS
   Core Color Palette: Black + Neon Green + Lime Green
   ========================================================================== */

:root {
  /* --------------------------------------------------
     1. Brand Colors (Strictly Black + Neon Green + Lime)
     -------------------------------------------------- */
  --color-deep-black: #020502;
  --color-black: #030603;
  --color-dark-green: #061006;
  --color-card-green: #0B180B;
  --color-card-green-hover: #0f220f;
  --color-border-green: #1B3A1B;
  --color-border-green-hover: rgba(102, 255, 0, 0.45);
  --color-border-green-active: rgba(102, 255, 0, 0.8);
  
  --color-electric-green: #39FF14;
  --color-neon-green: #66FF00;
  --color-lime-green: #7CFF00;
  --color-bright-lime: #B6FF4A;
  --color-white: #F5FFF5;
  --color-muted-green: #91A491;
  --color-subtle-green: rgba(145, 164, 145, 0.6);

  /* Transparent Variants for Glassmorphism & Layers */
  --bg-body: var(--color-deep-black);
  --bg-surface: var(--color-black);
  --bg-card: rgba(11, 24, 11, 0.75);
  --bg-card-solid: var(--color-card-green);
  --bg-card-elevated: rgba(15, 34, 15, 0.85);
  --bg-glass-nav: rgba(3, 6, 3, 0.78);
  --bg-glass-modal: rgba(2, 5, 2, 0.92);
  --bg-input: rgba(6, 16, 6, 0.9);

  /* --------------------------------------------------
     2. Neon Glows & Shadows (Controlled & Sophisticated)
     -------------------------------------------------- */
  --glow-soft: 0 0 20px rgba(102, 255, 0, 0.15);
  --glow-medium: 0 0 35px rgba(102, 255, 0, 0.28);
  --glow-intense: 0 0 50px rgba(102, 255, 0, 0.55), 0 0 100px rgba(57, 255, 20, 0.2);
  --glow-text: 0 0 12px rgba(102, 255, 0, 0.4);
  --glow-border: 0 0 15px rgba(102, 255, 0, 0.25);
  --shadow-card: 0 20px 40px -15px rgba(0, 0, 0, 0.8), 0 0 1px 1px var(--color-border-green);
  --shadow-card-hover: 0 25px 50px -12px rgba(0, 0, 0, 0.95), 0 0 25px rgba(102, 255, 0, 0.2), 0 0 1px 1px var(--color-neon-green);

  /* --------------------------------------------------
     3. Typography System (Space Grotesk + DM Sans)
     -------------------------------------------------- */
  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Responsive Clamp Sizes */
  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.85rem);
  --text-sm: clamp(0.85rem, 0.8rem + 0.25vw, 0.95rem);
  --text-base: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
  --text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.7vw, 1.55rem);
  --text-2xl: clamp(1.5rem, 1.35rem + 1vw, 2rem);
  --text-3xl: clamp(1.85rem, 1.6rem + 1.4vw, 2.6rem);
  --text-4xl: clamp(2.25rem, 1.9rem + 2vw, 3.5rem);
  --text-hero: clamp(2.8rem, 2.2rem + 3.2vw, 5.2rem);

  /* --------------------------------------------------
     4. Layout & Spacing
     -------------------------------------------------- */
  --container-max: 1320px;
  --container-padding: clamp(1.25rem, 4vw, 3.5rem);
  --section-spacing-y: clamp(4.5rem, 8vw, 8.5rem);

  /* Border Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-Index Hierarchy */
  --z-canvas: 1;
  --z-base: 10;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-cursor: 500;
}