/* themes.css — optional "skins" layered on top of the light/dark base.
   =====================================================================
   Architecture: the app's theme = a BASE family (data-bs-theme="light"|"dark",
   which drives Bootstrap's native tokens AND the ~160 files' [data-bs-theme="dark"]
   surface pins) PLUS an optional SKIN class on <html> (skin-metallic / skin-contrast
   / skin-sepia / skin-night) applied by js/theme.js. A skin re-paints the palette by
   overriding the Bootstrap --bs-* CSS variables (so every token-driven surface follows
   automatically) and, where a flat palette isn't enough (metallic plating, night's
   warm tint over the dark pins), adds a few high-specificity surface rules.

   Specificity note: the dark-base surface pins are `html[data-bs-theme="dark"] .x`
   (0,1,1). Night's overrides use `html.skin-night[data-bs-theme="dark"] .x` (0,2,1)
   so they win regardless of source order. Metallic/Contrast/Sepia ride the light base
   (no dark pins fire), so `html.skin-* .x` (0,1,1)+ cleanly beats component light rules.

   This file is the palette source-of-truth, so it legitimately contains raw hex and is
   exempt from theme-lint (see .github/scripts/theme-lint.sh). Light & Dark use no skin
   class and are unaffected by anything here. */

/* ════════════════════════════════════════════════════════════════════
   METALLIC — brushed steel (light base). Cool-gray palette + beveled
   plating + steel buttons.
   ════════════════════════════════════════════════════════════════════ */
html.skin-metallic {
    --bs-body-bg: #d9dde2;
    --bs-body-bg-rgb: 217, 221, 226;
    --bs-body-color: #1b2026;
    --bs-body-color-rgb: 27, 32, 38;
    --bs-emphasis-color: #0a0d11;
    --bs-emphasis-color-rgb: 10, 13, 17;
    --bs-secondary-color: rgba(27, 32, 38, 0.68);
    --bs-secondary-bg: #c7ccd2;
    --bs-secondary-bg-rgb: 199, 204, 210;
    --bs-tertiary-color: rgba(27, 32, 38, 0.5);
    --bs-tertiary-bg: #bbc1c8;
    --bs-tertiary-bg-rgb: 187, 193, 200;
    --bs-border-color: #9aa1a9;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.2);
    --bs-heading-color: #0a0d11;
    --bs-card-bg: #cfd4da;
    --bs-link-color: #2d4154;
    --bs-link-color-rgb: 45, 65, 84;
    --bs-link-hover-color: #1b2733;
    color-scheme: light;
}
/* Brushed-steel plating on the major surfaces. background-image keeps the
   token background-color underneath as a fallback. */
