/* Driving UI design tokens — "A · Instrument Cluster" system.
   Tokens live at :root so they cascade into MudBlazor dialogs (rendered into a portal
   outside the .driving-layout subtree). The font-family override stays scoped to
   the driving layout (and `.driving-dialog`) so the rest of the app keeps Roboto. */

:root {
    /* Surface colors */
    --d-bg: var(--fv-bg);
    --d-bg-deep: var(--fv-bg-deep);
    --d-surface: var(--fv-surface);
    --d-surface-2: var(--fv-surface-2);
    --d-line: var(--fv-line);
    --d-line-soft: var(--fv-line-soft);

    /* Text */
    --d-text: var(--fv-text);
    --d-muted: var(--fv-muted);
    --d-muted-dim: var(--fv-muted-dim);

    /* Brand */
    --d-primary: var(--fv-primary);
    --d-on-primary: var(--fv-on-primary);
    --d-primary-deep: var(--fv-primary-deep);
    --d-primary-soft: var(--fv-primary-lite);
    --d-primary-glow: var(--fv-primary-glow);

    /* Semantic */
    --d-amber: var(--fv-amber);
    --d-success: var(--fv-success);
    --d-success-soft: #34d8a3;
    --d-warning: var(--fv-warning);
    --d-warning-soft: #fbbf24;
    --d-error: var(--fv-error);
    --d-error-soft: #fca5a5;
    --d-info: var(--fv-info);
    --d-info-soft: #93c5fd;

    /* Typography */
    --d-font-ui: 'Geist', 'Roboto', -apple-system, system-ui, sans-serif;
    --d-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', monospace;

    /* Radii */
    --d-r-sm: 8px;
    --d-r-md: 12px;
    --d-r-lg: 16px;
    --d-r-xl: 18px;
    --d-r-pill: 999px;
}

.driving-layout,
.driving-dialog {
    font-family: var(--d-font-ui);
    color: var(--d-text);
}

/* Eyebrow text — used across screens */
.d-eyebrow {
    font-family: var(--d-font-ui);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--d-muted-dim);
    letter-spacing: 0;
    text-transform: uppercase;
}

.d-mono {
    font-family: var(--d-font-mono);
    font-variant-numeric: tabular-nums;
}

/* Override MudBlazor surface colors to match tokens (driving scope only) */
.driving-layout .mud-paper,
.driving-dialog .mud-paper {
    background-color: var(--d-surface);
    border-color: var(--d-line-soft);
}

.driving-layout button,
.driving-layout [role="button"],
.driving-dialog button,
.driving-dialog [role="button"] {
    min-height: 44px;
}

.driving-dialog {
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

@media (orientation: landscape) and (max-height: 520px) {
    .driving-layout {
        overflow-y: auto;
    }
}

/* Reset MudBlazor body text inside driving — match Geist */
.driving-layout .mud-typography,
.driving-dialog .mud-typography,
.driving-dialog .mud-button,
.driving-dialog .mud-input {
    font-family: var(--d-font-ui);
}