/* ========== Shared design tokens (single source of truth) ========== */
/* ========== Theme variables ========== */
:root {
  --color-bg: #030712;
  --color-panel: #111827;
  --color-card: #1f2937;
  --color-border: #374151;
  --color-border-strong: #4b5563;
  --color-input-bg: #111827;
  --color-input-border: #4b5563;
  --color-text: #f3f4f6;
  --color-text-secondary: #d1d5db;
  --color-muted: #9ca3af;
  --color-hover: rgba(255,255,255,0.08);
  --color-active: rgba(255,255,255,0.12);
  --color-row-hover: rgba(255,255,255,0.03);
  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-accent-soft: #60a5fa;
  --color-accent-text: #93c5fd;
  --color-focus-ring: rgba(96,165,250,0.15);
  --color-success: #16a34a;
  --color-success-text: #86efac;
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --color-danger-text: #f87171;
  --color-danger-bright: #fca5a5;
  --color-warning: #f59e0b;
  --color-warning-text: #fcd34d;
  --color-salary-bg: #1c1917;
  --color-salary-badge-bg: #78350f;
  --color-salary-badge-text: #fde68a;
  --color-password-bg: #064e3b;
  --color-password-border: #059669;
  --color-password-hint: #34d399;
  --color-password-value-bg: #1f2937;
  --color-tab-hover: #e5e7eb;
  --color-toggle: #4b5563;
  --color-toggle-checked: #3b82f6;
  --color-white: #fff;
  --color-card-shadow: 0 4px 12px rgba(0,0,0,0.3);
  --color-modal-shadow: 0 10px 25px rgba(0,0,0,0.4);
  --badge-blue-bg: rgba(59,130,246,0.15);
  --badge-blue-border: rgba(59,130,246,0.3);
  --badge-green-bg: rgba(22,163,74,0.15);
  --badge-green-border: rgba(22,163,74,0.3);
  --badge-amber-bg: rgba(245,158,11,0.15);
  --badge-amber-border: rgba(245,158,11,0.3);
  --badge-red-bg: rgba(220,38,38,0.15);
  --badge-red-border: rgba(220,38,38,0.3);
  --badge-red-strong-bg: rgba(220,38,38,0.2);
  --color-danger-soft: #fca5a5;
}

html[data-theme="light"] {
  --color-bg: #f3f4f6;
  --color-panel: #ffffff;
  --color-card: #ffffff;
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;
  --color-input-bg: #ffffff;
  --color-input-border: #d1d5db;
  --color-text: #111827;
  --color-text-secondary: #374151;
  --color-muted: #6b7280;
  --color-hover: rgba(0,0,0,0.06);
  --color-active: rgba(0,0,0,0.09);
  --color-row-hover: rgba(0,0,0,0.04);
  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-accent-soft: #2563eb;
  --color-accent-text: #1d4ed8;
  --color-focus-ring: rgba(37,99,235,0.15);
  --color-success: #16a34a;
  --color-success-text: #15803d;
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --color-danger-text: #dc2626;
  --color-danger-bright: #dc2626;
  --color-warning: #d97706;
  --color-warning-text: #b45309;
  --color-salary-bg: #fef9c3;
  --color-salary-badge-bg: #fef3c7;
  --color-salary-badge-text: #92400e;
  --color-password-bg: #ecfdf5;
  --color-password-border: #10b981;
  --color-password-hint: #059669;
  --color-password-value-bg: #ffffff;
  --color-tab-hover: #374151;
  --color-toggle: #d1d5db;
  --color-toggle-checked: #2563eb;
  --color-white: #ffffff;
  --color-card-shadow: 0 4px 12px rgba(0,0,0,0.08);
  --color-modal-shadow: 0 10px 25px rgba(0,0,0,0.18);
  --badge-blue-bg: rgba(59,130,246,0.1);
  --badge-blue-border: rgba(59,130,246,0.35);
  --badge-green-bg: rgba(22,163,74,0.1);
  --badge-green-border: rgba(22,163,74,0.35);
  --badge-amber-bg: rgba(245,158,11,0.12);
  --badge-amber-border: rgba(245,158,11,0.4);
  --badge-red-bg: rgba(220,38,38,0.1);
  --badge-red-border: rgba(220,38,38,0.35);
  --badge-red-strong-bg: rgba(220,38,38,0.12);
  --color-danger-soft: #dc2626;
}