/* ==========================================================================
   NM INNOVATION HUB — Design Tokens
   ========================================================================== */

:root {
  /* ── Navy Palette ─────────────────────────────────────────────────────── */
  --color-navy-900: #050a14;
  --color-navy-800: #080e1a;
  --color-navy-700: #0c1629;
  --color-navy-600: #0f1a2e;
  --color-navy-500: #111d35;
  --color-navy-400: #1a2a44;

  /* ── Cyan Palette ─────────────────────────────────────────────────────── */
  --color-cyan-500: #00a8ff;
  --color-cyan-400: #33bbff;
  --color-cyan-300: #66ccff;
  --color-cyan-glow: rgba(0, 168, 255, 0.25);
  --color-cyan-dim: rgba(0, 168, 255, 0.08);

  /* ── Accent Colors ────────────────────────────────────────────────────── */
  --color-neon-pink: #ff0066;
  --color-neon-purple: #9d00ff;

  /* ── Success / WhatsApp ───────────────────────────────────────────────── */
  --color-success: #25d366;
  --color-success-glow: rgba(37, 211, 102, 0.3);

  /* ── Text Colors ──────────────────────────────────────────────────────── */
  --color-text-primary: #f0f4f8;
  --color-text-secondary: #c0cdd8;
  --color-text-muted: #8899aa;
  --color-text-dim: #556677;

  /* ── Typography: Fonts ────────────────────────────────────────────────── */
  --font-display: 'Chakra Petch', 'Orbitron', sans-serif;
  --font-body: 'Outfit', 'Exo 2', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Space Mono', monospace;

  /* ── Typography: Sizes ────────────────────────────────────────────────── */
  --fs-hero: clamp(2.2rem, 6vw, 4.5rem);
  --fs-h1: clamp(2rem, 4.5vw, 3.2rem);
  --fs-h2: clamp(1.6rem, 3.5vw, 2.4rem);
  --fs-h3: clamp(1.1rem, 2vw, 1.4rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;

  /* ── Typography: Line Heights ─────────────────────────────────────────── */
  --lh-tight: 1.1;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;

  /* ── Spacing ──────────────────────────────────────────────────────────── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --space-5xl: 80px;
  --space-section: 80px;

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --container-max: 1200px;
  --container-padding: 24px;
  --navbar-height: 64px;

  /* ── Border Radius ────────────────────────────────────────────────────── */
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 20px;
  --border-radius-full: 50px;

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 16px 48px rgba(0, 0, 0, 0.4);
  --shadow-neon: 0 0 30px var(--color-cyan-glow);
  --shadow-neon-intense: 0 0 60px var(--color-cyan-glow), 0 0 120px rgba(0, 168, 255, 0.1);

  /* ── Transitions ──────────────────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-smooth: 500ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── New Glassmorphism & Gradients ────────────────────────────────────── */
  --gradient-cyan: linear-gradient(135deg, var(--color-cyan-300) 0%, var(--color-cyan-500) 100%);
  --gradient-cyan-dark: linear-gradient(135deg, var(--color-cyan-500) 0%, var(--color-navy-500) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(0, 168, 255, 0.08) 0%, rgba(5, 10, 20, 0.4) 100%);
  --gradient-glass-border: linear-gradient(135deg, rgba(0, 168, 255, 0.4) 0%, rgba(0, 168, 255, 0) 100%);
  --bg-glass: rgba(15, 26, 46, 0.6);
  --bg-glass-hover: rgba(15, 26, 46, 0.8);
  
  --shadow-neon: 0 0 30px var(--color-cyan-glow);
  --shadow-neon-intense: 0 0 60px var(--color-cyan-glow), 0 0 120px rgba(0, 168, 255, 0.15);
  --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.5);

  /* ── Z-Index Scale ────────────────────────────────────────────────────── */
  --z-base: 1;
  --z-background: -1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-navbar: 500;
  --z-overlay: 800;
  --z-modal: 900;
  --z-float: 950;
  --z-toast: 1000;
}