/*
 * Navigation App — Colour Configuration
 * ======================================
 * Edit the variables below to restyle the entire application.
 * All other CSS files (theme-colors.css, app-theme.css) and the
 * inline <style> in index.html reference these tokens via var().
 *
 * Material Design 3 role mapping:
 *   --color-primary        →  Primary / key action colour
 *   --color-bg             →  Background (page canvas)
 *   --color-surface        →  Surface (card / panel fill)
 *   --color-border         →  Outline / divider
 *   --color-text           →  On-Surface (body text)
 *   --color-muted          →  On-Surface-Variant (secondary text)
 *   --color-success        →  Tertiary / positive semantic
 *   --color-warning        →  Warning semantic
 *   --color-error          →  Error
 */

:root {
  /* Brand and topbar colours live in /branding/branding.css */

  /* ── Layout surfaces ─────────────────────────────── */
  --color-bg:              #F8FAFC;
  --color-surface:         #FFFFFF;
  --color-border:          #E2E8F0;
  --color-border-strong:   #CBD5E1;

  /* ── Typography ──────────────────────────────────── */
  --color-text:            #0F172A;
  --color-muted:           #64748B;

  /* ── Semantic states ─────────────────────────────── */
  --color-success:         #16A34A;
  --color-warning:         #D97706;
  --color-error:           #DC2626;
}

/* ── Helper tokens (light) ───────────────────────── */
:root {
  --on-primary:            #FFFFFF;      /* text on --color-primary */
  --hover:                 rgba(0, 0, 0, 0.06);
  --hover-soft:            rgba(0, 0, 0, 0.04);
  --live-row:              #E6F0FA;      /* a trip somebody is driving already */
  --live-row-hover:        #D9E8F7;
  --live-row-selected:     #D6E6F7;
  --gps-ok-bg:             #DCFCE7;
  --gps-bad-bg:            #FEE2E2;
  --confirm-fill:          rgba(255, 255, 255, 0.38);
  --map-bg:                #dfe6ee;
  color-scheme: light;
}

/* ── Dark mode: <html data-theme="dark"> (the sun / moon button next to the language picker) ─────────────
   Status colours (success / warning / error) stay as they are: they carry white text. The accent colours of the
   customer (--color-primary ...) get their dark variant in /branding/branding.css. */
html[data-theme="dark"] {
  --color-bg:              #0F172A;
  --color-surface:         #1E293B;
  --color-border:          #334155;
  --color-border-strong:   #475569;
  --color-text:            #F1F5F9;
  --color-muted:           #94A3B8;
  --hover:                 rgba(255, 255, 255, 0.10);
  --hover-soft:            rgba(255, 255, 255, 0.07);
  --live-row:              #1E3A5F;
  --live-row-hover:        #264B79;
  --live-row-selected:     #2B5686;
  --gps-ok-bg:             rgba(74, 222, 128, 0.14);
  --gps-bad-bg:            rgba(248, 113, 113, 0.16);
  --confirm-fill:          rgba(15, 23, 42, 0.28);
  --map-bg:                #1b2433;
  color-scheme: dark;
}