/**
 * CASE CREATIVE — Design Tokens System
 * Electric Midnight & Azure Blue Architecture
 * Inspired by Synchronized Studio & Creative Agency OS
 */

:root {
  /* =========================================
     1. COLOR PALETTE (Cyber Midnight + Ice White + Electric Azure)
     60% Midnight Obsidian / 30% Ice Neutral / 10% High-Voltage Azure
     ========================================= */
  --bg-black: #050811;
  --bg-deep: #090e1c;
  --bg-surface: #0e1629;
  --bg-card: rgba(13, 22, 42, 0.78);
  --bg-card-hover: rgba(19, 32, 60, 0.95);
  --bg-glass: rgba(186, 220, 255, 0.045);
  --bg-glass-strong: rgba(186, 220, 255, 0.09);

  /* Primary Text: High-Contrast Pure Ice White & Slate Tones */
  --text-cream: #f4f8fc;
  --text-pure-white: #ffffff;
  --text-muted: #8fa3c7;
  --text-dim: #4f6385;
  --text-dark: #050811;

  /* 10% High-Energy Accent: Electric Azure / Neon Cyan Blue */
  --accent-blue: #00d2ff;
  --accent-blue-deep: #0066ff;
  --accent-blue-hover: #38bdf8;
  --accent-blue-dim: rgba(0, 210, 255, 0.14);
  --accent-blue-glow: rgba(0, 210, 255, 0.42);

  /* Full backwards-compatibility aliases */
  --accent-lime: var(--accent-blue);
  --accent-lime-hover: var(--accent-blue-hover);
  --accent-lime-dim: var(--accent-blue-dim);
  --accent-lime-glow: var(--accent-blue-glow);

  /* Secondary Accent: Electric Cobalt / Sapphire */
  --accent-orange: #0066ff;
  --accent-secondary: #38bdf8;

  /* Structural Borders */
  --border-subtle: rgba(186, 220, 255, 0.09);
  --border-medium: rgba(186, 220, 255, 0.18);
  --border-highlight: rgba(0, 210, 255, 0.5);

  /* =========================================
     2. 8-POINT SPACING SCALE
     ========================================= */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* =========================================
     3. FLUID TYPOGRAPHY SCALE
     ========================================= */
  --font-display: "Syne", "Cabinet Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Space Mono", monospace;

  --text-display-giant: clamp(1.2rem, 6.1vw, 5.8rem);
  --text-display-hero: clamp(2rem, 8vw, 7.5rem);
  --text-h1: clamp(2.25rem, 5.5vw, 4.5rem);
  --text-h2: clamp(1.75rem, 3.5vw, 3rem);
  --text-h3: clamp(1.25rem, 2.2vw, 2rem);
  --text-h4: clamp(1.1rem, 1.4vw, 1.4rem);
  --text-body-lg: 1.15rem;
  --text-body: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  --text-tag: 0.6875rem;

  /* =========================================
     4. RADII & ELEVATIONS
     ========================================= */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --radius-full: 9999px;

  --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-heavy: 0 20px 50px rgba(0, 0, 0, 0.85);
  --shadow-blue-glow: 0 0 35px -5px rgba(0, 210, 255, 0.42);
  --shadow-lime-glow: var(--shadow-blue-glow);

  /* =========================================
     5. MOTION SPRING CURVES
     ========================================= */
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.65s cubic-bezier(0.16, 1, 0.3, 1);

  /* =========================================
     6. Z-INDEX SCALE
     ========================================= */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-header: 50;
  --z-overlay: 100;
  --z-modal: 200;
  --z-preloader: 500;
  --z-cursor: 1000;

  /* =========================================
     7. SEMANTIC UI COLORS
     ========================================= */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: var(--accent-blue);
}