/* Light Theme */
:root,
[data-theme="light"] {
  /* RGB versions for opacity control (light mode) */
  --color-brown-600-rgb: 94, 82, 64;
  --color-teal-500-rgb: 33, 128, 141;
  --color-slate-900-rgb: 19, 52, 59;
  --color-slate-500-rgb: 98, 108, 113;
  --color-gray-200-rgb: 245, 245, 245;

  /* Semantic Color Tokens (Light Mode) */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);
  --color-primary: var(--color-teal-500);
  --color-primary-hover: var(--color-teal-600);
  --color-primary-active: var(--color-teal-700);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-btn-primary-text: var(--color-cream-50);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
  --color-error: var(--color-red-500);
  --color-success: var(--color-teal-500);
  --color-warning: var(--color-orange-500);
  --color-info: var(--color-slate-500);
  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);

  /* Common style patterns */
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);
  --status-bg-opacity: 0.15;
  --status-border-opacity: 0.25;

  /* RGB versions for light mode */
  --color-success-rgb: var(--color-teal-500-rgb);
  --color-error-rgb: var(--color-red-500-rgb);
  --color-warning-rgb: var(--color-orange-500-rgb);
  --color-info-rgb: var(--color-slate-500-rgb);

  /* Glassmorphism for light mode */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(94, 82, 64, 0.15);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  --bg-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  --accent-subtle: rgba(139, 92, 246, 0.4);
  --accent-cyan: rgba(6, 182, 212, 0.4);
  --text-primary: var(--color-slate-900);
  --text-secondary: var(--color-slate-500);

  /* Button gradients & colors - optimized for better readability */
  --btn-digit-bg: linear-gradient(135deg, rgba(240, 240, 240, 0.7), rgba(230, 230, 230, 0.6));
  --btn-digit-border: rgba(120, 120, 120, 0.25);
  --btn-digit-hover: rgba(120, 120, 120, 0.18);
  --btn-digit-text: var(--color-slate-900);

  --btn-operator-bg: linear-gradient(135deg, rgba(6, 182, 212, 0.3), rgba(8, 145, 178, 0.25));
  --btn-operator-border: rgba(6, 182, 212, 0.35);
  --btn-operator-hover: linear-gradient(135deg, rgba(8, 145, 178, 0.4), rgba(14, 116, 144, 0.35));
  --btn-operator-text: var(--color-slate-900);

  --btn-memory-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(217, 119, 6, 0.25));
  --btn-memory-border: rgba(245, 158, 11, 0.35);
  --btn-memory-hover: linear-gradient(135deg, rgba(217, 119, 6, 0.4), rgba(180, 83, 9, 0.35));
  --btn-memory-text: var(--color-slate-900);

  --btn-function-bg: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(185, 28, 28, 0.25));
  --btn-function-border: rgba(239, 68, 68, 0.35);
  --btn-function-hover: linear-gradient(135deg, rgba(220, 38, 38, 0.4), rgba(153, 27, 27, 0.35));
  --btn-function-text: var(--color-slate-900);

  --btn-bitwise-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.25));
  --btn-bitwise-border: rgba(59, 130, 246, 0.35);
  --btn-bitwise-hover: linear-gradient(135deg, rgba(37, 99, 235, 0.4), rgba(29, 78, 216, 0.35));
  --btn-bitwise-text: var(--color-slate-900);

  --btn-shift-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.25));
  --btn-shift-border: rgba(16, 185, 129, 0.35);
  --btn-shift-hover: linear-gradient(135deg, rgba(5, 150, 105, 0.4), rgba(4, 120, 87, 0.35));
  --btn-shift-text: var(--color-slate-900);

  --btn-complement-bg: linear-gradient(135deg, rgba(249, 115, 22, 0.3), rgba(234, 88, 12, 0.25));
  --btn-complement-border: rgba(249, 115, 22, 0.35);
  --btn-complement-hover: linear-gradient(135deg, rgba(234, 88, 12, 0.4), rgba(194, 65, 12, 0.35));
  --btn-complement-text: var(--color-slate-900);

  --btn-advanced-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(124, 58, 237, 0.25));
  --btn-advanced-border: rgba(139, 92, 246, 0.35);
  --btn-advanced-hover: linear-gradient(135deg, rgba(124, 58, 237, 0.4), rgba(109, 40, 217, 0.35));
  --btn-advanced-text: var(--color-slate-900);

  --btn-equals-bg: linear-gradient(135deg, rgba(20, 184, 166, 0.35), rgba(13, 148, 136, 0.3));
  --btn-equals-border: rgba(20, 184, 166, 0.4);
  --btn-equals-text: var(--color-slate-900);
}