/*
 * Theme tokens. Light values match Tailwind defaults so existing pages render
 * unchanged; dark values override the same utility classes via `html.dark`.
 *
 * The strategy is to override the most-used Tailwind colour utilities under
 * `html.dark` (specificity 0,2,1 > 0,1,0, so no !important needed) rather than
 * litter every template with `dark:` variants. New pages using bg-white,
 * bg-gray-*, text-gray-*, border-gray-* "just work" in both themes.
 *
 * Tokens are exposed so bespoke components can read var(--surface-1) etc.
 */

:root {
    color-scheme: light;

    --surface-0: #f9fafb;   /* page background */
    --surface-1: #ffffff;   /* cards, dropdowns */
    --surface-2: #f3f4f6;   /* subtle row hover */
    --surface-3: #e5e7eb;   /* dividers, button hover */

    --text-1: #111827;      /* primary copy */
    --text-2: #374151;      /* secondary copy */
    --text-3: #6b7280;      /* muted */
    --text-4: #9ca3af;      /* placeholders, disabled */

    --border-1: #e5e7eb;
    --border-2: #d1d5db;

    --accent-bg: #1f2937;   /* primary button bg (gray-800) */
    --accent-fg: #ffffff;
}

html.dark {
    color-scheme: dark;

    --surface-0: #0b0b0e;
    --surface-1: #17171b;
    --surface-2: #1f1f24;
    --surface-3: #2a2a31;

    --text-1: #f4f4f5;
    --text-2: #d4d4d8;
    --text-3: #a1a1aa;
    --text-4: #71717a;

    --border-1: #2a2a31;
    --border-2: #3f3f46;

    --accent-bg: #3f3f46;
    --accent-fg: #fafafa;
}

/* ── Base body recolour ────────────────────────────────────────────────── */
html.dark body {
    background-color: var(--surface-0);
    color: var(--text-1);
}

/* ── Surface utilities ─────────────────────────────────────────────────── */
html.dark .bg-white { background-color: var(--surface-1); }
html.dark .bg-gray-50 { background-color: var(--surface-0); }
html.dark .bg-gray-100 { background-color: var(--surface-2); }
html.dark .bg-gray-200 { background-color: var(--surface-3); }
html.dark .hover\:bg-gray-50:hover { background-color: var(--surface-2); }
html.dark .hover\:bg-gray-100:hover { background-color: var(--surface-3); }

/* Primary button (`bg-gray-800 text-white`) — keep the dark-on-dark contrast
 * by lifting it to a mid-gray. Hover lifts further. */
html.dark .bg-gray-800 { background-color: var(--accent-bg); color: var(--accent-fg); }
html.dark .hover\:bg-gray-800:hover { background-color: #52525b; }
html.dark .bg-gray-700 { background-color: #2f2f36; }
html.dark .hover\:bg-gray-700:hover { background-color: #3f3f46; }

/* ── Text utilities ────────────────────────────────────────────────────── */
html.dark .text-gray-900 { color: var(--text-1); }
html.dark .text-gray-800 { color: var(--text-1); }
html.dark .text-gray-700 { color: var(--text-2); }
html.dark .text-gray-600 { color: var(--text-2); }
html.dark .text-gray-500 { color: var(--text-3); }
html.dark .text-gray-400 { color: var(--text-4); }

/* ── Borders & dividers ────────────────────────────────────────────────── */
html.dark .border-gray-100 { border-color: var(--border-1); }
html.dark .border-gray-200 { border-color: var(--border-1); }
html.dark .border-gray-300 { border-color: var(--border-2); }
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-1); }
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-1); }

