/*
 * GSB dark theme — overrides the MAF tokens under [data-theme="dark"].
 * The framework's components all draw their surfaces from tokens (mostly
 * var(--maf-white)), so flipping the neutrals cascades automatically. White
 * is also used as *text* on coloured elements; those are re-asserted below.
 */

[data-theme="dark"] {
    /* Neutrals flipped to a dark navy scale */
    --maf-white: #18233b;        /* surfaces: cards, popup, dialog, topbar, datalist, inputs */
    --maf-grey-50: #111a2e;
    --maf-grey-100: #1d2a45;
    --maf-grey-200: #243350;
    --maf-grey-300: #2c3e60;
    --maf-grey-400: #4a5a78;
    --maf-grey-500: #6b7c99;
    --maf-grey-600: #9fb0cc;
    --maf-grey-700: #c2d0e6;

    /* Semantic */
    --maf-color-text: #e8eef7;
    --maf-color-text-subtle: #9fb0cc;
    --maf-color-page-bg: #0c1424;
    --maf-color-background: #111a2e;
    --maf-color-surface: #18233b;
    --maf-color-border: #2c3e60;
    --maf-color-disabled: #44506a;
    /* Brand primary/accent/info stay (readable on dark) */
}

/* base.css hardcodes the body + headings; override them for dark */
[data-theme="dark"] body {
    background-color: var(--maf-color-page-bg);
    color: var(--maf-color-text);
    background-image: none;
}
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 { color: var(--maf-color-text); }

/* topbar hardcodes navy text */
[data-theme="dark"] .maf-topbar,
[data-theme="dark"] .maf-topbar * { color: var(--maf-color-text); }

/* Re-assert white text where it sits on a coloured background */
[data-theme="dark"] .maf-button--primary,
[data-theme="dark"] .maf-button--secondary,
[data-theme="dark"] .maf-banner,
[data-theme="dark"] .maf-checkbox__icon,
[data-theme="dark"] .maf-datalist__column-checkbox svg,
[data-theme="dark"] .maf-multiselect__check,
[data-theme="dark"] .maf-snackbar { color: #ffffff; }

/* GSB app accents that hardcode brand blue -> use cyan on dark for contrast */
[data-theme="dark"] .gsb-nav .maf-button { color: var(--maf-color-text); }
[data-theme="dark"] .gsb-nav__btn--active { background: rgba(27, 181, 213, 0.16) !important; color: var(--maf-cyan) !important; }
[data-theme="dark"] .gsb-status-num,
[data-theme="dark"] .gsb-product-line { color: var(--maf-cyan); }
[data-theme="dark"] .gsb-notes .gsb-note { border-top-color: var(--maf-color-border); }
/* Stepper: idle dot/line use grey tokens that already flip; highlight the current step in cyan on dark */
[data-theme="dark"] .gsb-step.is-current .gsb-step__lbl { color: var(--maf-cyan); }
[data-theme="dark"] .gsb-step.is-current .gsb-step__dot { box-shadow: 0 0 0 4px rgba(27, 181, 213, 0.22); }