:root{
  color-scheme: light;
  --u-bg-1: #f6f8ff;
  --u-bg-2: #eef2ff;
  --u-bg-3: #eaf0ff;
  --u-surface: rgba(255, 255, 255, 0.92);
  --u-surface-2: rgba(248, 250, 252, 0.9);
  --u-text: #0f172a;
  --u-muted: #64748b;
  --u-line: rgba(226, 232, 240, 0.9);
  --u-shadow: 0 18px 60px rgba(2, 6, 23, 0.10);
  --u-ring: 0 0 0 4px rgba(var(--bs-primary-rgb, 31, 74, 162), 0.18);
}

html[data-theme="dark"],
body[data-theme="dark"]{
  color-scheme: dark;
}

/* Great-looking light defaults (only when a page doesn't override its own UI) */
body:not([data-theme="dark"]){
  background:
    radial-gradient(1100px 700px at 10% 0%, rgb(var(--bs-primary-rgb, 31, 74, 162) / 0.10), transparent 60%),
    radial-gradient(900px 600px at 95% 15%, rgb(var(--bs-secondary-rgb, 102, 16, 242) / 0.08), transparent 60%),
    linear-gradient(135deg, var(--u-bg-1) 0%, var(--u-bg-2) 55%, var(--u-bg-3) 100%);
  color: var(--u-text);
}

body:not([data-theme="dark"]) a{
  color: rgb(var(--bs-primary-rgb, 31, 74, 162));
}

body:not([data-theme="dark"]) a:hover{
  color: rgb(var(--bs-secondary-rgb, 102, 16, 242));
}

body:not([data-theme="dark"]) ::selection{
  background: rgba(var(--bs-primary-rgb, 31, 74, 162), 0.20);
}

body:not([data-theme="dark"]) hr{
  border-color: var(--u-line);
}

body:not([data-theme="dark"]) input,
body:not([data-theme="dark"]) select,
body:not([data-theme="dark"]) textarea{
  background: rgba(255, 255, 255, 0.92);
  color: inherit;
  border-color: rgba(148, 163, 184, 0.35);
}

body:not([data-theme="dark"]) input:focus,
body:not([data-theme="dark"]) select:focus,
body:not([data-theme="dark"]) textarea:focus{
  outline: none;
  box-shadow: var(--u-ring);
  border-color: rgb(var(--bs-primary-rgb, 31, 74, 162));
}

/* Sensible dark defaults (light-touch overrides) */
html[data-theme="dark"] body,
body[data-theme="dark"]{
  background-color: #0b1220;
  color: rgba(226, 232, 240, 0.96);
}

html[data-theme="dark"] body a,
body[data-theme="dark"] a{
  color: rgba(var(--bs-primary-rgb, 31, 74, 162), 0.95);
}

html[data-theme="dark"] body a:hover,
body[data-theme="dark"] a:hover{
  color: rgba(var(--bs-secondary-rgb, 102, 16, 242), 0.95);
}

html[data-theme="dark"] body hr,
body[data-theme="dark"] hr{
  border-color: rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] body ::selection,
body[data-theme="dark"] ::selection{
  background: rgba(var(--bs-primary-rgb, 31, 74, 162), 0.35);
}

html[data-theme="dark"] body input,
html[data-theme="dark"] body select,
html[data-theme="dark"] body textarea,
body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea{
  background: rgba(2, 6, 23, 0.22);
  color: inherit;
  border-color: rgba(148, 163, 184, 0.22);
}

html[data-theme="dark"] body input::placeholder,
html[data-theme="dark"] body textarea::placeholder,
body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder{
  color: rgba(148, 163, 184, 0.78);
}

html[data-theme="dark"] body table,
body[data-theme="dark"] table{
  color: inherit;
}

html[data-theme="dark"] body th,
html[data-theme="dark"] body td,
body[data-theme="dark"] th,
body[data-theme="dark"] td{
  border-color: rgba(148, 163, 184, 0.16) !important;
}

html[data-theme="dark"] body code,
html[data-theme="dark"] body pre,
body[data-theme="dark"] code,
body[data-theme="dark"] pre{
  background: rgba(2, 6, 23, 0.28);
  border-color: rgba(148, 163, 184, 0.16);
  color: rgba(226, 232, 240, 0.92);
}

/* Auth + standalone pages that historically lacked dark surfaces */
html[data-theme="dark"] body .login-card,
html[data-theme="dark"] body .register-card,
html[data-theme="dark"] body .success-card,
body[data-theme="dark"] .login-card,
body[data-theme="dark"] .register-card,
body[data-theme="dark"] .success-card{
  background: rgba(15, 23, 42, 0.72) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  color: rgba(226, 232, 240, 0.96);
}

html[data-theme="dark"] body .muted,
html[data-theme="dark"] body .text-muted,
body[data-theme="dark"] .muted,
body[data-theme="dark"] .text-muted{
  color: rgba(148, 163, 184, 0.9) !important;
}

/* Bootstrap-ish common helpers */
html[data-theme="dark"] body .bg-white,
body[data-theme="dark"] .bg-white{
  background-color: rgba(15, 23, 42, 0.72) !important;
}

html[data-theme="dark"] body .text-dark,
body[data-theme="dark"] .text-dark{
  color: rgba(226, 232, 240, 0.96) !important;
}

html[data-theme="dark"] body .border,
body[data-theme="dark"] .border{
  border-color: rgba(148, 163, 184, 0.16) !important;
}