/* ── Status badges (bg-{c}-50/100/200 + text-{c}-600/700/800/900) ──────── */
html.dark .bg-red-50     { background-color: rgb(127 29 29 / 0.25); }
html.dark .bg-red-100    { background-color: rgb(127 29 29 / 0.40); }
html.dark .bg-red-200    { background-color: rgb(127 29 29 / 0.65); }
html.dark .bg-green-50   { background-color: rgb(20 83 45 / 0.25); }
html.dark .bg-green-100  { background-color: rgb(20 83 45 / 0.40); }
html.dark .bg-green-200  { background-color: rgb(20 83 45 / 0.65); }
html.dark .bg-amber-50   { background-color: rgb(120 53 15 / 0.25); }
html.dark .bg-amber-100  { background-color: rgb(120 53 15 / 0.40); }
html.dark .bg-amber-200  { background-color: rgb(120 53 15 / 0.65); }
html.dark .bg-blue-50    { background-color: rgb(30 58 138 / 0.25); }
html.dark .bg-blue-100   { background-color: rgb(30 58 138 / 0.40); }
html.dark .bg-blue-200   { background-color: rgb(30 58 138 / 0.65); }
html.dark .bg-orange-50  { background-color: rgb(124 45 18 / 0.25); }
html.dark .bg-orange-100 { background-color: rgb(124 45 18 / 0.40); }
html.dark .bg-purple-100 { background-color: rgb(88 28 135 / 0.40); }
html.dark .bg-indigo-100 { background-color: rgb(49 46 129 / 0.40); }
html.dark .bg-yellow-50  { background-color: rgb(120 53 15 / 0.20); }

/* Hover variants for the colored row/summary backgrounds. Without these,
 * hovering a green/red attempt summary flashes the light Tailwind tint. */
html.dark .hover\:bg-red-50:hover     { background-color: rgb(127 29 29 / 0.35); }
html.dark .hover\:bg-red-100:hover    { background-color: rgb(127 29 29 / 0.55); }
html.dark .hover\:bg-green-50:hover   { background-color: rgb(20 83 45 / 0.35); }
html.dark .hover\:bg-green-100:hover  { background-color: rgb(20 83 45 / 0.55); }
html.dark .hover\:bg-amber-50:hover   { background-color: rgb(120 53 15 / 0.35); }
html.dark .hover\:bg-amber-100:hover  { background-color: rgb(120 53 15 / 0.55); }
html.dark .hover\:bg-blue-50:hover    { background-color: rgb(30 58 138 / 0.35); }
html.dark .hover\:bg-blue-100:hover   { background-color: rgb(30 58 138 / 0.55); }
html.dark .hover\:bg-orange-50:hover  { background-color: rgb(124 45 18 / 0.35); }

