/* Design System Tokens for KeyTestPro V2 */

:root {
  /* Font Families */
  --font-title: 'Outfit', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 0.5rem;
  --space-xl: 2rem;
  --space-xxl: 3rem;

  /* Border Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 30px;
  --radius-full: 9999px;

  /* Shadow & Blur System */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(114, 55, 239, 0.08);
  --shadow-lg: 0 16px 40px rgba(114, 55, 239, 0.12);
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.06);

  /* Transitions */
  --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Default Theme (Light Theme) */
  --primary-hue: 255;
  --primary: hsl(var(--primary-hue), 85%, 60%);
  --primary-hover: hsl(var(--primary-hue), 85%, 52%);
  --primary-light: hsl(var(--primary-hue), 85%, 96%);
  
  --success: hsl(150, 80%, 42%);
  --success-light: hsl(150, 80%, 94%);
  --error: hsl(355, 85%, 55%);
  --error-light: hsl(355, 85%, 95%);
  --warning: hsl(38, 95%, 55%);
  --warning-light: hsl(38, 95%, 94%);
  
  --bg-app: hsl(225, 20%, 97%);
  --bg-surface: hsl(0, 0%, 100%);
  --bg-surface-hover: hsl(225, 20%, 95%);
  
  --text-main: hsl(225, 30%, 15%);
  --text-muted: hsl(225, 15%, 50%);
  --text-light: hsl(225, 10%, 75%);
  
  --border: hsl(225, 20%, 90%);
  --border-focus: hsl(var(--primary-hue), 85%, 75%);

  /* Glassmorphism Defaults */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-blur: 16px;

  /* Level Colors */
  --color-beginner: hsl(150, 80%, 42%);
  --color-beginner-light: hsl(150, 80%, 94%);
  --color-intermediate: hsl(35, 95%, 55%);
  --color-intermediate-light: hsl(35, 95%, 94%);
  --color-advanced: hsl(330, 85%, 55%);
  --color-advanced-light: hsl(330, 85%, 94%);
  --color-pink: hsl(330, 85%, 55%);
  --color-blue: hsl(200, 85%, 55%);
}

/* Dark Theme */
[data-theme="dark"] {
  --primary-hue: 255;
  --primary: hsl(var(--primary-hue), 85%, 65%);
  --primary-hover: hsl(var(--primary-hue), 85%, 70%);
  --primary-light: rgba(114, 55, 239, 0.15);
  
  --success: hsl(150, 80%, 45%);
  --success-light: rgba(46, 204, 113, 0.15);
  --error: hsl(355, 85%, 60%);
  --error-light: rgba(231, 76, 60, 0.15);
  --warning: hsl(38, 95%, 60%);
  --warning-light: rgba(241, 196, 15, 0.15);
  
  --bg-app: hsl(225, 25%, 8%);
  --bg-surface: hsl(225, 20%, 13%);
  --bg-surface-hover: hsl(225, 20%, 18%);
  
  --text-main: hsl(225, 15%, 92%);
  --text-muted: hsl(225, 10%, 65%);
  --text-light: hsl(225, 10%, 45%);
  
  --border: hsl(225, 20%, 20%);
  --border-focus: hsl(var(--primary-hue), 85%, 55%);

  --glass-bg: rgba(30, 31, 38, 0.7);
  --glass-border: rgba(255, 255, 255, 0.08);
  
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.4);
}

/* Aurora (Vibrant Gradient Theme) */
[data-theme="aurora"] {
  --primary-hue: 280;
  --primary: hsl(var(--primary-hue), 85%, 60%);
  --primary-hover: hsl(var(--primary-hue), 85%, 52%);
  --primary-light: hsl(var(--primary-hue), 85%, 96%);

  --bg-app: linear-gradient(135deg, hsl(270, 45%, 94%) 0%, hsl(200, 50%, 94%) 100%);
  --bg-surface: rgba(255, 255, 255, 0.85);
  --bg-surface-hover: rgba(255, 255, 255, 0.95);
  
  --text-main: hsl(270, 35%, 15%);
  --text-muted: hsl(270, 15%, 45%);
  --text-light: hsl(270, 10%, 70%);
  
  --border: rgba(142, 68, 173, 0.15);
  --border-focus: hsl(var(--primary-hue), 85%, 75%);

  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(142, 68, 173, 0.2);
  
  --shadow-md: 0 8px 24px rgba(142, 68, 173, 0.06);
  --shadow-lg: 0 16px 40px rgba(142, 68, 173, 0.1);
}

