:root {
  --primary: #0f2744;
  --primary-light: #1a365d;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: #dbeafe;
  --text: #1e293b;
  --text-muted: #64748b;
  --muted: var(--text-muted);
  --bg: #ffffff;
  --bg-subtle: #f8fafc;
  --border: #e2e8f0;
  --card: #ffffff;
  --input-bg: #ffffff;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --radius: 12px;
  --shadow: 0 4px 24px rgba(15, 39, 68, 0.08);
  --shadow-lg: 0 20px 60px rgba(15, 39, 68, 0.12);
  --brand-gradient: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 55%, #1e40af 100%);
  --header-bg: rgba(255, 255, 255, 0.92);
  --mix-base: #ffffff;
}

html[data-theme="dark"] {
  --primary: #d7e3f4;
  --primary-light: #8ba3c7;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: rgba(59, 130, 246, 0.16);
  --text: #e8eef7;
  --text-muted: #93a0b8;
  --muted: var(--text-muted);
  --bg: #0b1220;
  --bg-subtle: #080d18;
  --border: #243044;
  --card: #121a2b;
  --input-bg: #0e1626;
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.14);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.45);
  --brand-gradient: linear-gradient(135deg, #07101c 0%, #0f2744 48%, #1e3a8a 100%);
  --header-bg: rgba(8, 13, 24, 0.86);
  --app-header-bg: #07101c;
  --mix-base: #121a2b;
}