/* ==========================================================================
   CUEVANCE Design Tokens (Dual Liquid Themes) - Time & Duration Calculator
   Version: 2.0.0
   ========================================================================== */

:root {
  /* Geometry & Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Typography Modular Scale */
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 42px;

  /* Font Stacks */
  --font-sans: 'Outfit', 'Noto Sans JP', 'Hiragino Sans', 'Meiryo', 'Noto Sans SC', 'PingFang SC', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Share Tech Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Transitions */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
}

/* ==========================================================================
   THEME: Cyber Neon (Dark Spatial Liquid)
   ========================================================================== */
body.theme-cyber-neon {
  --bg-dark: #080c1a;
  --bg-page-gradient: radial-gradient(ellipse at 20% 0%, rgba(56, 189, 248, 0.12) 0%, transparent 50%),
                      radial-gradient(ellipse at 80% 10%, rgba(139, 92, 246, 0.10) 0%, transparent 50%),
                      radial-gradient(ellipse at 50% 90%, rgba(52, 211, 153, 0.08) 0%, transparent 50%);
  --bg-card: rgba(15, 23, 42, 0.75);
  --bg-card-hover: rgba(30, 41, 59, 0.85);
  --bg-card-border: rgba(255, 255, 255, 0.15);
  --bg-input: rgba(8, 14, 30, 0.85);

  --card-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.35),
                 0 4px 16px -2px rgba(0, 0, 0, 0.40),
                 0 16px 32px -8px rgba(0, 0, 0, 0.30);
  --card-backdrop: blur(24px) saturate(180%);

  /* Neon Accents */
  --accent-cyan: #38bdf8;
  --accent-cyan-glow: rgba(56, 189, 248, 0.35);
  --accent-emerald: #34d399;
  --accent-emerald-glow: rgba(52, 211, 153, 0.35);
  --accent-purple: #a78bfa;
  --accent-orange: #fb923c;
  --accent-rose: #fb7185;

  --accent-on-cyan: #020617;
  --accent-on-emerald: #020617;

  /* Typography */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.85);
  --text-muted: rgba(255, 255, 255, 0.65);
  --text-dim: rgba(255, 255, 255, 0.45);

  /* LCD Screen Specific Tokens */
  --lcd-bg: #050814;
  --lcd-border: rgba(56, 189, 248, 0.35);
  --lcd-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 15px rgba(56, 189, 248, 0.15);
  
  --lcd-upper-glow: #38bdf8;
  --lcd-upper-text: #e0f2fe;
  --lcd-upper-shadow: 0 0 12px rgba(56, 189, 248, 0.7);
  
  --lcd-lower-glow: #34d399;
  --lcd-lower-text: #d1fae5;
  --lcd-lower-shadow: 0 0 10px rgba(52, 211, 153, 0.6);

  --lcd-segment-dim: rgba(255, 255, 255, 0.08);

  /* Keypad Buttons */
  --key-num-bg: rgba(30, 41, 59, 0.65);
  --key-num-border: rgba(255, 255, 255, 0.12);
  --key-num-hover: rgba(51, 65, 85, 0.85);
  --key-num-text: #ffffff;

  --key-op-bg: rgba(14, 116, 144, 0.35);
  --key-op-border: rgba(56, 189, 248, 0.4);
  --key-op-text: #38bdf8;
  --key-op-hover: rgba(14, 116, 144, 0.6);

  --key-action-bg: rgba(15, 23, 42, 0.8);
  --key-action-border: rgba(255, 255, 255, 0.15);
  --key-action-text: #94a3b8;

  --key-eval-bg: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  --key-eval-border: #38bdf8;
  --key-eval-text: #ffffff;
  --key-eval-shadow: 0 4px 14px rgba(2, 132, 199, 0.5);
}

/* ==========================================================================
   THEME: Warm Studio (Light Organic)
   ========================================================================== */
body.theme-warm-studio {
  --bg-dark: #e8e2d5;
  --bg-page-gradient: radial-gradient(ellipse at 15% 10%, rgba(13, 148, 136, 0.12) 0%, transparent 45%),
                      radial-gradient(ellipse at 85% 15%, rgba(217, 119, 6, 0.10) 0%, transparent 45%),
                      radial-gradient(ellipse at 50% 85%, rgba(16, 185, 129, 0.08) 0%, transparent 50%);
  --bg-card: rgba(255, 255, 255, 0.75);
  --bg-card-hover: rgba(255, 255, 255, 0.90);
  --bg-card-border: rgba(15, 23, 42, 0.15);
  --bg-input: rgba(255, 255, 255, 0.90);

  --card-shadow: inset 0 1.5px 2px 0 rgba(255, 255, 255, 0.95),
                 0 4px 16px -2px rgba(45, 42, 38, 0.07),
                 0 12px 32px -6px rgba(45, 42, 38, 0.10);
  --card-backdrop: blur(24px) saturate(180%);

  /* Studio Accents */
  --accent-cyan: #0d9488;
  --accent-cyan-glow: rgba(13, 148, 136, 0.20);
  --accent-emerald: #10b981;
  --accent-emerald-glow: rgba(16, 185, 129, 0.20);
  --accent-purple: #8b5cf6;
  --accent-orange: #d97706;
  --accent-rose: #e11d48;

  --accent-on-cyan: #ffffff;
  --accent-on-emerald: #ffffff;

  /* Typography */
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #475569;
  --text-dim: #64748b;

  /* LCD Screen Specific Tokens */
  --lcd-bg: #dbe4df;
  --lcd-border: rgba(13, 148, 136, 0.4);
  --lcd-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.05);

  --lcd-upper-glow: #064e3b;
  --lcd-upper-text: #064e3b;
  --lcd-upper-shadow: none;

  --lcd-lower-glow: #0f766e;
  --lcd-lower-text: #0f766e;
  --lcd-lower-shadow: none;

  --lcd-segment-dim: rgba(0, 0, 0, 0.06);

  /* Keypad Buttons */
  --key-num-bg: rgba(255, 255, 255, 0.85);
  --key-num-border: rgba(15, 23, 42, 0.12);
  --key-num-hover: #ffffff;
  --key-num-text: #0f172a;

  --key-op-bg: rgba(13, 148, 136, 0.15);
  --key-op-border: rgba(13, 148, 136, 0.35);
  --key-op-text: #0d9488;
  --key-op-hover: rgba(13, 148, 136, 0.25);

  --key-action-bg: rgba(241, 245, 249, 0.85);
  --key-action-border: rgba(15, 23, 42, 0.15);
  --key-action-text: #475569;

  --key-eval-bg: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  --key-eval-border: #0d9488;
  --key-eval-text: #ffffff;
  --key-eval-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
}