/* ========================================
   KeysGotIt Design Tokens
   ======================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: var(--text-accent); text-decoration: none; }
img { max-width: 100%; display: block; }

::selection { background: rgba(212, 160, 32, 0.35); color: #fff; }
::-moz-selection { background: rgba(212, 160, 32, 0.35); color: #fff; }

:root {
  /* Backgrounds — dark base with warm-tinted elevation */
  --bg-primary: #0a0a0d;
  --bg-secondary: #111114;
  --bg-tertiary: #1a1a1e;
  --bg-elevated: #222226;
  --bg-glass: rgba(212, 160, 32, 0.05);
  --bg-glass-border: rgba(212, 160, 32, 0.12);

  /* Gold ramp — the core brand color (from logo) */
  --gold-50: #fff9e6;
  --gold-100: #ffedb3;
  --gold-200: #ffe080;
  --gold-300: #f5b731;
  --gold-400: #d4a020;
  --gold-500: #b8860b;
  --gold-600: #9a7209;
  --gold-700: #7a5a07;
  --gold-800: #5c4305;
  --gold-900: #3d2c03;

  /* Orange ramp — fire/energy accent (from logo aura) */
  --orange-300: #f59e42;
  --orange-400: #e8751a;
  --orange-500: #d46214;
  --orange-600: #b85c14;

  /* Accent colors for specific use */
  --accent-red: #c03a2b;
  --accent-green: #22c55e;
  --accent-gold: var(--gold-300);
  --accent-orange: var(--orange-400);
  --accent-silver: #c0c0c0;
  --accent-bronze: #cd7f32;

  /* Keep purple/cyan as secondary accents */
  --purple-400: #8b5cf6;
  --accent-cyan: #00f0ff;

  /* Glow box-shadows — gold/orange based */
  --glow-brand: 0 0 15px rgba(212, 160, 32, 0.35), 0 0 45px rgba(212, 160, 32, 0.12);
  --glow-brand-intense: 0 0 20px rgba(212, 160, 32, 0.5), 0 0 60px rgba(232, 117, 26, 0.2), 0 0 100px rgba(212, 160, 32, 0.08);
  --glow-orange: 0 0 15px rgba(232, 117, 26, 0.35), 0 0 45px rgba(232, 117, 26, 0.12);
  --glow-green: 0 0 15px rgba(34, 197, 94, 0.35), 0 0 45px rgba(34, 197, 94, 0.12);
  --glow-gold: 0 0 15px rgba(245, 183, 49, 0.4), 0 0 45px rgba(245, 183, 49, 0.15);

  /* Legacy aliases so existing refs don't break */
  --glow-purple: var(--glow-brand);
  --glow-purple-intense: var(--glow-brand-intense);

  /* Glow text-shadows */
  --text-glow-gold: 0 0 10px rgba(212, 160, 32, 0.6), 0 0 30px rgba(212, 160, 32, 0.3);
  --text-glow-orange: 0 0 10px rgba(232, 117, 26, 0.6), 0 0 30px rgba(232, 117, 26, 0.3);
  --text-glow-purple: 0 0 10px rgba(139, 92, 246, 0.6), 0 0 30px rgba(139, 92, 246, 0.3);

  /* Text colors */
  --text-primary: #f0efe8;
  --text-secondary: #b8b4a8;
  --text-tertiary: #807c72;
  --text-accent: var(--gold-400);
  --text-on-brand: #ffffff;

  /* Border colors — gold-tinted */
  --border-subtle: rgba(212, 160, 32, 0.10);
  --border-default: rgba(212, 160, 32, 0.20);
  --border-strong: rgba(212, 160, 32, 0.40);
  --border-glow: rgba(212, 160, 32, 0.6);

  /* Fonts */
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Rajdhani', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Font sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-hero: clamp(3rem, 10vw, 6.5rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 9999px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 800ms;

  /* Z-index scale */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-toast: 50;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 800px;
  --nav-height: 72px;
}