:root {
  --color-bg: #F9FAFB;
  --color-surface: #FFFFFF;
  --color-border: #E5E7EB;
  --color-text: #111827;
  --color-text-secondary: #6B7280;
  --accent: #2563EB;
  --accent-hover: #1D4ED8;
  --accent-bg: #EFF6FF;
  --accent-text: #1D4ED8;
  --accent-contrast: #FFFFFF;
  --radius: 12px;
  --font-scale: 1;
  --transition: 150ms;
}

html.dark {
  --color-bg: #0B0F19;
  --color-surface: #151B2B;
  --color-border: #2A3348;
  --color-text: #E5E7EB;
  --color-text-secondary: #9CA3AF;
}

html, body {
  background: var(--color-bg);
  color: var(--color-text);
}

body {
  font-size: calc(1rem * var(--font-scale));
}

* {
  transition: background-color var(--transition) ease, border-color var(--transition) ease, color var(--transition) ease, box-shadow var(--transition) ease;
}

html[data-animations="off"] * {
  transition: none !important;
  animation: none !important;
}

/* ---- surface / text overrides (repoints Tailwind's fixed palette at theme variables) ---- */
.bg-white { background-color: var(--color-surface) !important; }
.bg-gray-50 { background-color: var(--color-bg) !important; }
.bg-gray-100 { background-color: var(--color-border) !important; }
.text-gray-900, .text-gray-800 { color: var(--color-text) !important; }
.text-gray-700, .text-gray-600, .text-gray-500 { color: var(--color-text-secondary) !important; }
.text-gray-400 { color: var(--color-text-secondary) !important; opacity: .85; }
.border-gray-200, .border-gray-300 { border-color: var(--color-border) !important; }
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--color-border) !important; }
.hover\:bg-gray-50:hover { background-color: var(--color-bg) !important; }

/* ---- accent overrides ---- */
.bg-blue-600 { background-color: var(--accent) !important; }
.hover\:bg-blue-700:hover { background-color: var(--accent-hover) !important; }
.text-blue-600, .text-blue-700, .text-blue-800 { color: var(--accent-text) !important; }
.hover\:text-blue-700:hover, .hover\:text-blue-800:hover { color: var(--accent-hover) !important; }
.bg-blue-50 { background-color: var(--accent-bg) !important; }
.border-blue-500 { border-color: var(--accent) !important; }
.focus\:border-blue-500:focus { border-color: var(--accent) !important; }
.focus\:ring-blue-500:focus { --tw-ring-color: var(--accent) !important; }

/* ---- radius (card style / border radius setting) ---- */
.rounded-2xl, .rounded-xl, .rounded-lg, .rounded-md { border-radius: var(--radius) !important; }

/* ---- table density ---- */
html[data-density="compact"] td, html[data-density="compact"] th { padding-top: .375rem !important; padding-bottom: .375rem !important; }
html[data-density="spacious"] td, html[data-density="spacious"] th { padding-top: 1.15rem !important; padding-bottom: 1.15rem !important; }