/* =====================================================================
   ambulance/assets/css/theme.css
   Ambulance Portal design tokens. Quiet, formal slate-teal.
   Components consume only these tokens; page CSS never redefines them.
   ===================================================================== */

@font-face {
    font-family: 'Inter';
    src: local('Inter Regular'), local('Inter-Regular');
    /* Self-hosted file not shipped yet. Add assets/fonts/Inter-Regular.woff2 and swap in:
       src: url('../fonts/Inter-Regular.woff2') format('woff2'); */
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: local('Inter SemiBold'), local('Inter-SemiBold');
    /* Self-hosted file not shipped yet. Add assets/fonts/Inter-SemiBold.woff2 and swap in:
       src: url('../fonts/Inter-SemiBold.woff2') format('woff2'); */
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: local('Inter Bold'), local('Inter-Bold');
    /* Self-hosted file not shipped yet. Add assets/fonts/Inter-Bold.woff2 and swap in:
       src: url('../fonts/Inter-Bold.woff2') format('woff2'); */
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'DM Sans';
    src: local('DM Sans Regular'), local('DMSans-Regular');
    /* Self-hosted file not shipped yet. Add assets/fonts/DMSans-Regular.woff2 and swap in:
       src: url('../fonts/DMSans-Regular.woff2') format('woff2'); */
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'DM Sans';
    src: local('DM Sans Medium'), local('DMSans-Medium');
    /* Self-hosted file not shipped yet. Add assets/fonts/DMSans-Medium.woff2 and swap in:
       src: url('../fonts/DMSans-Medium.woff2') format('woff2'); */
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Primary scale — muted slate-teal */
    --color-primary-900: #0B1620;
    --color-primary-800: #11222F;
    --color-primary-700: #183244;
    --color-primary-600: #1F4257;
    --color-primary-500: #2A5670;
    --color-primary-400: #3F7391;
    --color-primary-300: #6F9BB5;
    --color-primary-200: #AEC6D5;
    --color-primary-100: #DCE7EE;
    --color-primary-50:  #F3F7F9;

    /* Semantic */
    --color-success-500: #3E8E7E;
    --color-success-100: #DDEDEA;
    --color-warning-500: #C8963A;
    --color-warning-100: #F6ECD9;
    --color-error-500:   #B5483F;
    --color-error-100:   #F5E1DF;
    --color-info-500:    #4A7FA8;
    --color-info-100:    #E1EBF3;

    /* Neutrals */
    --color-neutral-white: #FFFFFF;
    --color-neutral-50:  #F6F8FA;
    --color-neutral-100: #EDF1F4;
    --color-neutral-200: #DFE5EA;
    --color-neutral-300: #C7D0D7;
    --color-neutral-400: #A8B4BC;
    --color-neutral-500: #7A8791;
    --color-neutral-600: #5A6771;
    --color-neutral-700: #3D4952;
    --color-neutral-800: #26323A;
    --color-neutral-900: #121A20;

    --color-dark-bg-base: #0A1218;
    --color-dark-surface: #111C24;
    --color-dark-border:  #22313B;

    /* Roles */
    --color-bg-app: var(--color-neutral-50);
    --color-bg-surface: var(--color-neutral-white);
    --color-bg-subtle: var(--color-neutral-100);
    --color-border: var(--color-neutral-300);
    --color-border-soft: var(--color-neutral-200);
    --color-text-primary: var(--color-neutral-900);
    --color-text-secondary: var(--color-neutral-600);
    --color-text-placeholder: var(--color-neutral-500);
    --color-text-inverse: #FFFFFF;

    --brand: var(--color-primary-500);
    --brand-contrast: #FFFFFF;

    /* Map markers */
    --map-pickup: var(--color-success-500);
    --map-drop: #9E5A54;
    --map-stop: var(--color-warning-500);

    /* Gradients — single hue only */
    --gradient-hero: linear-gradient(135deg, var(--color-primary-900), var(--color-primary-600));
    --gradient-card-accent: linear-gradient(120deg, var(--color-primary-800), var(--color-primary-500));
    --gradient-sidebar: linear-gradient(180deg, var(--color-primary-900), var(--color-primary-800));

    /* Typography */
    --font-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'DM Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-size-display: 36px;
    --font-size-h1: 30px;
    --font-size-h2: 24px;
    --font-size-h3: 19px;
    --font-size-h4: 16px;
    --font-size-body: 15px;
    --font-size-caption: 13px;
    --font-size-label: 12px;
    --line-height-body: 1.5;
    --line-height-heading: 1.25;
    --font-weight-heading: 600;
    --font-weight-body: 400;

    /* Shape / elevation */
    --radius-8: 8px;
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-pill: 999px;
    --shadow-1: 0 1px 2px rgba(11, 22, 32, 0.07);
    --shadow-2: 0 6px 18px rgba(11, 22, 32, 0.10);
    --shadow-3: 0 18px 44px rgba(11, 22, 32, 0.16);

    /* Spacing */
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;

    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary-400) 40%, transparent);
    --touch-target: 48px;

    --color-success-text: #256A5C;
    --color-warning-text: #7A5A18;
    --color-error-text: #8C332C;
    --color-info-text: #2E5C7E;

    /* ---- Fixed "on dark" tokens --------------------------------------
       For text/borders that sit on surfaces which stay dark in BOTH themes
       (hero, sidebar, driver header). Never flip these with the theme. */
    --color-on-dark: #FFFFFF;
    --color-on-dark-muted: #DCE7EE;
    --color-on-dark-border: rgba(255, 255, 255, 0.55);
    --color-on-dark-hover: rgba(255, 255, 255, 0.14);

    /* ---- Theme-aware accent text -------------------------------------
       --color-link:         links / active nav / brand-coloured text
       --color-primary-text: text on primary-50/100 tints (chips, badges)
       head.php may override --color-link per brand colour so it always
       reaches 4.5:1 on the surface it is painted on. */
    --color-link: var(--color-primary-500);
    --color-link-hover: var(--color-primary-700);
    --color-primary-text: var(--color-primary-700);

    /* ---- Aliases used by portal.css / driver.css / dashboard.css -----
       These were referenced but never defined, so those pages always fell
       back to white surfaces. They now follow the theme. */
    --amb-surface: var(--color-bg-surface);
    --amb-surface-muted: var(--color-bg-subtle);
    --amb-border: var(--color-border-soft);
    --amb-muted: var(--color-text-secondary);
    --amb-brand: var(--brand);
    --amb-danger: var(--color-error-500);
    --amb-danger-text: var(--color-error-text);
    --amb-space-3: 12px;
    --color-surface: var(--color-bg-surface);
    --color-warning: var(--color-warning-text);
    --font-size-h5: 16px;
    --radius-md: 10px;
}

