/* =====================================================================
   Theme: Midnight & Gold
   ---------------------------------------------------------------------
   A theme only fills colour slots (--cs-*). base.css turns them into
   Bootstrap's own variables and the site's layout. To add a theme:
   copy this file, rename the data-cs-theme value, change the colours,
   and add it to the theme list (CarWash.Web/Models → SiteThemes).

   Contrast (text on its own background):
   LIGHT  text #111827 on page #f5f3ee 15.9:1 · on card #fff 17.7:1
          muted #4b5563 on #fff 7.6:1 · gold text #7a5c14 on #fff 6.2:1
          button #fff on navy #0b1220 18.9:1 · menu #e5e7eb on #0b1220 15.6:1
   DARK   text #e5e7eb on page #0b1220 15.6:1 · on card #121b2d 14.3:1
          muted #a3aec2 on #121b2d 8.0:1
          button #0b1220 on gold #d4a843 8.9:1 · menu gold #d4a843 on #070c16 9.4:1
   ===================================================================== */

:root[data-cs-theme="midnight-gold"] {
    /* surfaces + text */
    --cs-page: #f5f3ee;
    --cs-surface: #ffffff;
    --cs-surface-2: #f4f1e9;
    --cs-text: #111827;
    --cs-muted: #4b5563;
    --cs-border: #e2ddd0;
    --cs-input-bg: #ffffff;
    --cs-input-border: #c9c2b1;
    --cs-shadow: 0 1px 2px rgba(17, 24, 39, .06), 0 6px 18px rgba(17, 24, 39, .05);

    /* main action (buttons, active pills, focus) */
    --cs-primary: #0b1220;
    --cs-primary-hover: #1b2740;
    --cs-primary-active: #26344f;
    --cs-on-primary: #ffffff;
    --cs-primary-rgb: 11, 18, 32;

    /* brand accent (gold highlights, secondary call to action) */
    --cs-accent: #d4a843;
    --cs-accent-hover: #e2bb5e;
    --cs-on-accent: #0b1220;
    --cs-accent-text: #7a5c14;

    /* soft (subtle) tints */
    --cs-soft: #eef1f7;
    --cs-soft-border: #cdd5e3;
    --cs-soft-text: #1b2740;
    --cs-danger: #dc2626;
    --cs-danger-soft: #fef2f2;
    --cs-danger-soft-border: #fecaca;
    --cs-danger-text: #b91c1c;
    --cs-success: #047857;
    --cs-success-soft: #ecfdf5;
    --cs-success-soft-border: #a7f3d0;
    --cs-success-text: #047857;
    --cs-warning-soft: #fffbeb;
    --cs-warning-soft-border: #fcd34d;
    --cs-warning-text: #92400e;
    --cs-info-soft: #eef1f7;
    --cs-info-soft-border: #cdd5e3;
    --cs-info-text: #1b2740;

    /* navigation (always midnight, both modes) */
    --cs-nav-bg: #0b1220;
    --cs-nav-bg-2: #1b2740;
    --cs-nav-text: #e5e7eb;
    --cs-nav-muted: #9aa6bb;
    --cs-nav-line: #d4a843;
    --cs-nav-active-text: #d4a843;
    --cs-nav-active-bg: #16213a;

    /* number plate: always a white plate with dark letters and a blue band, in both modes
       text #111827 on #ffffff 17.7:1 · band text #ffffff on #1d4ed8 6.7:1 */
    --cs-plate-bg: #ffffff;
    --cs-plate-text: #111827;
    --cs-plate-border: #111827;
    --cs-plate-band: #1d4ed8;
    --cs-plate-band-text: #ffffff;
    --cs-plate-placeholder: #6b7280;

    /* see-through pieces on the dark banners (always dark in both modes)
       glass button text #f3f4f6 on ~#1d2a44 12.9:1 · live dot #34d399 on #0b1220 10.6:1 */
    --cs-glass-bg: rgba(255, 255, 255, .08);
    --cs-glass-line: rgba(255, 255, 255, .2);
    --cs-glass-hover: rgba(255, 255, 255, .16);
    --cs-live-on: #34d399;
    --cs-live-off: #9aa6bb;

    /* dark banner (queue board header, sign-in scene) */
    --cs-hero-from: #1d2a44;
    --cs-hero-to: #0b1220;
    --cs-hero-text: #f3f4f6;
    --cs-hero-muted: #cbd5e1;

}

:root[data-cs-theme="midnight-gold"][data-bs-theme="dark"] {
    --cs-page: #0b1220;
    --cs-surface: #121b2d;
    --cs-surface-2: #1a2439;
    --cs-text: #e5e7eb;
    --cs-muted: #a3aec2;
    --cs-border: #2a3752;
    --cs-input-bg: #0e1626;
    --cs-input-border: #3b4a68;
    --cs-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 22px rgba(0, 0, 0, .3);

    --cs-primary: #d4a843;
    --cs-primary-hover: #e2bb5e;
    --cs-primary-active: #c29632;
    --cs-on-primary: #0b1220;
    --cs-primary-rgb: 212, 168, 67;

    --cs-accent: #d4a843;
    --cs-accent-hover: #e2bb5e;
    --cs-on-accent: #0b1220;
    --cs-accent-text: #e2bb5e;

    --cs-soft: #2a2410;
    --cs-soft-border: #5c4b1c;
    --cs-soft-text: #f0d58a;
    --cs-danger: #ef4444;
    --cs-danger-soft: #3b1d24;
    --cs-danger-soft-border: #7f2d38;
    --cs-danger-text: #fca5a5;
    --cs-success: #10b981;
    --cs-success-soft: #0f3a2e;
    --cs-success-soft-border: #1f6b53;
    --cs-success-text: #6ee7b7;
    --cs-warning-soft: #3a2e0e;
    --cs-warning-soft-border: #7a5d12;
    --cs-warning-text: #fcd34d;
    --cs-info-soft: #17223a;
    --cs-info-soft-border: #34466b;
    --cs-info-text: #c7d2fe;

    --cs-nav-bg: #070c16;
    --cs-nav-bg-2: #16213a;
    --cs-nav-text: #e5e7eb;
    --cs-nav-muted: #9aa6bb;
    --cs-nav-line: #d4a843;
    --cs-nav-active-text: #d4a843;
    --cs-nav-active-bg: #16213a;

    /* see-through pieces on the dark banners (always dark in both modes)
       glass button text #f3f4f6 on ~#1d2a44 12.9:1 · live dot #34d399 on #0b1220 10.6:1 */
    --cs-glass-bg: rgba(255, 255, 255, .08);
    --cs-glass-line: rgba(255, 255, 255, .2);
    --cs-glass-hover: rgba(255, 255, 255, .16);
    --cs-live-on: #34d399;
    --cs-live-off: #9aa6bb;

    /* plate stays white on dark cards: #ffffff on card #121b2d is clearly visible; border #e5e7eb keeps the edge */
    --cs-plate-bg: #ffffff;
    --cs-plate-text: #111827;
    --cs-plate-border: #e5e7eb;
    --cs-plate-band: #1d4ed8;
    --cs-plate-band-text: #ffffff;
    --cs-plate-placeholder: #6b7280;

    --cs-hero-from: #1a2540;
    --cs-hero-to: #070c16;
    --cs-hero-text: #f3f4f6;
    --cs-hero-muted: #cbd5e1;

}