[data-theme="dark"][data-theme-gradient="true"] {
  --bg-app: linear-gradient(135deg, hsl(270, 45%, 8%) 0%, hsl(220, 40%, 6%) 100%);
}

/* Carbon Theme */
[data-theme="carbon"] {
  --primary-hue: 25;
  --primary: hsl(var(--primary-hue), 95%, 55%);
  --primary-hover: hsl(var(--primary-hue), 95%, 48%);
  --primary-light: rgba(230, 126, 34, 0.15);
  
  --success: hsl(150, 80%, 45%);
  --success-light: rgba(46, 204, 113, 0.15);
  --error: hsl(355, 85%, 60%);
  --error-light: rgba(231, 76, 60, 0.15);
  --warning: hsl(38, 95%, 60%);
  --warning-light: rgba(241, 196, 15, 0.15);
  
  --bg-app: hsl(220, 12%, 12%);
  --bg-surface: hsl(220, 12%, 16%);
  --bg-surface-hover: hsl(220, 12%, 21%);
  
  --text-main: hsl(0, 0%, 93%);
  --text-muted: hsl(220, 10%, 62%);
  --text-light: hsl(220, 10%, 42%);
  
  --border: hsl(220, 12%, 22%);
  --border-focus: hsl(var(--primary-hue), 95%, 65%);

  --glass-bg: rgba(25, 26, 30, 0.75);
  --glass-border: rgba(255, 255, 255, 0.05);
  
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* Matrix Theme */
[data-theme="matrix"] {
  --primary-hue: 120;
  --primary: hsl(var(--primary-hue), 100%, 50%);
  --primary-hover: hsl(var(--primary-hue), 100%, 40%);
  --primary-light: rgba(0, 255, 0, 0.12);
  
  --success: hsl(120, 100%, 45%);
  --success-light: rgba(0, 255, 0, 0.1);
  --error: hsl(0, 100%, 55%);
  --error-light: rgba(255, 0, 0, 0.15);
  --warning: hsl(60, 100%, 50%);
  --warning-light: rgba(255, 255, 0, 0.1);
  
  --bg-app: hsl(120, 25%, 5%);
  --bg-surface: hsl(120, 25%, 9%);
  --bg-surface-hover: hsl(120, 25%, 14%);
  
  --text-main: hsl(120, 100%, 50%);
  --text-muted: hsl(120, 60%, 35%);
  --text-light: hsl(120, 60%, 22%);
  
  --border: hsl(120, 30%, 15%);
  --border-focus: hsl(var(--primary-hue), 100%, 50%);

  --glass-bg: rgba(10, 20, 10, 0.75);
  --glass-border: rgba(0, 255, 0, 0.12);
  
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
}

/* Cyberpunk Theme */
[data-theme="cyberpunk"] {
  --primary-hue: 320;
  --primary: hsl(var(--primary-hue), 100%, 55%);
  --primary-hover: hsl(var(--primary-hue), 100%, 48%);
  --primary-light: rgba(255, 0, 128, 0.15);
  
  --success: hsl(180, 100%, 45%);
  --success-light: rgba(0, 255, 255, 0.15);
  --error: hsl(0, 100%, 60%);
  --error-light: rgba(255, 0, 0, 0.15);
  --warning: hsl(60, 100%, 50%);
  --warning-light: rgba(255, 255, 0, 0.1);
  
  --bg-app: hsl(260, 35%, 7%);
  --bg-surface: hsl(260, 35%, 11%);
  --bg-surface-hover: hsl(260, 35%, 16%);
  
  --text-main: hsl(60, 100%, 65%);
  --text-muted: hsl(260, 20%, 60%);
  --text-light: hsl(260, 20%, 38%);
  
  --border: hsl(260, 30%, 18%);
  --border-focus: hsl(var(--primary-hue), 100%, 60%);

  --glass-bg: rgba(18, 12, 30, 0.75);
  --glass-border: rgba(255, 0, 128, 0.15);
  
  --shadow-md: 0 8px 24px rgba(255, 0, 128, 0.1);
  --shadow-lg: 0 16px 40px rgba(255, 0, 128, 0.15);
}

/* Slate Minimal Theme */
[data-theme="slate-minimal"] {
  --primary-hue: 215;
  --primary: hsl(var(--primary-hue), 25%, 35%);
  --primary-hover: hsl(var(--primary-hue), 25%, 25%);
  --primary-light: hsl(var(--primary-hue), 25%, 94%);
  
  --bg-app: hsl(210, 20%, 98%);
  --bg-surface: hsl(0, 0%, 100%);
  --bg-surface-hover: hsl(210, 15%, 95%);
  
  --text-main: hsl(215, 25%, 15%);
  --text-muted: hsl(215, 12%, 48%);
  --text-light: hsl(215, 10%, 70%);
  
  --border: hsl(215, 15%, 88%);
  --border-focus: hsl(var(--primary-hue), 25%, 55%);
}

/* Ocean Breeze (Sky Blue Light) */
[data-theme="ocean-breeze"] {
  --primary-hue: 198;
  --primary: hsl(var(--primary-hue), 90%, 48%);
  --primary-hover: hsl(var(--primary-hue), 90%, 40%);
  --primary-light: hsl(var(--primary-hue), 90%, 94%);
  
  --bg-app: hsl(198, 70%, 97%);
  --bg-surface: hsl(0, 0%, 100%);
  --bg-surface-hover: hsl(198, 60%, 94%);
  
  --text-main: hsl(205, 55%, 16%);
  --text-muted: hsl(200, 25%, 46%);
  --text-light: hsl(200, 20%, 72%);
  
  --border: hsl(198, 45%, 88%);
  --border-focus: hsl(var(--primary-hue), 90%, 60%);
}

/* Midnight Navy (Sapphire Navy Dark) */
[data-theme="midnight-navy"] {
  --primary-hue: 200;
  --primary: hsl(var(--primary-hue), 90%, 55%);
  --primary-hover: hsl(var(--primary-hue), 90%, 65%);
  --primary-light: rgba(14, 165, 233, 0.15);
  
  --bg-app: hsl(222, 47%, 10%);
  --bg-surface: hsl(222, 42%, 15%);
  --bg-surface-hover: hsl(222, 38%, 20%);
  
  --text-main: hsl(210, 40%, 96%);
  --text-muted: hsl(215, 20%, 68%);
  --text-light: hsl(215, 15%, 45%);
  
  --border: hsl(222, 30%, 24%);
  --border-focus: hsl(var(--primary-hue), 90%, 60%);
}

/* Emerald Mint (Fresh Teal Light) */
[data-theme="emerald"] {
  --primary-hue: 160;
  --primary: hsl(var(--primary-hue), 84%, 39%);
  --primary-hover: hsl(var(--primary-hue), 84%, 31%);
  --primary-light: hsl(var(--primary-hue), 84%, 94%);
  
  --bg-app: hsl(160, 40%, 97%);
  --bg-surface: hsl(0, 0%, 100%);
  --bg-surface-hover: hsl(160, 35%, 94%);
  
  --text-main: hsl(165, 50%, 14%);
  --text-muted: hsl(160, 20%, 42%);
  --text-light: hsl(160, 15%, 70%);
  
  --border: hsl(160, 30%, 88%);
  --border-focus: hsl(var(--primary-hue), 84%, 48%);
}

/* Forest Dark (Deep Pine Dark) */
[data-theme="forest-dark"] {
  --primary-hue: 155;
  --primary: hsl(var(--primary-hue), 70%, 50%);
  --primary-hover: hsl(var(--primary-hue), 70%, 60%);
  --primary-light: rgba(52, 211, 153, 0.15);
  
  --bg-app: hsl(165, 45%, 7%);
  --bg-surface: hsl(165, 38%, 12%);
  --bg-surface-hover: hsl(165, 32%, 17%);
  
  --text-main: hsl(150, 40%, 94%);
  --text-muted: hsl(160, 20%, 65%);
  --text-light: hsl(160, 15%, 42%);
  
  --border: hsl(165, 30%, 20%);
  --border-focus: hsl(var(--primary-hue), 70%, 55%);
}

/* Deep Purple (Royal Amethyst Dark) */
[data-theme="deep-purple"] {
  --primary-hue: 270;
  --primary: hsl(var(--primary-hue), 90%, 68%);
  --primary-hover: hsl(var(--primary-hue), 90%, 76%);
  --primary-light: rgba(192, 132, 252, 0.15);
  
  --bg-app: hsl(245, 50%, 9%);
  --bg-surface: hsl(245, 45%, 14%);
  --bg-surface-hover: hsl(245, 40%, 19%);
  
  --text-main: hsl(260, 40%, 96%);
  --text-muted: hsl(255, 20%, 68%);
  --text-light: hsl(255, 15%, 45%);
  
  --border: hsl(245, 30%, 24%);
  --border-focus: hsl(var(--primary-hue), 90%, 70%);
}

/* Lavender Soft (Pastel Lavender Light) */
[data-theme="lavender-soft"] {
  --primary-hue: 260;
  --primary: hsl(var(--primary-hue), 70%, 58%);
  --primary-hover: hsl(var(--primary-hue), 70%, 50%);
  --primary-light: hsl(var(--primary-hue), 70%, 95%);
  
  --bg-app: hsl(260, 45%, 97%);
  --bg-surface: hsl(0, 0%, 100%);
  --bg-surface-hover: hsl(260, 40%, 94%);
  
  --text-main: hsl(260, 40%, 18%);
  --text-muted: hsl(260, 18%, 48%);
  --text-light: hsl(260, 15%, 72%);
  
  --border: hsl(260, 30%, 89%);
  --border-focus: hsl(var(--primary-hue), 70%, 65%);
}

/* Sunset Rose (Coral Pink Light) */
[data-theme="sunset-rose"] {
  --primary-hue: 345;
  --primary: hsl(var(--primary-hue), 85%, 58%);
  --primary-hover: hsl(var(--primary-hue), 85%, 50%);
  --primary-light: hsl(var(--primary-hue), 85%, 95%);
  
  --bg-app: hsl(345, 60%, 97%);
  --bg-surface: hsl(0, 0%, 100%);
  --bg-surface-hover: hsl(345, 50%, 94%);
  
  --text-main: hsl(345, 45%, 18%);
  --text-muted: hsl(345, 20%, 48%);
  --text-light: hsl(345, 15%, 72%);
  
  --border: hsl(345, 35%, 89%);
  --border-focus: hsl(var(--primary-hue), 85%, 65%);
}

/* Crimson Dark (Ruby Crimson Dark) */
[data-theme="crimson-dark"] {
  --primary-hue: 355;
  --primary: hsl(var(--primary-hue), 85%, 60%);
  --primary-hover: hsl(var(--primary-hue), 85%, 68%);
  --primary-light: rgba(239, 68, 68, 0.15);
  
  --bg-app: hsl(355, 30%, 8%);
  --bg-surface: hsl(355, 25%, 13%);
  --bg-surface-hover: hsl(355, 22%, 18%);
  
  --text-main: hsl(355, 30%, 95%);
  --text-muted: hsl(355, 15%, 65%);
  --text-light: hsl(355, 12%, 45%);
  
  --border: hsl(355, 25%, 22%);
  --border-focus: hsl(var(--primary-hue), 85%, 65%);
}

/* Pitch Black (OLED Carbon Dark) */
[data-theme="pitch-black"] {
  --primary-hue: 190;
  --primary: hsl(var(--primary-hue), 100%, 50%);
  --primary-hover: hsl(var(--primary-hue), 100%, 60%);
  --primary-light: rgba(0, 210, 255, 0.15);
  
  --bg-app: #000000;
  --bg-surface: #111113;
  --bg-surface-hover: #1c1c1f;
  
  --text-main: #ffffff;
  --text-muted: #8e8e93;
  --text-light: #48484a;
  
  --border: #2c2c2e;
  --border-focus: hsl(var(--primary-hue), 100%, 50%);
  
  --glass-bg: rgba(17, 17, 19, 0.85);
  --glass-border: rgba(255, 255, 255, 0.1);
}

/* Core Floating Elements keyframes */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

@keyframes float-fast {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0px); }
}

@keyframes float-slow {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

@keyframes float-diagonal {
  0% { transform: translate(0px, 0px); }
  50% { transform: translate(-5px, -8px); }
  100% { transform: translate(0px, 0px); }
}

@keyframes pulse-soft {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.95; }
}

@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}