/* ============================================
   DESIGN TOKENS - VIBRANT NEBULA & FROZEN GLASS
   ============================================ */

/*
  Global Theme Config using Tailwind v4 @theme directive
  Static values (spacing, fonts, radius) remain constant across themes.
  Colors are mapped to CSS variables handled by the [data-theme] attribute.
*/
@theme {
  --spacing-0: 0;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --spacing-28: 7rem;
  --spacing-32: 8rem;
  --spacing-36: 9rem;
  --spacing-40: 10rem;
  --spacing-44: 11rem;
  --spacing-48: 12rem;
  --spacing-52: 13rem;
  --spacing-56: 14rem;
  --spacing-60: 15rem;
  --spacing-64: 16rem;
  --spacing-72: 18rem;
  --spacing-80: 20rem;
  --spacing-96: 24rem;

  --width-xs: 20rem;
  --width-sm: 24rem;
  --width-md: 28rem;
  --width-lg: 32rem;
  --width-xl: 36rem;
  --width-2xl: 42rem;
  --width-3xl: 48rem;
  --width-4xl: 56rem;
  --width-5xl: 64rem;
  --width-6xl: 72rem;
  --width-7xl: 80rem;

  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  --font-sans: 'Inter', -apple-system, sans-serif;
  --font-display: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   THEME DEFINITIONS
   ============================================ */

/* 1. DEFAULT DARK THEME: "TWILIGHT DEEP NEBULA" */
@layer base {

  :root,
  [data-theme="dark"] {
    /* === CORE PALETTE === */
    --kodo-void: 15 23 42;
    /* Slate 900 - Twilight Base */
    --kodo-ink: 2 6 23;
    /* Slate 950 - Deepest Depth */
    --kodo-graphite: 30 41 59;
    /* Slate 800 - Surfaces */
    --kodo-slate: 51 65 85;
    /* Slate 700 - Borders/Separators */

    /* === TEXT === */
    --kodo-text-main: 255 255 255;
    /* Pure White */
    --kodo-text-dim: 148 163 184;
    /* Slate 400 */

    /* === ACCENTS (ELECTRIC) === */
    --kodo-cyan: 34 211 238;
    /* Cyan 400 - Neon */
    --kodo-cyan-dim: 6 182 212;
    /* Cyan 500 */
    --kodo-magenta: 232 121 249;
    /* Fuchsia 400 */
    --kodo-violet: 167 139 250;
    /* Violet 400 */
    --kodo-lime: 163 230 53;
    /* Lime 400 */
    --kodo-gold: 250 204 21;
    /* Yellow 400 */
    --kodo-red: 248 113 113;
    /* Red 400 */

    /* === SEMANTIC GLASS VARIABLES === */
    /* HUD */
    --glass-hud-bg: rgba(15, 23, 42, 0.6);
    --glass-hud-border: 255 255 255;
    /* Used with opacity */
    --glass-hud-border-opacity: 0.15;

    /* CARDS */
    --glass-card-bg-base: 30 41 59;
    /* RGB of Graphite */
    --glass-card-bg-opacity: 0.4;
    --glass-card-border: 255 255 255;
    --glass-card-border-opacity: 0.2;

    /* GLOBAL GRADIENTS */
    --gradient-glow-cyan: rgba(34, 211, 238, 0.45);
    --gradient-glow-magenta: rgba(232, 121, 249, 0.45);
    --gradient-glow-violet: rgba(167, 139, 250, 0.25);
    --gradient-glow-highlight: rgba(255, 255, 255, 0.1);
  }

  /* 2. LIGHT THEME: "FROZEN GLASS" */
  [data-theme="light"] {
    /* === CORE PALETTE === */
    --kodo-void: 248 250 252;
    /* Slate 50 - Snow Base */
    --kodo-ink: 255 255 255;
    /* White - Purest */
    --kodo-graphite: 226 232 240;
    /* Slate 200 - Surface */
    --kodo-slate: 203 213 225;
    /* Slate 300 - Borders */

    /* === TEXT === */
    --kodo-text-main: 15 23 42;
    /* Slate 900 - Dark Text */
    --kodo-text-dim: 100 116 139;
    /* Slate 500 */

    /* === ACCENTS (FROSTED) === */
    --kodo-cyan: 2 132 199;
    /* Sky 600 - Deep Blue */
    --kodo-cyan-dim: 14 165 233;
    /* Sky 500 */
    --kodo-magenta: 192 38 211;
    /* Fuchsia 600 */
    --kodo-violet: 124 58 237;
    /* Violet 600 */
    --kodo-lime: 101 163 13;
    /* Lime 600 */
    --kodo-gold: 234 179 8;
    /* Yellow 600 */
    --kodo-red: 220 38 38;
    /* Red 600 */

    /* === SEMANTIC GLASS VARIABLES === */
    /* HUD */
    --glass-hud-bg: rgba(255, 255, 255, 0.85);
    /* Frosty white */
    --glass-hud-border: 203 213 225;
    /* Slate 300 */
    --glass-hud-border-opacity: 0.6;

    /* CARDS */
    --glass-card-bg-base: 255 255 255;
    --glass-card-bg-opacity: 0.7;
    --glass-card-border: 255 255 255;
    /* White borders on frost looks clean */
    --glass-card-border-opacity: 0.8;

    /* GLOBAL GRADIENTS (Pastel/Soft) */
    --gradient-glow-cyan: rgba(14, 165, 233, 0.25);
    --gradient-glow-magenta: rgba(192, 38, 211, 0.25);
    --gradient-glow-violet: rgba(139, 92, 246, 0.15);
    --gradient-glow-highlight: rgba(255, 255, 255, 0.8);
  }
}

/* ============================================
   UTILITIES
   ============================================ */

/* Glass Panel Standard */
.glass-panel {
  background: rgba(var(--glass-card-bg-base), var(--glass-card-bg-opacity));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(var(--glass-card-border), var(--glass-card-border-opacity));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Neon Text Helper */
.text-glow {
  text-shadow: 0 0 15px currentColor;
}