/* ── Nimble Mileage — Design Tokens ──────────────────────────────────────────
   All UI styling is anchored here. Update tokens here first; never hard-code
   colour, spacing, radius, or shadow values in component stylesheets.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
    /* Colour — brand */
    --nm-color-primary:       #1a56db;
    --nm-color-primary-hover: #1e429f;
    --nm-color-primary-text:  #ffffff;

    /* Colour — semantic */
    --nm-color-danger:        #e02424;
    --nm-color-danger-bg:     #fdf2f2;
    --nm-color-error:         #e02424;   /* alias for danger */
    --nm-color-warning:       #c27803;
    --nm-color-warning-bg:    #fdfdea;
    --nm-color-success:       #057a55;
    --nm-color-success-bg:    #f3faf7;
    --nm-color-info:          #1c64f2;
    --nm-color-info-bg:       #ebf5ff;

    /* Colour — background (alias for surface-muted) */
    --nm-color-bg:            #f9fafb;

    /* Colour — surface */
    --nm-color-surface:       #ffffff;
    --nm-color-surface-muted: #f9fafb;
    --nm-color-surface-hover: #f3f4f6;
    --nm-color-border:        #d1d5db;
    --nm-color-border-focus:  #1a56db;

    /* Colour — text */
    --nm-color-text:          #111827;
    --nm-color-text-muted:    #6b7280;
    --nm-color-text-disabled: #9ca3af;

    /* Typography */
    --nm-font-family:   system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --nm-font-size-xs:  0.75rem;
    --nm-font-size-sm:  0.875rem;
    --nm-font-size-md:  1rem;
    --nm-font-size-lg:  1.125rem;
    --nm-font-size-xl:  1.25rem;
    --nm-font-size-2xl: 1.5rem;
    --nm-line-height:   1.5;

    /* Spacing scale (4px base) */
    --nm-space-1:  0.25rem;
    --nm-space-2:  0.5rem;
    --nm-space-3:  0.75rem;
    --nm-space-4:  1rem;
    --nm-space-5:  1.25rem;
    --nm-space-6:  1.5rem;
    --nm-space-8:  2rem;
    --nm-space-10: 2.5rem;
    --nm-space-12: 3rem;
    --nm-space-16: 4rem;

    /* Border radius */
    --nm-radius-sm: 0.25rem;
    --nm-radius-md: 0.375rem;
    --nm-radius-lg: 0.5rem;
    --nm-radius-xl: 0.75rem;
    --nm-radius-full: 9999px;

    /* Shadows */
    --nm-shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
    --nm-shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --nm-shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* Focus ring — WCAG 2.2 visible focus */
    --nm-focus-ring: 0 0 0 3px rgb(26 86 219 / 0.4);

    /* Transition */
    --nm-transition-fast: 120ms ease;
    --nm-transition-base: 200ms ease;

    /* Layout */
    --nm-max-width: 1280px;
    --nm-sidebar-width: 240px;
    --nm-header-height: 56px;
}

/* ── Base reset ───────────────────────────────────────────────────────────── */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--nm-font-family);
    font-size: var(--nm-font-size-md);
    line-height: var(--nm-line-height);
    color: var(--nm-color-text);
    background-color: var(--nm-color-surface-muted);
    -webkit-font-smoothing: antialiased;
}

:focus-visible {
    outline: none;
    box-shadow: var(--nm-focus-ring);
}