/* ---------- Base + shared tokens (don't change at runtime) ---------- */
:root {
  /* Fonts, radii, spacing */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 10px;
  --radius-lg: 14px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-xs: 6px; --space-sm: 10px;
  --tile-min: 270px;
  --input-width: 30%;

  /* UA hint: both schemes supported (form controls, scrollbars) */
  color-scheme: light dark;

  /* ---------- Light palette (values defined ONCE) ---------- */
  --bg-light:#8a1538; --fg-light:#111827; --muted-fg-light:#6b7280;
  --border-light:#7c878e; --card-light:#cccccc;
  --accent-light:#c28a54; --accent-contrast-light:#ffffff;
  --success-light:#0a7b39; --danger-light:#9b1c1c;
  --secondary-light:#7c878e; --off-white-light:#f8f9fa; --off-black-light:#212529;
  --input-bg-light: var(--off-white-light);
  --surface-light: var(--card-light);
  --shadow-lg-light: 0 6px 18px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06);
  --border-strong-light: #000000;

  /* ---------- Dark palette (“moonlight”) (values defined ONCE) ---------- */
  --bg-dark:#0b0e11; --fg-dark:#e6e9ee; --muted-fg-dark:#a8b0ba;
  --border-dark:#2a2f38; --card-dark:#2f3a48;
  --accent-dark:#8ecaff; --accent-contrast-dark:#0b0f14; /* or #fff if you prefer */
  --success-dark:#34d399; --danger-dark:#f87171;
  --secondary-dark:#878d95; --off-white-dark:#e3e6ea; --off-black-dark:#0b0f14;
  --input-bg-dark:#0f141b;
  --surface-dark:#0e131a;
  --shadow-lg-dark: 0 10px 24px rgba(0,0,0,.50), 0 2px 10px rgba(0,0,0,.40);
  --border-strong-dark:#000000;

  /* ---------- Default mapping (LIGHT by default) ---------- */
  --bg: var(--bg-light);
  --fg: var(--fg-light);
  --muted-fg: var(--muted-fg-light);
  --border: var(--border-light);
  --card: var(--card-light);
  --accent: var(--accent-light);
  --accent-contrast: var(--accent-contrast-light);
  --success: var(--success-light);
  --danger: var(--danger-light);
  --secondary: var(--secondary-light);
  --off-white: var(--off-white-light);
  --off-black: var(--off-black-light);
  --input-bg: var(--input-bg-light);
  --color-surface: var(--surface-light);
  --shadow-lg: var(--shadow-lg-light);
  --color-border-strong: var(--border-strong-light);
}

/* System preference → remap tokens to DARK palette */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--bg-dark);
    --fg: var(--fg-dark);
    --muted-fg: var(--muted-fg-dark);
    --border: var(--border-dark);
    --card: var(--card-dark);
    --accent: var(--accent-dark);
    --accent-contrast: var(--accent-contrast-dark);
    --success: var(--success-dark);
    --danger: var(--danger-dark);
    --secondary: var(--secondary-dark);
    --off-white: var(--off-white-dark);
    --off-black: var(--off-black-dark);
    --input-bg: var(--input-bg-dark);
    --color-surface: var(--surface-dark);
    --shadow-lg: var(--shadow-lg-dark);
    --color-border-strong: var(--border-strong-dark);
  }
}

/* Manual overrides (placed AFTER the media block so they win on mobile) */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: var(--bg-light);
  --fg: var(--fg-light);
  --muted-fg: var(--muted-fg-light);
  --border: var(--border-light);
  --card: var(--card-light);
  --accent: var(--accent-light);
  --accent-contrast: var(--accent-contrast-light);
  --success: var(--success-light);
  --danger: var(--danger-light);
  --secondary: var(--secondary-light);
  --off-white: var(--off-white-light);
  --off-black: var(--off-black-light);
  --input-bg: var(--input-bg-light);
  --color-surface: var(--surface-light);
  --shadow-lg: var(--shadow-lg-light);
  --color-border-strong: var(--border-strong-light);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--bg-dark);
  --fg: var(--fg-dark);
  --muted-fg: var(--muted-fg-dark);
  --border: var(--border-dark);
  --card: var(--card-dark);
  --accent: var(--accent-dark);
  --accent-contrast: var(--accent-contrast-dark);
  --success: var(--success-dark);
  --danger: var(--danger-dark);
  --secondary: var(--secondary-dark);
  --off-white: var(--off-white-dark);
  --off-black: var(--off-black-dark);
  --input-bg: var(--input-bg-dark);
  --color-surface: var(--surface-dark);
  --shadow-lg: var(--shadow-lg-dark);
  --color-border-strong: var(--border-strong-dark);
}