/* Fleetmonitor — design tokens
   Koelketen-palet: vries (ijsblauw) en vers (groen) zijn betekenisdragend.
   Statuskleuren zijn gereserveerd en worden nooit als 'gewone' accentkleur gebruikt. */

:root {
  color-scheme: light;

  /* vlakken */
  --page: #f4f7f6;
  --surface: #fcfdfd;
  --surface-2: #eef2f1;
  --border: rgba(15, 32, 28, 0.10);
  --border-strong: rgba(15, 32, 28, 0.18);

  /* inkt */
  --ink: #101614;
  --ink-2: #46504b;
  --ink-3: #67716c;

  /* koelketen — betekenisdragend */
  --vries: #2a78d6;
  --vries-bg: #e8f1fc;
  --vers: #007a00;
  --vers-bg: #e7f4e7;

  /* status — gereserveerd */
  --ok: #0ca30c;
  --warn: #a86f00;
  --warn-bg: #fdf3e0;
  --alarm: #d03b3b;
  --alarm-bg: #fbeaea;
  --offline: #76817b;
  --offline-bg: #eceeed;

  /* accent (interactie, links, focus) */
  --accent: #1c5cab;
  --accent-ink: #ffffff;

  /* kenteken-plaat */
  --plate-bg: #ffd800;
  --plate-ink: #14140a;
  --plate-band: #003399;

  /* maatvoering */
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --topbar-h: 56px;
  --tabbar-h: 58px;
  --shadow: 0 1px 2px rgba(15, 32, 28, 0.06), 0 4px 16px rgba(15, 32, 28, 0.05);
  --shadow-lift: 0 2px 6px rgba(15, 32, 28, 0.10), 0 12px 32px rgba(15, 32, 28, 0.12);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0d1110;
    --surface: #171c1a;
    --surface-2: #1f2523;
    --border: rgba(235, 245, 240, 0.10);
    --border-strong: rgba(235, 245, 240, 0.20);
    --ink: #f2f5f3;
    --ink-2: #bcc5c0;
    --ink-3: #97a19b;
    --vries: #5598e7;
    --vries-bg: #14243a;
    --vers: #2fae2f;
    --vers-bg: #12290f;
    --ok: #17b317;
    --warn: #e0a11c;
    --warn-bg: #33270e;
    --alarm: #e05252;
    --alarm-bg: #3a1414;
    --offline: #8a948e;
    --offline-bg: #23282a;
    --accent: #6da7ec;
    --accent-ink: #0d1110;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d1110;
  --surface: #171c1a;
  --surface-2: #1f2523;
  --border: rgba(235, 245, 240, 0.10);
  --border-strong: rgba(235, 245, 240, 0.20);
  --ink: #f2f5f3;
  --ink-2: #bcc5c0;
  --ink-3: #97a19b;
  --vries: #5598e7;
  --vries-bg: #14243a;
  --vers: #2fae2f;
  --vers-bg: #12290f;
  --ok: #17b317;
  --warn: #e0a11c;
  --warn-bg: #33270e;
  --alarm: #e05252;
  --alarm-bg: #3a1414;
  --offline: #8a948e;
  --offline-bg: #23282a;
  --accent: #6da7ec;
  --accent-ink: #0d1110;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.45);
}