/*
  Modern theme tokens and bridge rules
  - Uses CSS variables for light/dark themes
  - Bridges common Tailwind utility classes to tokens for minimal template changes
*/

/* Design tokens (light) */
:root {
  color-scheme: light;
  --bg: #f8fafc;                /* slate-50 */
  --surface: #ffffff;            /* white */
  --text: #0f172a;               /* slate-900 */
  --muted: #475569;              /* slate-600 */
  --border: #e5e7eb;             /* gray-200 */
  --ring: #94a3b8;               /* slate-400 */
  --primary: #2563eb;            /* blue-600 */
  --primary-contrast: #ffffff;   /* on-primary */
  --accent: #10b981;             /* emerald-500 */
  --accent-contrast: #ffffff;    /* on-accent */
}

/* Design tokens (dark) */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1220;                 /* dark background */
  --surface: #0f172a;            /* slate-900 */
  --text: #e5e7eb;               /* gray-200 */
  --muted: #94a3b8;              /* slate-400 */
  --border: #1f2937;             /* gray-800 */
  --ring: #334155;               /* slate-700 */
  --primary: #60a5fa;            /* blue-400 */
  --primary-contrast: #0b1220;   /* on-primary */
  --accent: #34d399;             /* emerald-400 */
  --accent-contrast: #0b1220;    /* on-accent */
}

/* Base surfaces and text */
html, body {
  background-color: var(--bg);
  color: var(--text);
}

/* Bridge Tailwind utility classes to tokens (minimal overrides) */
body.bg-gray-50 { background-color: var(--bg) !important; }
.bg-white { background-color: var(--surface) !important; }
.text-gray-900, .text-black { color: var(--text) !important; }
.text-gray-800 { color: var(--text) !important; opacity: .92; }
.text-gray-700 { color: var(--text) !important; opacity: .82; }

.border, .border-b, .border-t, .border-l, .border-r { border-color: var(--border) !important; }
nav { border-color: var(--border) !important; }

/* Forms */
input, select, textarea {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .7; }

/* Focus styles */
.focus-ring, :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Links and buttons (generic) */
a { color: var(--primary); }
a:hover { color: color-mix(in oklab, var(--primary), white 20%); }
button, .btn { background-color: var(--primary); color: var(--primary-contrast); }
button:hover, .btn:hover { background-color: color-mix(in oklab, var(--primary), black 10%); }

/* Card helper */
.card { background-color: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem; }

/* Flash alerts (bridge existing bg-* and text-* usage) */
[data-theme="dark"] .bg-blue-100 { background-color: #1e3a8a1a !important; }
[data-theme="dark"] .text-blue-800 { color: #93c5fd !important; }
[data-theme="dark"] .bg-green-100 { background-color: #064e3b1a !important; }
[data-theme="dark"] .text-green-800 { color: #86efac !important; }
[data-theme="dark"] .bg-yellow-100 { background-color: #854d0e1a !important; }
[data-theme="dark"] .text-yellow-800 { color: #fde68a !important; }
[data-theme="dark"] .bg-red-100 { background-color: #7f1d1d1a !important; }
[data-theme="dark"] .text-red-800 { color: #fca5a5 !important; }

/* Extra dark-mode bridges for common utility classes */
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-slate-900,
[data-theme="dark"] .text-slate-800,
[data-theme="dark"] .text-slate-700,
[data-theme="dark"] .text-slate-600,
[data-theme="dark"] .text-slate-500,
[data-theme="dark"] .text-zinc-900,
[data-theme="dark"] .text-zinc-800,
[data-theme="dark"] .text-zinc-700,
[data-theme="dark"] .text-zinc-600,
[data-theme="dark"] .text-zinc-500 {
  color: var(--text) !important;
  opacity: 1 !important;
}

[data-theme="dark"] .text-gray-400,
[data-theme="dark"] .text-slate-400,
[data-theme="dark"] .text-zinc-400 {
  color: var(--muted) !important;
  opacity: 1 !important;
}

[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100,
[data-theme="dark"] .bg-gray-200,
[data-theme="dark"] .bg-slate-50,
[data-theme="dark"] .bg-slate-100,
[data-theme="dark"] .bg-slate-200,
[data-theme="dark"] .bg-zinc-50,
[data-theme="dark"] .bg-zinc-100,
[data-theme="dark"] .bg-zinc-200 {
  background-color: color-mix(in oklab, var(--surface), var(--bg) 34%) !important;
}

[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300,
[data-theme="dark"] .border-gray-400,
[data-theme="dark"] .border-slate-100,
[data-theme="dark"] .border-slate-200,
[data-theme="dark"] .border-slate-300,
[data-theme="dark"] .border-slate-400,
[data-theme="dark"] .border-zinc-100,
[data-theme="dark"] .border-zinc-200,
[data-theme="dark"] .border-zinc-300,
[data-theme="dark"] .border-zinc-400 {
  border-color: var(--border) !important;
}

[data-theme="dark"] .placeholder-gray-500::placeholder,
[data-theme="dark"] .placeholder-slate-500::placeholder,
[data-theme="dark"] .placeholder-zinc-500::placeholder {
  color: var(--muted) !important;
  opacity: .78 !important;
}