html.dark .text-red-600    { color: #f87171; }
html.dark .text-red-700    { color: #fca5a5; }
html.dark .text-red-800    { color: #fca5a5; }
html.dark .text-red-900    { color: #fecaca; }
html.dark .text-green-600  { color: #4ade80; }
html.dark .text-green-700  { color: #86efac; }
html.dark .text-green-800  { color: #86efac; }
html.dark .text-green-900  { color: #bbf7d0; }
html.dark .text-amber-700  { color: #fbbf24; }
html.dark .text-amber-800  { color: #fcd34d; }
html.dark .text-amber-900  { color: #fde68a; }
html.dark .text-blue-600   { color: #60a5fa; }
html.dark .text-blue-700   { color: #93c5fd; }
html.dark .text-blue-800   { color: #93c5fd; }
html.dark .text-blue-900   { color: #bfdbfe; }
html.dark .text-orange-700 { color: #fdba74; }
html.dark .text-orange-800 { color: #fed7aa; }
html.dark .text-purple-700 { color: #c4b5fd; }
html.dark .text-purple-800 { color: #ddd6fe; }
html.dark .text-indigo-700 { color: #a5b4fc; }
html.dark .text-indigo-800 { color: #c7d2fe; }

html.dark .border-red-200    { border-color: rgb(127 29 29 / 0.6); }
html.dark .border-red-300    { border-color: rgb(127 29 29 / 0.7); }
html.dark .border-amber-200  { border-color: rgb(120 53 15 / 0.6); }
html.dark .border-green-200  { border-color: rgb(20 83 45 / 0.6); }
html.dark .border-blue-200   { border-color: rgb(30 58 138 / 0.6); }
html.dark .border-blue-300   { border-color: rgb(30 58 138 / 0.7); }
html.dark .border-orange-200 { border-color: rgb(124 45 18 / 0.6); }
html.dark .border-orange-300 { border-color: rgb(124 45 18 / 0.7); }

/* Solid status accents (e.g. `bg-blue-600 text-white` buttons) keep their
 * Tailwind defaults — they read fine on dark backgrounds. */

/* ── Timeline rails (bg-{c}-300) ───────────────────────────────────────── */
/* The default Tailwind -300 swatches are very bright (e.g. amber-300 #fcd34d)
 * which glows on a dark page. Dim to mid-saturation tints. */
html.dark .bg-gray-300   { background-color: var(--border-2); }
html.dark .bg-red-300    { background-color: #7f1d1d; }
html.dark .bg-green-300  { background-color: #166534; }
html.dark .bg-amber-300  { background-color: #78350f; }
html.dark .bg-indigo-300 { background-color: #3730a3; }

/* ── Timeline icon ring ────────────────────────────────────────────────── */
/* `ring-2 ring-white` masks the rail behind each icon by matching the page
 * background. In dark mode the page is near-black, so override the ring
 * colour rather than the literal class. */
html.dark .ring-white { --tw-ring-color: var(--surface-0); }

/* ── Timeline icon body ────────────────────────────────────────────────── */
/* The status badges use `bg-{c}-100` which we render as 40%-alpha tints in
 * dark mode — fine for badges that sit on a card, but the timeline icons
 * sit ON TOP of the rail and the rail bleeds through. Solid fills here. */
html.dark .timeline-event__icon.bg-gray-100   { background-color: var(--surface-3); }
html.dark .timeline-event__icon.bg-green-100  { background-color: #14532d; }
html.dark .timeline-event__icon.bg-red-100    { background-color: #7f1d1d; }
html.dark .timeline-event__icon.bg-amber-100  { background-color: #78350f; }
html.dark .timeline-event__icon.bg-indigo-100 { background-color: #312e81; }

/* ── Timeline root event ───────────────────────────────────────────────── */
/* Root events use `bg-amber-50 border-amber-200` for a subtle warm highlight.
 * In dark mode keep the warm hint but desaturate so it doesn't read as a
 * warning, and stay distinctly lifted from regular cards (--surface-1). */
html.dark .timeline-event--root.bg-amber-50      { background-color: #2a2418; }
html.dark .timeline-event--root.border-amber-200 { border-color: #5c4a2e; }

/* ── Form controls ─────────────────────────────────────────────────────── */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html.dark textarea,
html.dark select {
    background-color: var(--surface-1);
    color: var(--text-1);
    border-color: var(--border-2);
}
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: var(--text-4);
}

/* ── Shadows (Tailwind's default rgba(0,0,0,0.05) disappears on dark) ──── */
html.dark .shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.5); }
html.dark .shadow    { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.6), 0 1px 2px -1px rgb(0 0 0 / 0.6); }
html.dark .shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.6), 0 2px 4px -2px rgb(0 0 0 / 0.6); }
html.dark .shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.7), 0 4px 6px -4px rgb(0 0 0 / 0.7); }

/* ── Theme switcher (segmented control in the user dropdown) ───────────── */
.theme-switcher {
    display: flex;
    gap: 2px;
    margin: 6px 12px 8px;
    padding: 2px;
    border-radius: 6px;
    background-color: var(--surface-2);
}
.theme-switcher__option {
    flex: 1;
    padding: 4px 6px;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    color: var(--text-3);
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}
.theme-switcher__option:hover {
    color: var(--text-1);
}
.theme-switcher__option[aria-pressed="true"] {
    background-color: var(--surface-1);
    color: var(--text-1);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}
html.dark .theme-switcher__option[aria-pressed="true"] {
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
}
.theme-switcher__label {
    margin: 8px 12px 2px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-3);
}