/* ============================================================
   Design Tokens — Cinematic Viral Portfolio
   Obsidian Dark + Fiery Crimson / Electric Cyan Cyber Theme
   Matching Video Demo Architecture
   ============================================================ */

:root {
  color-scheme: dark;

  /* ── Backgrounds ── */
  --bg-0: #07080A; /* Pure obsidian base */
  --bg-1: #0D0F14; /* Deep carbon alternate */
  --bg-2: #131720; /* Panels and command cards */
  --bg-3: #1B212D; /* Raised hover cards */
  --bg-card: rgba(19, 23, 32, 0.75);

  /* ── Borders & Structural Lines ── */
  --line: #222938;
  --line-glow: rgba(255, 46, 68, 0.3);
  --line-light: rgba(34, 41, 56, 0.6);

  /* ── Typography Colors ── */
  --text-1: #FFFFFF; /* High-contrast white */
  --text-2: #A6B0C3; /* Secondary technical slate */
  --text-3: #647087; /* Muted metadata */

  /* ── Accents & Glow (Viral Demo Crimson Red + Electric Cyan) ── */
  --accent: #FF2E44;       /* Fiery crimson / red highlight */
  --accent-hi: #FF5A6C;    /* Bright coral red */
  --accent-glow: rgba(255, 46, 68, 0.35);
  --accent-dim: rgba(255, 46, 68, 0.12);
  --on-accent: #FFFFFF;

  --cyan: #00E5FF;         /* Secondary electric cyan */
  --cyan-glow: rgba(0, 229, 255, 0.3);
  --cyan-dim: rgba(0, 229, 255, 0.12);

  /* ── Functional States ── */
  --success: #10B981;
  --warning: #F59E0B;
  --focus: #FF2E44;

  /* ── 12 Vibrant Cursor Colors (NO text tags, pure pointers) ── */
  --cursor-1: #FF2E44;  /* Crimson */
  --cursor-2: #00E5FF;  /* Cyan */
  --cursor-3: #FFB800;  /* Gold */
  --cursor-4: #A855F7;  /* Purple */
  --cursor-5: #22C55E;  /* Emerald */
  --cursor-6: #EC4899;  /* Pink */
  --cursor-7: #3B82F6;  /* Blue */
  --cursor-8: #F97316;  /* Orange */
  --cursor-9: #14B8A6;  /* Teal */
  --cursor-10: #EAB308; /* Yellow */
  --cursor-11: #8B5CF6; /* Violet */
  --cursor-12: #06B6D4; /* Sky */

  /* ── Fonts ── */
  --font-display: 'Bebas Neue', 'Space Grotesk', system-ui, sans-serif;
  --font-subhead: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ── Typography Scale ── */
  --text-hero-bg: clamp(4.5rem, 16vw, 14rem);
  --text-display-xl: clamp(2.75rem, 6vw + 1rem, 6.5rem);
  --text-h1: clamp(2.25rem, 4.5vw, 4.25rem);
  --text-h2: clamp(1.75rem, 3vw, 3rem);
  --text-h3: clamp(1.25rem, 1.8vw, 1.75rem);
  --text-body: clamp(0.9375rem, 0.4vw + 0.85rem, 1.0625rem);
  --text-small: 0.875rem;
  --text-label: 0.75rem;

  /* ── Spacing ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* ── Layout ── */
  --container-max: 1280px;
  --gutter: 1.5rem;
  --nav-height: 4.25rem;

  /* ── Radii ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
}

@media (max-width: 1023px) {
  :root {
    --gutter: 1.25rem;
  }
}

@media (max-width: 599px) {
  :root {
    --gutter: 1rem;
    --nav-height: 3.5rem;
  }
}