/* ==========================================================================
   den-kit: tokens.css
   Complete design token repository (colors, ramps, glows, type scale, spacing,
   radii, z-indexes, durations, easings, budgets, and capability tier overrides)
   ========================================================================== */

:root {
  /* §2.1 Brand Anchors & Base Palette */
  --den-bg-canvas: #0A0A14;
  --den-panel-bg: #151525;
  --den-panel-surface: #1A1A2E;
  --den-panel-border: #2E2A4A;
  --den-brand-gold: #D9A520;
  --den-brand-purple: #9B59B6;
  --den-purple-light: #B066D6;
  --den-purple-deep: #6C2D8A;
  --den-text-primary: #FFFFFF;
  --den-text-secondary: #E8E8F0;
  --den-text-muted: #8E8EA8;
  --den-success: #27AE60;
  --den-success-bright: #2ECC71;
  --den-danger: #E74C3C;
  --den-danger-bright: #FF2A2A;

  /* §2.2 Molten Gold Display Ramp & Gradients */
  --den-gold-highlight: #FFF3B0;
  --den-gold-light: #FFD700;
  --den-gold-core: #D9A520;
  --den-gold-deep: #B37D14;
  --den-gold-shadow: #7A5205;
  --den-gradient-molten-gold: linear-gradient(180deg, #FFF3B0 0%, #FFD700 28%, #D9A520 68%, #7A5205 100%);
  --den-gradient-molten-horizontal: linear-gradient(90deg, #7A5205 0%, #D9A520 25%, #FFD700 50%, #D9A520 75%, #7A5205 100%);
  --den-gradient-neon-purple: linear-gradient(180deg, #B066D6 0%, #6C2D8A 100%);

  /* §2.3 Interactive Accents (Cyan & Ember) */
  --den-cyan-core: #00E5FF;
  --den-cyan-dim: #0090B0;
  --den-cyan-glow-rgba: rgba(0, 229, 255, 0.45);
  --den-ember-core: #FF5E1E;
  --den-ember-flame: #FF9100;
  --den-ember-glow-rgba: rgba(255, 94, 30, 0.45);

  /* §2.4 Glow & Neon Lighting Recipes */
  --den-glow-neon-cyan: 0 0 4px #00E5FF, 0 0 12px rgba(0, 229, 255, 0.6), 0 0 24px rgba(0, 229, 255, 0.3);
  --den-glow-neon-cyan-flicker: 0 0 2px #00E5FF, 0 0 8px rgba(0, 229, 255, 0.4);
  --den-glow-neon-purple: 0 0 4px #B066D6, 0 0 14px rgba(155, 89, 182, 0.6), 0 0 28px rgba(155, 89, 182, 0.25);
  --den-glow-gold-sm: 0 0 8px rgba(217, 165, 32, 0.5);
  --den-glow-gold-lg: 0 0 16px rgba(255, 215, 0, 0.7), 0 0 36px rgba(217, 165, 32, 0.35);
  --den-text-glow-gold: 0 0 8px rgba(255, 215, 0, 0.8), 0 0 20px rgba(217, 165, 32, 0.45);
  --den-text-glow-cyan: 0 0 8px rgba(0, 229, 255, 0.85);
  --den-text-glow-ember: 0 0 8px rgba(255, 94, 30, 0.85), 0 0 20px rgba(255, 145, 0, 0.45);

  /* §3.1 Typography Family Stacks */
  --den-font-family-display: 'Den Display', Impact, 'Arial Narrow', sans-serif;
  --den-font-family-ui: 'Den UI', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;

  /* §3.2 Fluid Type Scale (clamp) */
  --den-font-display-hero: clamp(2.75rem, 6vw + 1rem, 6.5rem);
  --den-font-display-tv: clamp(2.25rem, 4.5vw + 1rem, 5rem);
  --den-font-h1: clamp(1.75rem, 3vw + 0.5rem, 3.25rem);
  --den-font-h2: clamp(1.35rem, 2vw + 0.5rem, 2.25rem);
  --den-font-h3: clamp(1.15rem, 1.4vw + 0.3rem, 1.65rem);
  --den-font-body-lg: clamp(1rem, 0.9vw + 0.3rem, 1.25rem);
  --den-font-body: clamp(0.875rem, 0.6vw + 0.3rem, 1rem);
  --den-font-caption: clamp(0.75rem, 0.4vw + 0.3rem, 0.875rem);
  --den-font-room-code: clamp(2.5rem, 7vw, 4.25rem);

  /* §4.1 Spacing Scale */
  --den-space-2xs: 4px;
  --den-space-xs: 8px;
  --den-space-sm: 12px;
  --den-space-md: 16px;
  --den-space-lg: 24px;
  --den-space-xl: 32px;
  --den-space-2xl: 48px;
  --den-space-3xl: 64px;

  /* §4.1 Radius Scale */
  --den-radius-xs: 4px;
  --den-radius-sm: 8px;
  --den-radius-md: 14px;
  --den-radius-lg: 20px;
  --den-radius-full: 9999px;

  /* §4.2 Z-Index Layer Stack */
  --den-z-base: 1;
  --den-z-content: 10;
  --den-z-header-nav: 100;
  --den-z-overlay: 500;
  --den-z-drawer: 600;
  --den-z-spotlight: 700;
  --den-z-fx-canvas: 800;
  --den-z-interstitial: 900;
  --den-z-toast: 950;
  --den-z-splash: 1000;

  /* Motion Durations */
  --den-dur-ui-fast: 150ms;
  --den-dur-ui: 250ms;
  --den-dur-ui-slow: 400ms;
  --den-dur-celebrate: 900ms;
  --den-dur-fade: 150ms;

  /* Motion Easings */
  --den-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --den-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --den-ease-snap: cubic-bezier(0.2, 0.8, 0.4, 1);

  /* Late Council Rules: Motion Budgets */
  --den-budget-tv: 1200ms;
  --den-budget-phone: 400ms;
}

/* ==========================================================================
   Tier Overrides: Reduced Motion (data-den-tier="reduced")
   All durations collapse to 1ms except fades (150ms)
   ========================================================================== */

[data-den-tier="reduced"],
:root[data-den-tier="reduced"] {
  --den-dur-ui-fast: 1ms;
  --den-dur-ui: 1ms;
  --den-dur-ui-slow: 1ms;
  --den-dur-celebrate: 1ms;
  --den-dur-fade: 150ms;
  --den-budget-tv: 150ms;
  --den-budget-phone: 150ms;
}

@media (prefers-reduced-motion: reduce) {
  :root,
  [data-den-tier] {
    --den-dur-ui-fast: 1ms;
    --den-dur-ui: 1ms;
    --den-dur-ui-slow: 1ms;
    --den-dur-celebrate: 1ms;
    --den-dur-fade: 150ms;
    --den-budget-tv: 150ms;
    --den-budget-phone: 150ms;
  }
}