/*
 * dark-mode.css
 * Loaded after Tailwind CDN in <head> so same-specificity rules override Tailwind
 * without needing !important on every line.
 * html.dark is toggled by layout.js applyDark().
 *
 * Design tokens used throughout:
 *   --dm-surface   : base card background
 *   --dm-raised    : legend rows, table heads, section headers
 *   --dm-page      : outer page background
 *   --dm-border    : default divider
 *   --dm-text      : body text
 *   --dm-muted     : secondary text
 *   --dm-faint     : tertiary / placeholder text
 *
 * Creciva violet palette is CUSTOM-GREEN (#5d8a32) — not purple.
 * Standard violet colours from Tailwind are NOT used in this project.
 */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
html.dark {
    --dm-page    : #000000;
    --dm-surface : #111111;
    --dm-raised  : #1a1a1a;
    --dm-border  : #2a2a2a;
    --dm-text    : #f0f0f0;
    --dm-muted   : #a0a0a0;
    --dm-faint   : #606060;

    color-scheme : dark;
}

/* ── Page wrapper ────────────────────────────────────────────────────────── */
html.dark .ds-wrap        { background: var(--dm-page) !important; }
html.dark #ds-main        { background: var(--dm-page); color: var(--dm-text); }

/* ── Card / white surfaces ───────────────────────────────────────────────── */
html.dark .bg-white                { background-color: var(--dm-surface) !important; }
html.dark .bg-\[\#f9fafb\]         { background-color: var(--dm-page)    !important; }
html.dark .bg-gray-50              { background-color: var(--dm-raised)  !important; }
html.dark .bg-gray-100             { background-color: #1e1e1e           !important; }
html.dark .bg-gray-200             { background-color: #282828           !important; }

/* Opacity row backgrounds (legend, footers) */
html.dark .bg-gray-50\/60         { background-color: rgba(26,26,26,.9) !important; }
html.dark .bg-gray-50\/40         { background-color: rgba(26,26,26,.7) !important; }
html.dark .bg-gray-50\/50         { background-color: rgba(26,26,26,.8) !important; }

/* ── Coloured tint backgrounds — transparent overlays so colour shows ────── */
/* Standard greens */
html.dark .bg-green-50             { background-color: rgba(34,197,94,.12)  !important; }
html.dark .bg-green-100            { background-color: rgba(34,197,94,.2)   !important; }
/* Creciva brand greens (Tailwind's violet = #5d8a32 in this project) */
html.dark .bg-violet-50            { background-color: rgba(93,138,50,.12)  !important; }
html.dark .bg-violet-100           { background-color: rgba(93,138,50,.2)   !important; }
html.dark .bg-violet-50\/40        { background-color: rgba(93,138,50,.14)  !important; }
html.dark .bg-violet-50\/60        { background-color: rgba(93,138,50,.18)  !important; }
html.dark .bg-\[\#f0f7e6\]         { background-color: rgba(93,138,50,.12)  !important; }
html.dark .bg-\[\#edf4e4\]         { background-color: rgba(93,138,50,.10)  !important; }
html.dark .bg-\[\#f7fbf3\]         { background-color: rgba(93,138,50,.08)  !important; }
/* Emeralds */
html.dark .bg-emerald-50           { background-color: rgba(16,185,129,.12) !important; }
html.dark .bg-emerald-100          { background-color: rgba(16,185,129,.2)  !important; }
/* Ambers */
html.dark .bg-amber-50             { background-color: rgba(245,158,11,.12) !important; }
html.dark .bg-amber-100            { background-color: rgba(245,158,11,.2)  !important; }
/* Oranges */
html.dark .bg-orange-50            { background-color: rgba(249,115,22,.12) !important; }
html.dark .bg-orange-100           { background-color: rgba(249,115,22,.2)  !important; }
/* Reds */
html.dark .bg-red-50               { background-color: rgba(239,68,68,.12)  !important; }
html.dark .bg-red-100              { background-color: rgba(239,68,68,.2)   !important; }
/* Blues */
html.dark .bg-blue-50              { background-color: rgba(59,130,246,.12) !important; }
html.dark .bg-blue-100             { background-color: rgba(59,130,246,.2)  !important; }
html.dark .bg-indigo-50            { background-color: rgba(99,102,241,.12) !important; }
html.dark .bg-sky-50               { background-color: rgba(14,165,233,.12) !important; }

/* ── Borders ─────────────────────────────────────────────────────────────── */
html.dark .border-gray-50          { border-color: var(--dm-border) !important; }
html.dark .border-gray-100         { border-color: var(--dm-border) !important; }
html.dark .border-gray-200         { border-color: #282828           !important; }
html.dark .border-gray-300         { border-color: #333333           !important; }

html.dark .border-green-100        { border-color: rgba(34,197,94,.25)   !important; }
html.dark .border-green-200        { border-color: rgba(34,197,94,.4)    !important; }
html.dark .border-emerald-100      { border-color: rgba(16,185,129,.25)  !important; }
html.dark .border-emerald-200      { border-color: rgba(16,185,129,.4)   !important; }
html.dark .border-violet-100       { border-color: rgba(93,138,50,.25)   !important; }
html.dark .border-violet-100\/50   { border-color: rgba(93,138,50,.18)   !important; }
html.dark .border-violet-200       { border-color: rgba(93,138,50,.4)    !important; }
html.dark .border-amber-100        { border-color: rgba(245,158,11,.25)  !important; }
html.dark .border-amber-200        { border-color: rgba(245,158,11,.4)   !important; }
html.dark .border-orange-100       { border-color: rgba(249,115,22,.25)  !important; }
html.dark .border-orange-200       { border-color: rgba(249,115,22,.4)   !important; }
html.dark .border-red-100          { border-color: rgba(239,68,68,.25)   !important; }
html.dark .border-red-200          { border-color: rgba(239,68,68,.4)    !important; }
html.dark .border-blue-100         { border-color: rgba(59,130,246,.25)  !important; }

/* ── Text — neutral scale ────────────────────────────────────────────────── */
html.dark .text-black              { color: #f8fafc     !important; }
html.dark .text-gray-900           { color: #f1f5f9     !important; }
html.dark .text-gray-800           { color: #e2eaf5     !important; }
html.dark .text-gray-700           { color: #ccd6e8     !important; }
html.dark .text-gray-600           { color: #a8b8ce     !important; }
html.dark .text-gray-500           { color: #8fa0b5     !important; }
html.dark .text-gray-400           { color: #7d91a8     !important; }
html.dark .text-gray-300           { color: #555555     !important; }
html.dark .text-gray-200           { color: #3a3a3a     !important; }

/* ── Text — coloured — vibrant against dark backgrounds ─────────────────── */
/* Standard greens */
html.dark .text-green-900          { color: #bbf7d0     !important; }
html.dark .text-green-800          { color: #86efac     !important; }
html.dark .text-green-700          { color: #4ade80     !important; }
html.dark .text-green-600          { color: #22c55e     !important; }
/* Emeralds */
html.dark .text-emerald-900        { color: #a7f3d0     !important; }
html.dark .text-emerald-700        { color: #34d399     !important; }
html.dark .text-emerald-600        { color: #10b981     !important; }
/* Creciva brand (violet = green) */
html.dark .text-violet-700         { color: #88bb38     !important; }
html.dark .text-violet-600         { color: #9eca4a     !important; }
html.dark .text-\[\#3a5c1a\]       { color: #88bb38     !important; }
html.dark .text-\[\#4a7027\]       { color: #88bb38     !important; }
html.dark .text-\[\#5d8a32\]       { color: #9eca4a     !important; }
/* Ambers */
html.dark .text-amber-800          { color: #fde68a     !important; }
html.dark .text-amber-700          { color: #fcd34d     !important; }
html.dark .text-amber-600          { color: #fbbf24     !important; }
/* Oranges */
html.dark .text-orange-700         { color: #fdba74     !important; }
html.dark .text-orange-600         { color: #fb923c     !important; }
/* Reds */
html.dark .text-red-700            { color: #fca5a5     !important; }
html.dark .text-red-600            { color: #f87171     !important; }
/* Blues */
html.dark .text-blue-700           { color: #93c5fd     !important; }
html.dark .text-blue-600           { color: #60a5fa     !important; }

/* ── Shadows ─────────────────────────────────────────────────────────────── */
html.dark .shadow-sm               { box-shadow: 0 1px 3px rgba(0,0,0,.45) !important; }
html.dark .shadow-md               { box-shadow: 0 3px 8px rgba(0,0,0,.5)  !important; }
html.dark .shadow-lg               { box-shadow: 0 6px 20px rgba(0,0,0,.55)!important; }

/* ── Hover states ────────────────────────────────────────────────────────── */
html.dark .hover\:bg-gray-50:hover  { background-color: var(--dm-raised)  !important; }
html.dark .hover\:bg-gray-100:hover { background-color: #1e1e1e           !important; }
html.dark .hover\:bg-gray-200:hover { background-color: #282828           !important; }

/* ── Dividers ────────────────────────────────────────────────────────────── */
html.dark .divide-gray-100 > * + * { border-color: var(--dm-border) !important; }
html.dark .divide-gray-200 > * + * { border-color: #2f3d56           !important; }

/* ── Form elements ───────────────────────────────────────────────────────── */
html.dark input:not([type=checkbox]):not([type=radio]):not([type=range]),
html.dark select,
html.dark textarea {
    background-color : var(--dm-raised) !important;
    border-color     : var(--dm-border) !important;
    color            : var(--dm-text)   !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: var(--dm-faint) !important; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
html.dark table thead,
html.dark table th  { background-color: var(--dm-raised) !important; color: var(--dm-muted) !important; border-color: var(--dm-border) !important; }
html.dark table td  { border-color: var(--dm-border) !important; color: var(--dm-text) !important; }
html.dark table tr:hover { background-color: var(--dm-raised) !important; }

/* ── Misc utilities ──────────────────────────────────────────────────────── */
html.dark .bg-gray-100.rounded-full { background-color: var(--dm-raised) !important; }
html.dark code                      { background-color: var(--dm-raised) !important; color: var(--dm-text) !important; }
html.dark .skeleton                 { background: linear-gradient(90deg, var(--dm-raised) 25%, var(--dm-border) 50%, var(--dm-raised) 75%) !important; background-size: 400px 100% !important; }

/* Divide borders */
html.dark .divide-gray-50 > * + *  { border-color: var(--dm-border) !important; }