/* Color tokens for both pages, in day and night mode.
 *
 * Loaded by index.html and admin.html, and used by project-view.css, so the
 * palette lives in one place and the two pages cannot drift. Night mode is
 * opt-in: theme.js sets data-theme="dark" on <html> from the saved choice
 * before the first paint, and the moon/sun button in Navigation flips it.
 *
 * Three tokens used to do two jobs each, so they are now split:
 *   --white is the card SURFACE, which turns dark at night. Text sitting on a
 *     blue, green, or red fill uses --text-on-fill, which stays white.
 *   --interlochen-blue is blue as INK: headings, links, glyphs, focus rings.
 *     It lightens at night. Blue as a FILL behind white text (header bands,
 *     primary buttons, active segments) is --interlochen-blue-fill.
 *   --forest-green and --brick-red are FILLS. Their -text pairs are the ink.
 * A literal color drawn on a fill (white text on a badge, the bulk bar's white
 * button) can stay literal: the fill doesn't change with the theme either.
 */

:root {
    /* "only" stops browsers that force-darken pages (Samsung Internet, Chrome's
       auto dark flag) from recoloring the day theme. Night mode is ours. */
    color-scheme: light only;
    --interlochen-blue: #004A7B;
    --interlochen-blue-fill: #004A7B;
    --forest-green: #005F40;
    --forest-green-text: #005F40;
    --brick-red: #C0392B;
    --brick-red-text: #C0392B;
    --brick-red-strong: #A5281B;
    --brick-red-wash: #FBEAE7;
    --lake-blue: #58A4B0;
    --sand: #EAE2CF;
    --sunbeam: #FDB813;
    --sunset: #F68D2E;
    --sky-blue: #A9D9DD;
    --stone: #A8A9AD;
    --page-bg: #F2F2F2;
    --neutral-light-gray: #F2F2F2;
    --neutral-medium-gray: #D1D3D4;
    /* #A8A9AD is 2.35:1 on white — fine for decorative rules, not for text.
       Use --text-secondary for any metadata a reader must actually read. */
    --neutral-dark-gray: #A8A9AD;
    --text-secondary: #5A5C60;
    --text-dark: #333333;
    --white: #FFFFFF;
    --surface-alt: #FAFAFA;
    --text-on-fill: #FFFFFF;
    --code-bg: rgba(0, 0, 0, 0.06);
    /* Team Capacity heatmap ramp, as "r, g, b" so the page can add alpha. */
    --heat-rgb: 0, 74, 123;
    /* Status notices: tinted ground, hairline border, and the ink on them. */
    --danger-wash: #FDECEA;
    --danger-line: #F5C6CB;
    --warning-wash: #FDF0E2;
    --warning-line: #F0C36D;
    --warning-text: #8A4C10;
    --success-wash: #EAF6EC;
    --success-line: #A9D6B5;
    --success-text: #1E7E34;
}

/* Night mode. Contrast on the card surface (#1D2126): body text 12.8:1,
   --text-secondary 7.3:1, --neutral-dark-gray 5.2:1, blue ink 7.5:1; white on
   the blue fill 6.8:1. Sunset, Sunbeam, Lake Blue, and Sand keep their day
   values, as do the green and red fills. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --interlochen-blue: #7DB7E3;
    --interlochen-blue-fill: #1C5F92;
    --forest-green-text: #5BBF8E;
    --brick-red-text: #EE8679;
    --brick-red-strong: #F4A196;
    --brick-red-wash: #3A2224;
    --sky-blue: #21405A;
    --stone: #8C929A;
    --page-bg: #14171B;
    --neutral-light-gray: #272C33;
    --neutral-medium-gray: #3B414A;
    --neutral-dark-gray: #8C929A;
    --text-secondary: #A9AFB7;
    --text-dark: #E3E5E8;
    --white: #1D2126;
    --surface-alt: #22262C;
    --code-bg: rgba(255, 255, 255, 0.08);
    --heat-rgb: 94, 160, 214;
    --danger-wash: #3A2224;
    --danger-line: #6A3530;
    --warning-wash: #3A2E1C;
    --warning-line: #6B5326;
    --warning-text: #F0C27A;
    --success-wash: #1E3329;
    --success-line: #2F5B45;
    --success-text: #8FD3AE;
}

/* Form fields take the surface color. Without this, an unstyled input keeps
   the browser's own field color, which is white by day and gray at night. */
input, select, textarea { background-color: var(--white); color: var(--text-dark); }

/* The few Tailwind color utilities in the markup. tailwind.css is prebuilt and
   knows nothing about night mode. */
:root[data-theme="dark"] .text-gray-500 { color: var(--text-secondary); }
:root[data-theme="dark"] .text-red-600 { color: var(--brick-red-text); }

/* Night mode button: the moon turns night mode on, the sun turns it off.
   Both SVGs stay in the DOM, like the bell's two weights. */
:root:not([data-theme="dark"]) .hdr-icon-sun,
:root[data-theme="dark"] .hdr-icon-moon { display: none; }

/* Logo: navy wordmark by day, white wordmark by night. */
:root:not([data-theme="dark"]) .logo-dark,
:root[data-theme="dark"] .logo-light { display: none; }

/* Switch every color at once. Without this, controls with a color transition
   fade while everything else snaps. theme.js removes the class after a frame. */
.theme-switching, .theme-switching * { transition: none !important; }