/* ---------------------------------------------------------------------
   Design tokens — the ONLY place colour, radius, type and spacing values
   live. Everything first-party reads --mw-* (never --mud-palette-*) so
   static-SSR pages (Login/Signup/…) don't depend on MudThemeProvider
   having rendered its variables. MailWarrenTheme.cs mirrors these values
   into the MudTheme (light AND dark palettes) so MudBlazor widgets match.

   THEMES. Light is the default set below. Dark overrides the colour tokens
   under :root[data-theme="dark"]. The attribute is set on <html> by:
     - the server, when the visitor's "mw-theme" cookie is explicitly light/dark (first paint, no flash);
     - an inline script in App.razor's <head>, which also resolves "system" (follow the device) via
       prefers-color-scheme before anything paints;
     - wwwroot/js/session.js, when the visitor uses the theme switch or the device setting changes.
   Because "system" is always resolved to an explicit light/dark by that script, dark values live in ONE place
   here — no duplicated @media block. Keep the two sets in sync when adding a token.
   --------------------------------------------------------------------- */
:root {
    color-scheme: light;

    --mw-bg: #F6F7F9;
    --mw-surface: #FFFFFF;
    --mw-surface-2: #FAFBFC;
    --mw-border: #E2E5EA;
    --mw-border-strong: #CBD1D9;

    --mw-text: #111827;
    --mw-text-2: #4B5563;
    --mw-muted: #6B7280;
    --mw-disabled: #9CA3AF;

    /* --mw-primary is a FILL (buttons, active nav pill; white text sits on it). --mw-primary-text is the same
       blue as TEXT/ICON colour (links, brand, active tab) — identical in light, lighter in dark for contrast. */
    --mw-primary: #3466D6;
    --mw-primary-hover: #2B57BC;
    --mw-primary-text: #3466D6;
    --mw-primary-soft: #EAF0FC;
    --mw-primary-ring: rgba(52, 102, 214, .28);

    --mw-success: #15803D;
    --mw-success-soft: #E7F6EC;
    --mw-warning: #B45309;
    --mw-warning-soft: #FEF3E2;
    --mw-danger: #C62828;
    --mw-danger-soft: #FDECEC;

    /* Alert/banner tones: hairline border + strong ink on the soft fill. */
    --mw-info-border: #CFDDF7;
    --mw-info-ink: #1E3E86;
    --mw-ok-border: #BFE3CB;
    --mw-ok-ink: #0F5A2B;
    --mw-warn-border: #F5D9A8;
    --mw-warn-ink: #7A3A06;
    --mw-bad-border: #F1C4C4;
    --mw-bad-ink: #8E1C1C;

    /* Interaction + utility surfaces */
    --mw-hover: #F1F3F6;
    --mw-hover-soft: #F4F6F9;
    --mw-track: #EEF0F3;
    --mw-input-bg: #FFFFFF;
    --mw-glass: rgba(255, 255, 255, .9);
    --mw-overlay: rgba(17, 24, 39, .42);

    --mw-radius: 10px;
    --mw-radius-sm: 6px;
    --mw-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    --mw-shadow-pop: 0 12px 32px -8px rgba(16, 24, 40, .22), 0 2px 6px rgba(16, 24, 40, .08);

    --mw-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mw-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

    --mw-sidebar-w: 220px;
    --mw-topbar-h: 54px;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --mw-bg: #0F1319;
    --mw-surface: #171C24;
    --mw-surface-2: #1C222C;
    --mw-border: #2A313C;
    --mw-border-strong: #3B4453;

    --mw-text: #E7EBF1;
    --mw-text-2: #B7BFCC;
    --mw-muted: #8C97A8;
    --mw-disabled: #6C7686;

    --mw-primary: #3466D6;
    --mw-primary-hover: #3D70E0;
    --mw-primary-text: #82A6F7;
    --mw-primary-soft: #1A2842;
    --mw-primary-ring: rgba(96, 140, 240, .4);

    --mw-success: #4ADE80;
    --mw-success-soft: #12261A;
    --mw-warning: #FBBF24;
    --mw-warning-soft: #2D2210;
    --mw-danger: #F87171;
    --mw-danger-soft: #2E1618;

    --mw-info-border: #2B4270;
    --mw-info-ink: #B7CBFA;
    --mw-ok-border: #1F4A31;
    --mw-ok-ink: #86E0AA;
    --mw-warn-border: #5A4218;
    --mw-warn-ink: #F3C77C;
    --mw-bad-border: #5A2A2D;
    --mw-bad-ink: #F5A3A3;

    --mw-hover: #222A36;
    --mw-hover-soft: #1F2630;
    --mw-track: #2A313C;
    --mw-input-bg: #12171E;
    --mw-glass: rgba(23, 28, 36, .88);
    --mw-overlay: rgba(0, 0, 0, .6);

    --mw-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --mw-shadow-pop: 0 12px 32px -8px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4);
}