/* ==========================================================================
   Drivra Mobility — design tokens
   Extracted verbatim from https://www.drivra.com.np/css/style.css on
   2026-09-25 (snapshot: design/source/style.css). Do not hand-tune values
   here — re-extract from the live site so internal tools and the marketing
   site stay one visual identity (PLAN.md §9).

   Editorial, flat, rule-driven. No blur, no gradients-as-decoration, no tilt.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/archivo-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
    U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* — colour — */
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-muted: color-mix(in srgb, var(--color-text) 58%, transparent);
  --color-faint: color-mix(in srgb, var(--color-text) 32%, transparent);
  --color-divider: color-mix(in srgb, var(--color-text) 16%, transparent);
  --color-divider-strong: color-mix(in srgb, var(--color-text) 78%, transparent);

  --color-accent: #0a6846;
  --color-accent-600: #085537;
  --color-accent-700: #063f28;
  --color-accent-100: #e8f3ee;

  /* Logo wordmark navy — sampled from /assets/logo.png, NOT used anywhere in
     the site's CSS. Reserved for the logo; don't promote it to a UI colour
     without a brand decision. */
  --color-brand-navy: #092942;

  /* — type — */
  --font: "Archivo", system-ui, sans-serif;

  /* fluid scale — tablet gets its own intermediate sizes, not a scaled-down desktop */
  --fs-display: clamp(2.75rem, 2.05rem + 3.1vw, 4.75rem);
  --fs-h1: clamp(2.25rem, 1.82rem + 1.9vw, 3.25rem);
  --fs-h2: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);
  --fs-poster: clamp(2rem, 1.45rem + 2.4vw, 3.5rem);
  --fs-numeral: clamp(2.5rem, 2.05rem + 2vw, 4rem);
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);

  /* — space — */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 64px;
  --space-16: 96px;

  --nav-pad: 18px 32px;
  --hero-pad: 64px 32px 56px;
  --section-pad: 88px 32px;

  /* — layout — */
  --content-max: 1280px;
  --measure: 620px;

  /* — shape — deliberately near-flat */
  --radius: 2px;

  /* — motion — */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 1024px) {
  :root {
    --hero-pad: 48px 28px 44px;
    --section-pad: 64px 28px;
  }
}

@media (max-width: 640px) {
  :root {
    --nav-pad: 14px 20px;
    --hero-pad: 36px 20px 32px;
    --section-pad: 48px 20px;
  }
}

/* ==========================================================================
   Functional extensions — NOT from the marketing site.
   The site has no tables, forms, statuses or charts; internal tools need
   them. Every value below is chosen to sit inside the brand (warm ink on
   paper, one green, flat) and is contrast-checked against --color-bg.
   See SYSTEM.md §0 for the reasoning. Change these deliberately, not ad hoc.
   ========================================================================== */

:root {
  /* — ink for data. --color-faint (~2.2:1) fails text contrast: it is for
       decorative indices only, never for a value a user must read. — */
  --color-ink-secondary: #6d6a69; /* solid twin of --color-muted, 4.8:1 */

  /* — status: text/icon colour + tint fill. All ≥ 5.1:1 on bg and on their
       own tint. ALWAYS paired with an icon/shape + a word; never colour alone. — */
  --status-good: #0a6846;
  --status-good-tint: #e8f3ee;
  --status-warning: #8a5300;
  --status-warning-tint: #f6ecd9;
  --status-serious: #a3441a;
  --status-serious-tint: #f7e8e0;
  --status-critical: #b3261e;
  --status-critical-tint: #f7e4e2;
  --status-neutral: #201e1d;
  --status-neutral-tint: #eae9e9;

  /* — data viz. Single series + sequential magnitude use the brand green.
       Multi-series categorical uses the validated 8-slot order below: the
       brand green itself fails the categorical chroma floor (reads grey
       beside saturated hues), so it is NOT a categorical slot. Assign in
       order, never cycle; a 9th series folds into "Other". Slots 2, 3, 4, 5
       are under 3:1 on bg → direct labels or the table view are mandatory. — */
  --viz-single: #0a6846;
  --viz-1: #2a78d6;
  --viz-2: #eb6834;
  --viz-3: #1baf7a;
  --viz-4: #eda100;
  --viz-5: #e87ba4;
  --viz-6: #008300;
  --viz-7: #4a3aa7;
  --viz-8: #e34948;
  --viz-other: #a9a6a4;
  /* sequential (magnitude), light → dark. For ordinal marks start at step 3 (≥2:1). */
  --viz-seq-1: #cfe6da;
  --viz-seq-2: #9fcbb4;
  --viz-seq-3: #6aae8d;
  --viz-seq-4: #3a8f69;
  --viz-seq-5: #0a6846;
  --viz-seq-6: #085537;
  --viz-seq-7: #063f28;
  --viz-grid: color-mix(in srgb, var(--color-text) 10%, transparent);
  --viz-axis: color-mix(in srgb, var(--color-text) 40%, transparent);

  /* — controls — */
  --control-h: 36px;
  --control-h-sm: 28px;
  --control-pad-x: 12px;
  --control-border: color-mix(in srgb, var(--color-text) 52%, transparent); /* ≥3:1 non-text contrast */
  --control-bg: #fbfbfa;
  --hit-min: 24px; /* WCAG 2.2 target size floor; prefer --control-h */

  /* — app shell — */
  --shell-nav-w: 232px;
  --shell-top-h: 56px;
  --row-h: 44px;
  --row-h-compact: 34px;

  /* — layering (only these values, ever) — */
  --z-sticky: 10;
  --z-dropdown: 50;
  --z-drawer: 80;
  --z-dialog: 90;
  --z-toast: 100;
  --z-tooltip: 110;

  --shadow-overlay: 0 12px 28px rgba(15, 12, 10, 0.08); /* the site's menu shadow, reused for all overlays */
  --scrim: rgba(32, 30, 29, 0.36);

  /* — text on a filled surface. Never hardcode #fff on a fill: in dark the
       accent/critical fills are bright, so their text must go dark. — */
  --color-on-accent: #fff;
  --color-on-status: #fff;
}

