/* theme.css — owned by dark-mode system. Tokens consumed by inline
 * tailwind.config via rgb(var(--token) / <alpha-value>) bindings.
 *
 * Space-separated RGB triplets (no rgb() wrapper) so Tailwind's
 * <alpha-value> syntax works — e.g. bg-surface/80.
 */

:root {
    --bg-canvas:         243 244 246;  /* gray-100 */
    --bg-surface:        255 255 255;
    --bg-surface-raised: 255 255 255;
    --ink-primary:       17 24 39;     /* gray-900 */
    --ink-muted:         107 114 128;  /* gray-500 */
    --border-subtle:     229 231 235;  /* gray-200 */
    --brand-default:     37 99 235;    /* blue-600 */
    --brand-hover:       29 78 216;    /* blue-700 */
    --gradient-hero:     linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
}

html.dark {
    --bg-canvas:         11 18 32;     /* #0b1220 */
    --bg-surface:        17 29 53;     /* #111d35 */
    --bg-surface-raised: 23 36 63;     /* #17243f */
    --ink-primary:       229 231 235;  /* gray-200 */
    --ink-muted:         148 163 184;  /* slate-400 */
    --border-subtle:     30 58 102;    /* #1e3a66 */
    --brand-default:     59 130 246;   /* blue-500 */
    --brand-hover:       96 165 250;   /* blue-400 */
    --gradient-hero:     linear-gradient(135deg, #0b1220 0%, #1e3a66 100%);
}

/* Forced-light override — wins over html.dark for PDF and report viewer. */
html.light {
    --bg-canvas:         243 244 246;
    --bg-surface:        255 255 255;
    --bg-surface-raised: 255 255 255;
    --ink-primary:       17 24 39;
    --ink-muted:         107 114 128;
    --border-subtle:     229 231 235;
    --brand-default:     37 99 235;
    --brand-hover:       29 78 216;
    --gradient-hero:     linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
}

/* Sane defaults for any template not yet migrated to semantic tokens. */
body {
    background-color: rgb(var(--bg-canvas));
    color: rgb(var(--ink-primary));
}

/* Gradient used by public-site hero — moved out of inline <style>. */
.gradient-bg {
    background: var(--gradient-hero);
}

/* Risk-badge and flash-message contrast tweaks for dark mode.
 * Tints both -100 backgrounds (translucent) and -700/-800 text (lighter
 * hues) so success/error/warning banners stay readable on navy. */
html.dark .bg-red-100     { background-color: rgba(239, 68, 68, 0.15); }
html.dark .border-red-400 { border-color: rgba(239, 68, 68, 0.4); }
html.dark .text-red-700   { color: #fca5a5; }
html.dark .text-red-800   { color: #fca5a5; }
html.dark .bg-amber-100   { background-color: rgba(245, 158, 11, 0.15); }
html.dark .border-amber-400 { border-color: rgba(245, 158, 11, 0.4); }
html.dark .text-amber-700 { color: #fcd34d; }
html.dark .text-amber-800 { color: #fcd34d; }
html.dark .bg-yellow-100  { background-color: rgba(234, 179, 8, 0.15); }
html.dark .border-yellow-400 { border-color: rgba(234, 179, 8, 0.4); }
html.dark .text-yellow-700 { color: #fde68a; }
html.dark .text-yellow-800 { color: #fde68a; }
html.dark .bg-green-100   { background-color: rgba(34, 197, 94, 0.15); }
html.dark .border-green-400 { border-color: rgba(34, 197, 94, 0.4); }
html.dark .text-green-700 { color: #86efac; }
html.dark .text-green-800 { color: #86efac; }
html.dark .bg-blue-100    { background-color: rgba(59, 130, 246, 0.15); }
html.dark .border-blue-400 { border-color: rgba(59, 130, 246, 0.4); }
html.dark .text-blue-800  { color: #93c5fd; }
/* text-blue-700 is intentionally NOT globally overridden — it's used for
 * file-upload pseudo-element accents, admin info banners, and home-page
 * CTAs on gradients where dark-blue-on-light is still correct. Handle
 * contrast on a per-case basis in the template itself. */

/* Logo backdrop — user-uploaded org logos may be white-on-transparent. */
html.dark .logo-backdrop {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 4px;
}

/* Form inputs — browsers render user-agent white by default. Override for dark mode. */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="search"],
html.dark input[type="number"],
html.dark input[type="tel"],
html.dark input[type="url"],
html.dark input[type="date"],
html.dark input[type="datetime-local"],
html.dark input[type="time"],
html.dark textarea,
html.dark select {
    background-color: rgb(var(--bg-surface));
    color: rgb(var(--ink-primary));
    border-color: rgb(var(--border-subtle));
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: rgb(var(--ink-muted));
}

/* Preserve explicitly-light inputs (e.g. the admin CSS editor textarea). */
html.dark input.bg-white,
html.dark textarea.bg-white {
    background-color: #ffffff !important;
    color: #111827 !important;
}