/* Material 3 token layer - the single source every page/component CSS file references
   instead of hand-picking its own rgba()/border-radius/box-shadow values (the root cause
   of the "sophomoric" look: kpi-tile.css, dealer-shell.css, search.css, etc. had each
   invented their own one-off "modern touch" independently). Built from the existing
   brand hues (navy primary, amber secondary - keep the brand, not a rebrand) plus a new
   teal tertiary accent, expanded into M3's container/on-container tonal pairs, a shape
   scale, and an elevation scale.

   Dark mode: MudThemeProvider swaps MudBlazor's own --mud-palette-* variables internally
   based on IsDarkMode, but doesn't expose a CSS selector this file can hook into for its
   OWN custom properties - so the layouts (MainLayout.razor/PublicLayout.razor) add a
   "dark-mode" class to their root element whenever _isDarkMode is true, and every M3
   token below is redefined under that class. */

/* Display face for KPI numbers and page headings - the "bold SaaS dashboard" pass
   (Stripe/Linear/Vercel-style confidence, first applied to SpotlightAutos.Admin then
   carried here for a consistent brand language across both portals) sits on top of the
   M3 token layer above rather than replacing it. Self-hosted (no third-party font CDN). */
@font-face {
    font-family: 'Sora';
    font-weight: 600;
    font-style: normal;
    src: url('/fonts/Sora-SemiBold.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Sora';
    font-weight: 700;
    font-style: normal;
    src: url('/fonts/Sora-Bold.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Sora';
    font-weight: 800;
    font-style: normal;
    src: url('/fonts/Sora-ExtraBold.ttf') format('truetype');
    font-display: swap;
}

:root {
    --font-display: 'Sora', var(--mud-typography-default-family, Roboto, sans-serif);

    /* Gradient hero band (app bar, public header, KPI accents) - navy-to-indigo, an
       analogous extension of the brand primary rather than a new hue. */
    --m3-gradient-hero: linear-gradient(135deg, #1E3A8A 0%, #4338CA 100%);

    /* A dedicated, deliberately low-purple gradient for full-width header bars (the public
       marketing header, the Dealer Portal app bar) - kept separate from --m3-gradient-hero
       because the SAME 135deg navy-to-indigo gradient reads very differently depending on
       how wide the element is: stretched across a full-width header it visibly sweeps into
       purple by the far edge (flagged directly as "purpley"), while compressed into the
       floating nav's compact pill shape the same gradient reads as solid navy. This token
       stays navy-to-navy so a full-width header matches what the floating nav already looks
       like, without changing the floating nav (or the header's own avatar circle, which
       both still use --m3-gradient-hero) at all. */
    --m3-gradient-header: linear-gradient(90deg, #1E3A8A 0%, #2547A0 100%);

    --m3-shadow-card: 0 1px 2px rgba(16, 21, 43, 0.05), 0 8px 20px rgba(16, 21, 43, 0.07);
    --m3-shadow-hero: 0 16px 40px rgba(30, 58, 138, 0.28);

    /* Color - tonal pairs. "Container" = light/desaturated tint for badges/chips/soft
       surfaces; "on-container" = the readable text/icon color for that container. */
    --m3-primary: #1E3A8A;
    --m3-on-primary: #FFFFFF;
    --m3-primary-container: #DCE4FA;
    --m3-on-primary-container: #0F2456;

    --m3-secondary: #F59E0B;
    --m3-on-secondary: #4A2E00;
    --m3-secondary-container: #FDECC8;
    --m3-on-secondary-container: #5C3D02;

    --m3-tertiary: #0D9488;
    --m3-on-tertiary: #FFFFFF;
    --m3-tertiary-container: #CCEAE4;
    --m3-on-tertiary-container: #0B4B41;

    --m3-error-container: #FBE2E2;
    --m3-on-error-container: #7F1D1D;

    /* Shape scale */
    --m3-shape-xs: 4px;
    --m3-shape-sm: 8px;
    --m3-shape-md: 12px;
    --m3-shape-lg: 16px;
    --m3-shape-xl: 28px;
    --m3-shape-full: 9999px;

    /* Elevation - soft, short shadows (M3 leans on tonal-surface shifts over heavy
       drop-shadows); --m3-surface-tint-N uses color-mix against MudBlazor's own
       reactive palette vars, so it adapts to dark mode automatically without a
       separate override below. */
    --m3-elevation-1: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
    --m3-elevation-2: 0 2px 6px rgba(15, 23, 42, 0.10), 0 1px 3px rgba(15, 23, 42, 0.08);
    --m3-elevation-3: 0 4px 10px rgba(15, 23, 42, 0.12), 0 2px 4px rgba(15, 23, 42, 0.08);
    --m3-surface-tint-1: color-mix(in srgb, var(--mud-palette-surface) 97%, var(--mud-palette-primary) 3%);
    --m3-surface-tint-2: color-mix(in srgb, var(--mud-palette-surface) 94%, var(--mud-palette-primary) 6%);
}

.dark-mode {
    --m3-gradient-hero: linear-gradient(135deg, #1B2560 0%, #33267A 100%);
    --m3-gradient-header: linear-gradient(90deg, #16204B 0%, #223875 100%);
    --m3-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.35);
    --m3-shadow-hero: 0 16px 40px rgba(0, 0, 0, 0.45);

    --m3-primary: #3B82F6;
    --m3-on-primary: #0B1A33;
    --m3-primary-container: #1D3A66;
    --m3-on-primary-container: #BFD7FF;

    --m3-secondary: #FBBF24;
    --m3-on-secondary: #3D2900;
    --m3-secondary-container: #4A3A0C;
    --m3-on-secondary-container: #FDE3A0;

    --m3-tertiary: #2DD4BF;
    --m3-on-tertiary: #032A25;
    --m3-tertiary-container: #0F3D36;
    --m3-on-tertiary-container: #8FE0D2;

    --m3-error-container: #4A1616;
    --m3-on-error-container: #FCA5A5;

    --m3-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --m3-elevation-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
    --m3-elevation-3: 0 4px 10px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
}