/* ==========================================================================
   Dark mode — added 2026-09-26 so design/ is the source of truth for BOTH
   themes (internal tools need it; the marketing site doesn't have one).
   Values are gps's already-validated dark palette, mapped onto design/'s
   token names. Every text/status value checked ≥4.5:1 against --color-bg
   AND --color-surface (dataviz skill validator, contrast()). Neutrals that
   are color-mix()es of --color-text (muted/faint/divider/control-border/
   viz-grid/axis) adapt automatically and are not redefined here.
   Opt-in by OS preference, or force with <html data-theme="dark|light">.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #0d0d0d;
    --color-surface: #1a1a19;
    --color-text: #f3f2f2; /* 17.4:1 */
    --color-ink-secondary: #c3c2b7; /* 10.9:1 */
    --color-accent: #2fb583; /* 7.5:1 as a mark; fills take --color-on-accent */
    --color-accent-600: #3fc794;
    --color-accent-700: #5fd3a5; /* the "stronger" step reads LIGHTER on dark — links, current nav */
    --color-accent-100: rgba(47, 181, 131, 0.14);
    --color-on-accent: #0d0d0d; /* 7.5:1 on accent, 10.5:1 on accent-700 */
    --color-on-status: #0d0d0d; /* 5.2:1 on critical */
    --status-good: #2fb583;
    --status-good-tint: rgba(47, 181, 131, 0.14);
    --status-warning: #d99a1e;
    --status-warning-tint: rgba(217, 154, 30, 0.14);
    --status-serious: #e2733f;
    --status-serious-tint: rgba(226, 115, 63, 0.14);
    --status-critical: #e0574c;
    --status-critical-tint: rgba(224, 87, 76, 0.16);
    --status-neutral: #f3f2f2;
    --status-neutral-tint: #1a1a19;
    --viz-single: #2fb583;
    --viz-1: #3987e5;
    --viz-2: #d95926;
    --viz-3: #199e70;
    --viz-4: #c98500;
    --viz-5: #b9376a;
    --viz-6: #3fa33f;
    --viz-7: #9085e9;
    --viz-8: #e0574c;
    --viz-other: #6d6a69;
    --viz-seq-1: #10271d;
    --viz-seq-2: #164a36;
    --viz-seq-3: #1f6b4d;
    --viz-seq-4: #2a8c64;
    --viz-seq-5: #2fb583;
    --viz-seq-6: #5fd3a5;
    --viz-seq-7: #9be6c6;
    --control-bg: #141413;
    --shadow-overlay: 0 12px 28px rgba(0, 0, 0, 0.5);
    --scrim: rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0d0d0d;
  --color-surface: #1a1a19;
  --color-text: #f3f2f2;
  --color-ink-secondary: #c3c2b7;
  --color-accent: #2fb583;
  --color-accent-600: #3fc794;
  --color-accent-700: #5fd3a5;
  --color-accent-100: rgba(47, 181, 131, 0.14);
  --color-on-accent: #0d0d0d;
  --color-on-status: #0d0d0d;
  --status-good: #2fb583;
  --status-good-tint: rgba(47, 181, 131, 0.14);
  --status-warning: #d99a1e;
  --status-warning-tint: rgba(217, 154, 30, 0.14);
  --status-serious: #e2733f;
  --status-serious-tint: rgba(226, 115, 63, 0.14);
  --status-critical: #e0574c;
  --status-critical-tint: rgba(224, 87, 76, 0.16);
  --status-neutral: #f3f2f2;
  --status-neutral-tint: #1a1a19;
  --viz-single: #2fb583;
  --viz-1: #3987e5;
  --viz-2: #d95926;
  --viz-3: #199e70;
  --viz-4: #c98500;
  --viz-5: #b9376a;
  --viz-6: #3fa33f;
  --viz-7: #9085e9;
  --viz-8: #e0574c;
  --viz-other: #6d6a69;
  --viz-seq-1: #10271d;
  --viz-seq-2: #164a36;
  --viz-seq-3: #1f6b4d;
  --viz-seq-4: #2a8c64;
  --viz-seq-5: #2fb583;
  --viz-seq-6: #5fd3a5;
  --viz-seq-7: #9be6c6;
  --control-bg: #141413;
  --shadow-overlay: 0 12px 28px rgba(0, 0, 0, 0.5);
  --scrim: rgba(0, 0, 0, 0.6);
}