/* ==========================================================================
   Design Tokens & Theme Definitions
   ========================================================================== */

/* Register Calculator Display Font */
@font-face {
  font-family: 'Register';
  src: url('../fonts/REGISTER.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Fonts */
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --font-calc: 'Register', 'JetBrains Mono', monospace;

  /* Retro Digital Display Palette */
  --lcd-bg: #050d07;
  --lcd-green-bright: #00ff66;
  --lcd-green-glow: rgba(0, 255, 102, 0.45);
  --lcd-green-dim: rgba(0, 255, 102, 0.72);
  --lcd-green-faint: rgba(0, 255, 102, 0.45);
  --lcd-border: rgba(0, 255, 102, 0.22);

  /* Transitions & Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Audio state */
  --sound-active-color: #10b981;
}

/* 1. Deep Obsidian Theme (Default) */
[data-theme="obsidian"] {
  --bg-gradient: radial-gradient(circle at 15% 15%, #1e1b4b 0%, #0f172a 50%, #030712 100%);
  --ambient-glow-1: rgba(99, 102, 241, 0.2);
  --ambient-glow-2: rgba(168, 85, 247, 0.15);

  --panel-bg: rgba(15, 23, 42, 0.72);
  --panel-border: rgba(255, 255, 255, 0.08);
  --panel-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-accent: #818cf8;

  /* Button Variants */
  --btn-num-bg: rgba(30, 41, 59, 0.65);
  --btn-num-border: rgba(255, 255, 255, 0.07);
  --btn-num-color: #f1f5f9;
  --btn-num-hover: rgba(51, 65, 85, 0.85);
  --btn-num-active: rgba(71, 85, 105, 0.95);

  --btn-fn-bg: rgba(51, 65, 85, 0.5);
  --btn-fn-border: rgba(255, 255, 255, 0.09);
  --btn-fn-color: #cbd5e1;
  --btn-fn-hover: rgba(71, 85, 105, 0.75);

  --btn-op-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(139, 92, 246, 0.25) 100%);
  --btn-op-border: rgba(168, 85, 247, 0.35);
  --btn-op-color: #c084fc;
  --btn-op-hover: linear-gradient(135deg, rgba(99, 102, 241, 0.45) 0%, rgba(139, 92, 246, 0.45) 100%);

  --btn-equal-bg: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
  --btn-equal-color: #ffffff;
  --btn-equal-shadow: 0 8px 25px -4px rgba(139, 92, 246, 0.55);

  --btn-clear-color: #f87171;
  --btn-clear-bg: rgba(239, 68, 68, 0.15);
  --btn-clear-border: rgba(239, 68, 68, 0.25);

  --display-bg: rgba(3, 7, 18, 0.65);
  --display-border: rgba(255, 255, 255, 0.06);

  --drawer-bg: rgba(15, 23, 42, 0.94);
  --input-bg: rgba(15, 23, 42, 0.85);
  --card-bg: rgba(30, 41, 59, 0.5);
}

/* 2. Cyberpunk Glow Theme */
[data-theme="cyberpunk"] {
  --bg-gradient: radial-gradient(circle at 80% 20%, #20083b 0%, #0d0221 50%, #05010e 100%);
  --ambient-glow-1: rgba(0, 240, 255, 0.18);
  --ambient-glow-2: rgba(255, 0, 128, 0.18);

  --panel-bg: rgba(13, 2, 33, 0.82);
  --panel-border: rgba(0, 240, 255, 0.25);
  --panel-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 240, 255, 0.15);

  --text-primary: #00f0ff;
  --text-secondary: #ff007f;
  --text-muted: #8b8fb0;
  --text-accent: #ffe600;

  --btn-num-bg: rgba(26, 11, 54, 0.75);
  --btn-num-border: rgba(0, 240, 255, 0.2);
  --btn-num-color: #e0f7fa;
  --btn-num-hover: rgba(48, 20, 95, 0.95);
  --btn-num-active: rgba(0, 240, 255, 0.35);

  --btn-fn-bg: rgba(43, 10, 68, 0.65);
  --btn-fn-border: rgba(255, 0, 128, 0.3);
  --btn-fn-color: #ff85c2;
  --btn-fn-hover: rgba(77, 16, 122, 0.85);

  --btn-op-bg: linear-gradient(135deg, rgba(255, 0, 128, 0.35) 0%, rgba(255, 119, 0, 0.25) 100%);
  --btn-op-border: rgba(255, 0, 128, 0.55);
  --btn-op-color: #ff3399;
  --btn-op-hover: linear-gradient(135deg, rgba(255, 0, 128, 0.55) 0%, rgba(255, 119, 0, 0.45) 100%);

  --btn-equal-bg: linear-gradient(135deg, #00f0ff 0%, #ff007f 100%);
  --btn-equal-color: #0d0221;
  --btn-equal-shadow: 0 8px 28px -2px rgba(0, 240, 255, 0.7);

  --btn-clear-color: #ff0055;
  --btn-clear-bg: rgba(255, 0, 85, 0.22);
  --btn-clear-border: rgba(255, 0, 85, 0.45);

  --display-bg: rgba(5, 1, 14, 0.8);
  --display-border: rgba(0, 240, 255, 0.25);

  --drawer-bg: rgba(13, 2, 33, 0.96);
  --input-bg: rgba(26, 11, 54, 0.85);
  --card-bg: rgba(43, 10, 68, 0.45);
}

/* 3. Clean Studio (Light) Theme */
[data-theme="light"] {
  --bg-gradient: radial-gradient(circle at 10% 10%, #f8fafc 0%, #e2e8f0 60%, #cbd5e1 100%);
  --ambient-glow-1: rgba(99, 102, 241, 0.1);
  --ambient-glow-2: rgba(14, 165, 233, 0.1);

  --panel-bg: rgba(255, 255, 255, 0.85);
  --panel-border: rgba(255, 255, 255, 0.95);
  --panel-shadow: 0 25px 50px -12px rgba(100, 116, 139, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-accent: #4f46e5;

  --btn-num-bg: rgba(255, 255, 255, 0.92);
  --btn-num-border: rgba(226, 232, 240, 0.9);
  --btn-num-color: #1e293b;
  --btn-num-hover: #f8fafc;
  --btn-num-active: #e2e8f0;

  --btn-fn-bg: rgba(241, 245, 249, 0.88);
  --btn-fn-border: rgba(203, 213, 225, 0.7);
  --btn-fn-color: #475569;
  --btn-fn-hover: #e2e8f0;

  --btn-op-bg: rgba(238, 242, 255, 0.92);
  --btn-op-border: rgba(199, 210, 254, 0.85);
  --btn-op-color: #4f46e5;
  --btn-op-hover: #e0e7ff;

  --btn-equal-bg: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  --btn-equal-color: #ffffff;
  --btn-equal-shadow: 0 8px 22px -4px rgba(79, 70, 229, 0.45);

  --btn-clear-color: #ef4444;
  --btn-clear-bg: rgba(254, 242, 242, 0.95);
  --btn-clear-border: rgba(254, 202, 202, 0.85);

  --display-bg: rgba(248, 250, 252, 0.85);
  --display-border: rgba(226, 232, 240, 0.85);

  --drawer-bg: rgba(255, 255, 255, 0.96);
  --input-bg: rgba(248, 250, 252, 0.95);
  --card-bg: rgba(241, 245, 249, 0.75);
}