/* 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) sits on top of the M3 token layer above rather
   than replacing it: same brand hues, bolder shape/type/elevation treatment. Self-hosted
   (not a Google Fonts link - the CSP on this app doesn't allow third-party font CDNs). */
@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 (dashboard 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%);
    --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-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);
}