// ============================================================
// Design Tokens - CSS Custom Properties
// ============================================================

@layer theme {
  :root {
    // --------------------------------------------------------
    // Color System
    // --------------------------------------------------------

    // Primary Cyans (optimized: removed unused 100, 200, 800 shades)
    --cyber-cyan-300: #87eaf2;
    --cyber-cyan-400: #54d1db;
    --cyber-cyan-500: #00f0ff;
    --cyber-cyan-600: #00c4cc;
    --cyber-cyan-700: #0097a7;
    --cyber-cyan-900: #005d6a;

    // Hot Magentas (optimized: removed unused 100-400, 600, 800, 900 shades)
    --cyber-magenta-500: #ff2a6d;
    --cyber-magenta-700: #b31248;

    // Electric Yellows (optimized: removed unused 100-400, 600, 800, 900 shades)
    --cyber-yellow-500: #fcee0a;
    --cyber-yellow-700: #aca406;

    // Toxic Greens (optimized: removed unused 100-300, 600, 800 shades)
    --cyber-green-400: #43ff83;
    --cyber-green-500: #05ffa1;
    --cyber-green-700: #03a969;
    --cyber-green-900: #015331;

    // Void Blacks (optimized: removed unused 600 shade)
    --cyber-void-100: #2a2d3a;
    --cyber-void-200: #1f2230;
    --cyber-void-300: #181a25;
    --cyber-void-400: #12141d;
    --cyber-void-500: #0d0e14;
    --cyber-void-700: #07080c;
    --cyber-void-800: #040508;
    --cyber-void-900: #010204;

    // Chrome Grays (optimized: removed unused 700-900 shades)
    --cyber-chrome-100: #f0f1f5;
    --cyber-chrome-200: #d1d4de;
    --cyber-chrome-300: #b2b7c7;
    --cyber-chrome-400: #939ab0;
    --cyber-chrome-500: #747d99;
    --cyber-chrome-600: #5c647a;

    // --------------------------------------------------------
    // Semantic Colors
    // --------------------------------------------------------

    --color-bg-primary: var(--cyber-void-500);
    --color-bg-secondary: var(--cyber-void-400);
    --color-bg-tertiary: var(--cyber-void-300);
    --color-bg-elevated: var(--cyber-void-200);
    --color-text-primary: var(--cyber-chrome-100);
    --color-text-secondary: var(--cyber-chrome-300);
    --color-text-muted: var(--cyber-chrome-500);
    --color-border-default: var(--cyber-void-100);

    // --------------------------------------------------------
    // Glows
    // --------------------------------------------------------

    --glow-cyan:
      0 0 20px var(--cyber-cyan-500),
      0 0 40px color-mix(in srgb, var(--cyber-cyan-500) 50%, transparent),
      0 0 80px color-mix(in srgb, var(--cyber-cyan-500) 25%, transparent);
    --glow-magenta:
      0 0 20px var(--cyber-magenta-500),
      0 0 40px color-mix(in srgb, var(--cyber-magenta-500) 50%, transparent);
    --glow-yellow:
      0 0 20px var(--cyber-yellow-500),
      0 0 40px color-mix(in srgb, var(--cyber-yellow-500) 50%, transparent);
    --glow-green:
      0 0 20px var(--cyber-green-500),
      0 0 40px color-mix(in srgb, var(--cyber-green-500) 50%, transparent);
    --glow-text-cyan:
      0 0 10px var(--cyber-cyan-500),
      0 0 20px color-mix(in srgb, var(--cyber-cyan-500) 60%, transparent);

    // --------------------------------------------------------
    // Typography
    // --------------------------------------------------------

    --font-display: "Rajdhani", "Orbitron", system-ui, sans-serif;
    --font-body: "Exo 2", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", monospace;

    // Type Scale
    --text-xs: clamp(0.64rem, 0.59rem + 0.24vw, 0.75rem);
    --text-sm: clamp(0.8rem, 0.74rem + 0.32vw, 0.94rem);
    --text-base: clamp(1rem, 0.93rem + 0.37vw, 1.18rem);
    --text-lg: clamp(1.25rem, 1.16rem + 0.47vw, 1.47rem);
    --text-xl: clamp(1.56rem, 1.45rem + 0.59vw, 1.84rem);
    --text-2xl: clamp(1.95rem, 1.81rem + 0.74vw, 2.3rem);
    --text-3xl: clamp(2.44rem, 2.26rem + 0.92vw, 2.87rem);
    --text-4xl: clamp(3.05rem, 2.83rem + 1.15vw, 3.58rem);
    --text-5xl: clamp(3.81rem, 3.54rem + 1.44vw, 4.48rem);

    // Letter Spacing
    --tracking-wide: 0.05em;
    --tracking-wider: 0.1em;

    // --------------------------------------------------------
    // Spacing
    // --------------------------------------------------------

    --space-3xs: clamp(0.25rem, 0.23rem + 0.09vw, 0.31rem);
    --space-2xs: clamp(0.5rem, 0.46rem + 0.18vw, 0.63rem);
    --space-xs: clamp(0.75rem, 0.7rem + 0.28vw, 0.94rem);
    --space-sm: clamp(1rem, 0.93rem + 0.37vw, 1.25rem);
    --space-md: clamp(1.5rem, 1.39rem + 0.56vw, 1.88rem);
    --space-lg: clamp(2rem, 1.86rem + 0.74vw, 2.5rem);
    --space-xl: clamp(3rem, 2.78rem + 1.11vw, 3.75rem);
    --space-2xl: clamp(4rem, 3.71rem + 1.48vw, 5rem);
    --space-3xl: clamp(6rem, 5.57rem + 2.22vw, 7.5rem);

    // --------------------------------------------------------
    // Borders
    // --------------------------------------------------------

    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-full: 9999px;
    --radius-cyber: 0 12px 0 12px;
    --border-thin: 1px;
    --border-medium: 2px;
    --border-thick: 3px;

    // --------------------------------------------------------
    // Animation
    // --------------------------------------------------------

    --ease-cyber: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --transition-fast: var(--duration-fast) ease;
    --transition-base: var(--duration-normal) ease;
    --transition-slow: var(--duration-slow) ease;

    // --------------------------------------------------------
    // Z-Index (optimized: removed unused --z-base, --z-raised, --z-overlay)
    // --------------------------------------------------------

    --z-sticky: 100;
    --z-modal: 1000;

    // --------------------------------------------------------
    // Effects (optimized: removed unused --chromatic-offset)
    // --------------------------------------------------------

    --noise-opacity: 0.03;
    --scanline-opacity: 0.04;
  }
}