/* 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: #0c1322;
    --d-bg-deep: #070e1d;
    --d-surface: #191f2f;
    --d-surface-2: #222a3d;
    --d-line: #2e3545;
    --d-line-soft: #232a3a;

    /* Text */
    --d-text: #ffffff;
    --d-muted: #9fb1bc;
    --d-muted-dim: #6b7a86;

    /* Brand */
    --d-primary: #f83812;
    --d-primary-deep: #c42e0e;
    --d-primary-soft: #ff8a6e;
    --d-primary-glow: rgba(248, 56, 18, 0.18);

    /* Semantic */
    --d-amber: #ffae03;
    --d-success: #10b981;
    --d-success-soft: #34d8a3;
    --d-warning: #f59e0b;
    --d-warning-soft: #fbbf24;
    --d-error: #ef4444;
    --d-error-soft: #fca5a5;
    --d-info: #3b82f6;
    --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);
}

/* 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);
}