[data-theme="dark"] {
    --color-bg-app: var(--color-dark-bg-base);
    --color-bg-surface: var(--color-dark-surface);
    --color-bg-subtle: #16242E;
    --color-border: #3A4F5F;
    --color-border-soft: #1B2A35;
    --color-text-primary: #E6EDF1;
    --color-text-secondary: #A7B5BE;
    --color-text-placeholder: #7C8B95;
    --color-text-inverse: #0A1218;
    --brand-contrast: #FFFFFF;

    --color-primary-50: #10202B;
    --color-primary-100: #172C39;
    --color-primary-200: #24404F;
    --color-neutral-50: #0D161C;
    --color-neutral-100: #111D25;
    --color-neutral-200: #1B2A35;
    --color-neutral-300: #273844;
    --color-neutral-400: #41525E;

    --color-success-text: #7FD3C2;
    --color-warning-text: #E7C178;
    --color-error-text: #E9A39D;
    --color-info-text: #94BFDF;

    /* Tinted backgrounds must go dark too, otherwise the light *-text
       colours above end up light-on-light. */
    --color-success-100: #12302A;
    --color-warning-100: #33280F;
    --color-error-100:   #3A1A18;
    --color-info-100:    #142C3D;

    /* Accent text that stays readable on dark surfaces */
    --color-link: #8DB8D4;
    --color-link-hover: #B9D6E8;
    --color-primary-text: #A9CCE3;
    --amb-border: #2F4352;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.55);
    --shadow-3: 0 18px 44px rgba(0, 0, 0, 0.6);
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body.amb-body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    color: var(--color-text-primary);
    background: var(--color-bg-app);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-12);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-heading);
    color: var(--color-text-primary);
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }

p { margin: 0 0 var(--space-12); }

a {
    color: var(--color-link);
    text-decoration: none;
}
a:hover { color: var(--color-link-hover); }

img, svg, video { max-width: 100%; height: auto; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-8);
}

[hidden] { display: none !important; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}