/* Dealer portal design tokens - dark only (the light/dark switch was removed in the 2026-10
   redesign). Two layers:
     --sa-*   the new design language (navy canvas, action blue, amber "spotlight" accent).
              Keep in step with Helpers/DealerPortalTheme.cs, which feeds the same colours to
              MudBlazor's own palette.
     --m3-*   the OLD token names, kept (re-pointed at the new dark values) because the pages
              not yet redone - chat, my listings, account, etc. - still read them. Nothing new
              should use these; they exist so those pages follow the new look for free. */

@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 {
    color-scheme: dark;

    /* ---- type ---- */
    --font-display: 'Sora', 'Figtree', system-ui, sans-serif;
    --font-body: 'Figtree', system-ui, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

    /* ---- colour ---- */
    --sa-bg: #0A1226;
    --sa-surface: #111B36;
    --sa-surface-2: #16224A;
    --sa-line: #26365F;
    --sa-line-soft: rgba(38, 54, 95, 0.6);
    --sa-ink: #EAF0FF;
    --sa-ink-2: #A3B1D6;
    --sa-ink-3: #8A99C0;
    --sa-chrome: #060D20;
    --sa-primary: #6FA0FF;
    --sa-primary-hover: #8DB4FF;
    --sa-on-primary: #07142F;
    --sa-primary-soft: #1A2D5C;
    --sa-primary-ink: #B5CBFF;
    --sa-amber: #FFC24B;
    --sa-amber-hover: #FFD27A;
    --sa-on-amber: #1B1303;
    --sa-ok-bg: #0F2E22;
    --sa-ok-ink: #5BE19A;
    --sa-warn-bg: #3A2A08;
    --sa-warn-ink: #FFC96B;
    --sa-bad-bg: #3A1420;
    --sa-bad-ink: #FF93A3;
    --sa-img-a: #22305E;
    --sa-img-b: #16224A;
    --sa-img-ink: #4C609F;

    /* ---- shape / depth ---- */
    --sa-radius-sm: 8px;
    --sa-radius-md: 12px;
    --sa-radius-lg: 16px;
    --sa-radius-xl: 24px;
    --sa-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px -14px rgba(0, 0, 0, 0.6);
    --sa-header-h: 68px;
    --sa-tabbar-h: 68px;

    /* ---- legacy --m3-* names (see header comment) ---- */
    --m3-gradient-hero: linear-gradient(135deg, #16204B 0%, #1F3A8A 100%);
    --m3-gradient-header: linear-gradient(90deg, #060D20 0%, #0B1B45 100%);
    --m3-shadow-card: var(--sa-shadow);
    --m3-shadow-hero: 0 16px 40px rgba(0, 0, 0, 0.45);

    --m3-primary: var(--sa-primary);
    --m3-on-primary: var(--sa-on-primary);
    --m3-primary-container: var(--sa-primary-soft);
    --m3-on-primary-container: var(--sa-primary-ink);

    --m3-secondary: var(--sa-amber);
    --m3-on-secondary: var(--sa-on-amber);
    --m3-secondary-container: var(--sa-warn-bg);
    --m3-on-secondary-container: var(--sa-warn-ink);

    --m3-tertiary: var(--sa-ok-ink);
    --m3-on-tertiary: #032A25;
    --m3-tertiary-container: var(--sa-ok-bg);
    --m3-on-tertiary-container: var(--sa-ok-ink);

    --m3-error-container: var(--sa-bad-bg);
    --m3-on-error-container: var(--sa-bad-ink);

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

    --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);
    --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%);
}