/* Runtime-safe design tokens and theme utilities.
   This project ships plain CSS, so every rule here must be browser-valid.
   SINGLE SOURCE OF TRUTH for all color tokens - reference these everywhere */

:root {
  /* Core Void Palette (Kyanite live map) */
  --color-void-950: var(--ky-void);
  --color-void-900: var(--ky-void-depth);
  --color-void-800: var(--ky-midnight);
  --color-void-700: var(--ky-basalt);

  /* Magic/Witch Theme */
  --color-witch-500: var(--ky-magenta);
  --color-witch-600: var(--ky-violet);

  /* Success/Soul */
  --color-soul-400: var(--ky-green);

  /* Gold/Magic */
  --color-gold-400: var(--ky-amber);
  --color-magic: var(--ky-amber);

  /* Error/Glitch */
  --color-glitch-500: var(--ky-red);
  --color-corruption: var(--ky-red);

  /* Code/System */
  --color-code: var(--ky-cyan);
  --color-code-dim: var(--ky-electric);
  --color-system: var(--ky-mist);
  --color-dim: var(--ky-steel);

  /* Retro Terminal */
  --color-retro-green: #39ff14;
  --color-retro-red: #ff0000;

  /* Functional Colors */
  --primary: var(--ky-cyan);
  --accent: var(--ky-amber);
  --error: var(--ky-red);
  --success: var(--ky-green);
  --warning: var(--ky-amber);

  /* Text Colors */
  --text-primary: var(--ky-crystal);
  --text-secondary: var(--ky-mist);
  --text-dim: var(--ky-steel);
  --text-muted: var(--ky-steel);

  /* Background Colors */
  --bg-void: var(--ky-void);
  --bg-terminal: var(--ky-void-depth);
  --bg-panel: var(--ky-basalt);
  --bg-card: var(--ky-basalt-elevated);
  --bg-dark: var(--ky-void-depth);
  --bg-dark-alt: var(--ky-midnight);
  --bg-panel-trans: rgba(11, 19, 29, 0.85);

  /* Border & UI Elements */
  --border: var(--ky-basalt-ridge);
  --border-light: var(--ky-line);
  --border-focus: rgba(38, 230, 255, 0.6);
  --border-ui: rgba(168, 175, 207, 0.28);

  /* Effects */
  --shadow-glow: 0 0 20px rgba(38, 230, 255, 0.24);
  --ease-witch: cubic-bezier(0.2, 0, 0, 1);

  /* Meditation-specific colors (for canvas rendering and UI) */
  --meditation-grid-line: rgba(255, 255, 255, 0.1);
  --meditation-success-fill: rgba(60, 227, 197, 0.25);
  --meditation-success-stroke: rgba(60, 227, 197, 0.5);
  --meditation-magic-fill: rgba(255, 45, 170, 0.3);
  --meditation-magic-stroke: rgba(255, 45, 170, 0.8);
  --meditation-code-start: rgba(0, 255, 255, 0.15);
  --meditation-code-mid: rgba(0, 255, 255, 0.08);
  --meditation-highlight: rgba(255, 255, 0, 0.9);
  --meditation-text: rgba(255, 255, 255, 0.9);
  --meditation-shadow: rgba(0, 0, 0, 0.3);
  --meditation-glow: rgba(60, 227, 197, 0.3);

  /* Z-index scale */
  --z-skip-link: 150;
  --z-modal: 100;
  --z-effects: 90;
  --z-crt-overlay: 80;
  --z-atmosphere: 70;
  --z-control-deck: 60;
  --z-tabs: 40;

  /* Kyanite Labs Design System Tokens */
  --ky-void: #05070b;
  --ky-void-depth: #070a10;
  --ky-midnight: #080d14;
  --ky-basalt: #0b131d;
  --ky-basalt-elevated: #0e1b29;
  --ky-basalt-ridge: #122335;
  --ky-crystal: #f3f8ff;
  --ky-mist: #c3d4e2;
  --ky-steel: #8297aa;
  --ky-cyan: #26e6ff;
  --ky-electric: #087dcc;
  --ky-ocean: #00a7dc;
  --ky-magenta: #ff2f6d;
  --ky-violet: #b314ff;
  --ky-amber: #f5d35c;
  --ky-green: #33ff99;
  --ky-red: #ff1a3d;
  --ky-line: rgba(38, 230, 255, 0.18);
  --ky-logo-gradient: linear-gradient(135deg, #26e6ff 0%, #ff2f6d 100%);

  /* Kyanite compatibility aliases */
  --color-void-950-kyanite: var(--ky-void);
  --color-void-900-kyanite: var(--ky-void-depth);
  --color-void-800-kyanite: var(--ky-midnight);
  --color-witch-500-kyanite: var(--ky-magenta);
  --color-code-kyanite: var(--ky-cyan);
  --color-magic-kyanite: var(--ky-amber);
  --color-glitch-500-kyanite: var(--ky-red);
  --color-corruption-kyanite: var(--ky-red);
  --color-soul-400-kyanite: var(--ky-green);
  --color-gold-400-kyanite: var(--ky-amber);
  --color-dim-kyanite: var(--ky-steel);
  --color-system-kyanite: var(--ky-mist);

  /* Kyanite font tokens */
  --font-display: 'Space Grotesk', sans-serif;
  --font-main: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

.glass-panel {
  background: rgba(11, 19, 29, 0.86);
  border: 1px solid var(--ky-line);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(16px);
}

.hud-panel {
  background: linear-gradient(145deg, rgba(38, 230, 255, 0.08) 0%, rgba(11, 19, 29, 0.78) 100%);
  border-left: 1px solid var(--ky-cyan);
  box-shadow: var(--shadow-glow);
}

.game-board-3d {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.game-layer-3d {
  transform: rotateX(5deg);
  transition: transform 0.5s var(--ease-witch);
}

.glitch-hover {
  position: relative;
  overflow: hidden;
}

.glitch-hover::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-110%);
  background: linear-gradient(90deg, rgba(38, 230, 255, 0.28), rgba(255, 47, 109, 0.26));
  transition: transform 0.3s ease;
  mix-blend-mode: screen;
}

.glitch-hover:hover::before,
.glitch-hover:focus-visible::before {
  transform: translateX(110%);
}

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

@keyframes glitch {
  2%, 64% { transform: translate(2px, 0) skew(0deg); }
  4%, 60% { transform: translate(-2px, 0) skew(0deg); }
  62% { transform: translate(0, 0) skew(5deg); }
}