html.skin-metallic .card,
html.skin-metallic .top-row,
html.skin-metallic .modal-content,
html.skin-metallic .list-group-item,
html.skin-metallic .fdms-act {
    background-image: linear-gradient(145deg, #eef1f4 0%, #d2d7dd 55%, #bcc2c9 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2);
}
html.skin-metallic nav.navbar,
html.skin-metallic .dropdown-menu {
    background-image: linear-gradient(180deg, #cfd4da 0%, #b7bdc4 100%);
    border-color: #9aa1a9;
}
html.skin-metallic .btn-primary {
    background-image: linear-gradient(180deg, #5c6c7e 0%, #38434f 100%);
    border-color: #2b333c;
    color: #ffffff;
}
html.skin-metallic .btn-primary:hover {
    background-image: linear-gradient(180deg, #6b7c90 0%, #434f5d 100%);
}
html.skin-metallic .btn-outline-secondary {
    border-color: #8a9199;
    color: #2d3843;
}
/* Tables read as etched steel rows. */
html.skin-metallic .table {
    --bs-table-bg: transparent;
    --bs-table-color: #1b2026;
    --bs-table-border-color: #a7aeb6;
}

/* ════════════════════════════════════════════════════════════════════
   HIGH CONTRAST — black-on-white, AAA (light base). Accessibility / 508.
   ════════════════════════════════════════════════════════════════════ */
html.skin-contrast {
    --bs-body-bg: #ffffff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-color: #000000;
    --bs-body-color-rgb: 0, 0, 0;
    --bs-emphasis-color: #000000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-secondary-color: #1a1a1a;
    --bs-secondary-bg: #ffffff;
    --bs-secondary-bg-rgb: 255, 255, 255;
    --bs-tertiary-color: #1a1a1a;
    --bs-tertiary-bg: #f2f2f2;
    --bs-tertiary-bg-rgb: 242, 242, 242;
    --bs-border-color: #000000;
    --bs-border-color-translucent: #000000;
    --bs-heading-color: #000000;
    --bs-card-bg: #ffffff;
    --bs-link-color: #0033cc;
    --bs-link-color-rgb: 0, 51, 204;
    --bs-link-hover-color: #001a80;
    color-scheme: light;
}
/* Bold 2px borders + strong focus rings for AAA legibility. */
html.skin-contrast .card,
html.skin-contrast .btn,
html.skin-contrast .form-control,
html.skin-contrast .form-select,
html.skin-contrast .input-group-text,
html.skin-contrast .table > :not(caption) > * > *,
html.skin-contrast .dropdown-menu,
html.skin-contrast .modal-content,
html.skin-contrast .list-group-item {
    border: 2px solid #000000 !important;
}
html.skin-contrast :focus-visible {
    outline: 3px solid #0033cc !important;
    outline-offset: 2px !important;
}
/* Kill the faint muted/secondary grays that fail contrast. */
html.skin-contrast .text-muted,
html.skin-contrast .text-secondary,
html.skin-contrast .text-body-secondary {
    color: #1a1a1a !important;
}

/* ════════════════════════════════════════════════════════════════════
   SEPIA — warm "paper" (light base). Low-glare, easy all-day reading.
   ════════════════════════════════════════════════════════════════════ */
html.skin-sepia {
    --bs-body-bg: #f4ecd8;
    --bs-body-bg-rgb: 244, 236, 216;
    --bs-body-color: #3b3228;
    --bs-body-color-rgb: 59, 50, 40;
    --bs-emphasis-color: #2a231b;
    --bs-emphasis-color-rgb: 42, 35, 27;
    --bs-secondary-color: #6b5d47;
    --bs-secondary-bg: #eee3c9;
    --bs-secondary-bg-rgb: 238, 227, 201;
    --bs-tertiary-color: #8a7a5e;
    --bs-tertiary-bg: #e6d9ba;
    --bs-tertiary-bg-rgb: 230, 217, 186;
    --bs-border-color: #d8cbac;
    --bs-border-color-translucent: rgba(59, 50, 40, 0.18);
    --bs-heading-color: #2a231b;
    --bs-card-bg: #f8f1df;
    --bs-link-color: #8a5a2b;
    --bs-link-color-rgb: 138, 90, 43;
    --bs-link-hover-color: #5f3d1c;
    color-scheme: light;
}

/* ════════════════════════════════════════════════════════════════════
   NIGHT SHIFT — warm amber on near-black (DARK base). Dim control rooms,
   overnight shifts, low blue light. Rides the dark base so the dark-surface
   pins fire; these rules re-tint the major surfaces warm and must out-rank
   the `html[data-bs-theme="dark"] .x` pins (hence the .skin-night + attr).
   ════════════════════════════════════════════════════════════════════ */
html.skin-night {
    --bs-body-bg: #0c0a07;
    --bs-body-bg-rgb: 12, 10, 7;
    --bs-body-color: #f0c889;
    --bs-body-color-rgb: 240, 200, 137;
    --bs-emphasis-color: #ffd9a0;
    --bs-emphasis-color-rgb: 255, 217, 160;
    --bs-secondary-color: #c99f66;
    --bs-secondary-bg: #17120b;
    --bs-secondary-bg-rgb: 23, 18, 11;
    --bs-tertiary-color: #a8824f;
    --bs-tertiary-bg: #211a10;
    --bs-tertiary-bg-rgb: 33, 26, 16;
    --bs-border-color: #3a2e1c;
    --bs-border-color-translucent: rgba(240, 200, 137, 0.15);
    --bs-heading-color: #ffd9a0;
    --bs-card-bg: #15110a;
    --bs-link-color: #e0a33c;
    --bs-link-color-rgb: 224, 163, 60;
    --bs-link-hover-color: #f3c069;
    color-scheme: dark;
}
/* Override the slate-navy dark pins (app.css + components) toward warm near-black.
   !important + (0,2,1)+ specificity to beat `html[data-bs-theme="dark"] .x` pins
   wherever they come later in source order (inline component <style>). */
html.skin-night[data-bs-theme="dark"],
html.skin-night[data-bs-theme="dark"] body,
html.skin-night[data-bs-theme="dark"] .page,
html.skin-night[data-bs-theme="dark"] main,
html.skin-night[data-bs-theme="dark"] .content,
html.skin-night[data-bs-theme="dark"] .intel-dark,
html.skin-night[data-bs-theme="dark"] .im-page {
    background-color: #0c0a07 !important;
    color: #f0c889 !important;
}
html.skin-night[data-bs-theme="dark"] .top-row,
html.skin-night[data-bs-theme="dark"] nav.navbar {
    background-color: #120e08 !important;
    border-color: #3a2e1c !important;
}
html.skin-night[data-bs-theme="dark"] .card,
html.skin-night[data-bs-theme="dark"] .modal-content,
html.skin-night[data-bs-theme="dark"] .dropdown-menu,
html.skin-night[data-bs-theme="dark"] .list-group-item,
html.skin-night[data-bs-theme="dark"] .stat-card-im,
html.skin-night[data-bs-theme="dark"] .fdms-act {
    background-color: #15110a !important;
    background-image: none !important;
    border-color: #3a2e1c !important;
    color: #f0c889 !important;
}
html.skin-night[data-bs-theme="dark"] .dropdown-menu .dropdown-item {
    color: #f0c889 !important;
}
html.skin-night[data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover,
html.skin-night[data-bs-theme="dark"] .dropdown-menu .dropdown-item:focus {
    background-color: #211a10 !important;
    color: #ffd9a0 !important;
}
/* Bright accent/link text warmed so it doesn't glow blue in a dim room. */
html.skin-night[data-bs-theme="dark"] a:not(.btn),
html.skin-night[data-bs-theme="dark"] .text-primary {
    color: #e0a33c !important;
}