/* ============================================================
   Serso Gravel Team — Design tokens (functioneel plan §11.2–11.3)
   Dark mode is default; light mode via [data-theme="light"]
   ============================================================ */

:root {
  /* Merk (géén oranje) */
  --pine: #0d1f10;            /* near-black pine — app-achtergrond dark */
  --green-deep: #1c4f25;      /* Serso donkergroen — surfaces, kaarten, nav */
  --green-mid: #377530;       /* mid-groen — secundaire accenten, hover */
  --accent: #7fb529;          /* Serso lichtgroen — hét accent */
  --off-white: #e9f2e4;
  --off-white-2: #f6f8f4;

  /* Functioneel */
  --red: #d64545;             /* kalm rood — alerts/readiness laag */
  --amber: #e0a83c;           /* functionele waarschuwingszone */
  --blue: #4a90b8;            /* koel blauw — slaapdata */
  --grey-green: #6b7c69;      /* secundaire tekst */

  /* Semantisch — dark default */
  --bg: var(--pine);
  --bg-elev: #12291596;
  --surface: #14301a;
  --surface-2: #1c4f25;
  --surface-3: #235c2e;
  --card: #122b17;
  --card-border: rgba(127, 181, 41, 0.16);
  --card-border-strong: rgba(127, 181, 41, 0.35);
  --text: var(--off-white);
  --text-dim: #b7c9b0;
  --text-mute: #8fa38a;
  --text-faint: #849a80;        /* lichter dan --grey-green: 5,0:1 op --card (AA kleine tekst) */
  --accent-soft: rgba(127, 181, 41, 0.14);
  --accent-glow: rgba(127, 181, 41, 0.45);
  --red-soft: rgba(214, 69, 69, 0.15);
  --amber-soft: rgba(224, 168, 60, 0.15);
  --blue-soft: rgba(74, 144, 184, 0.15);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.28);
  --shadow-2: 0 8px 32px rgba(0, 0, 0, 0.45);
  --glass: rgba(13, 31, 16, 0.82);
  --chart-grid: rgba(233, 242, 228, 0.08);
  --chart-axis: rgba(233, 242, 228, 0.35);
  --nav-bg: rgba(13, 31, 16, 0.92);
  --input-bg: rgba(233, 242, 228, 0.06);
  --input-border: rgba(233, 242, 228, 0.14);

  /* Typografie */
  --font-head: "Montserrat", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --fs-base: 15px;

  /* Vorm & beweging */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 7px;
  --speed: 200ms;
  --ease: cubic-bezier(0.33, 1, 0.68, 1);

  /* Layout */
  --pad: 16px;
  --nav-h: 62px;
  --header-h: 56px;
  --sidebar-w: 232px;
  --maxw: 1280px;
}

[data-theme="light"] {
  /* Functionele kleuren herijkt voor tekst op wit (WCAG AA, §11.4):
     accent 5,7:1 · amber 5,6:1 · rood 5,6:1 · blauw 5,5:1 op #fff.
     --pine fungeert overal als 'inkt op accentvlak' (btn/seg/scale5/…):
     in light wordt het accentvlak donker, dus de inkt licht (5,3:1). */
  --pine: #f4f8ef;
  --accent: #4a7118;
  --red: #b93a3a;
  --amber: #8a5f0f;
  --blue: #2f6f96;
  --bg: var(--off-white-2);
  --bg-elev: #ffffffcc;
  --surface: #ffffff;
  --surface-2: #e7efe2;
  --surface-3: #dbe8d3;
  --card: #ffffff;
  --card-border: rgba(28, 79, 37, 0.14);
  --card-border-strong: rgba(28, 79, 37, 0.3);
  --text: #14301a;
  --text-dim: #33502f;
  --text-mute: #5b6f58;
  --text-faint: #5e6f5c;        /* donkerder dan --grey-green: 5,4:1 op wit */
  --accent-soft: rgba(127, 181, 41, 0.16);
  --accent-glow: rgba(74, 113, 24, 0.3);
  --shadow-1: 0 1px 2px rgba(20, 48, 26, 0.06), 0 4px 18px rgba(20, 48, 26, 0.08);
  --shadow-2: 0 10px 36px rgba(20, 48, 26, 0.14);
  --glass: rgba(246, 248, 244, 0.88);
  --chart-grid: rgba(20, 48, 26, 0.08);
  --chart-axis: rgba(20, 48, 26, 0.4);
  --nav-bg: rgba(246, 248, 244, 0.94);
  --input-bg: rgba(20, 48, 26, 0.04);
  --input-border: rgba(20, 48, 26, 0.16);
}