/* ==========================================================================
   Planbord – design tokens, richting "Rustig" (5 oktober 2026)
   Bron voor tokens.css in de ui/-bibliotheek (stap 3a.2). De vormgever
   werkt deze waarden uit in het design system (stap D.4).

   Uitgangspunten (calm SaaS):
   - Vlakken zijn effen: geen glas, geen blur, geen verloop.
   - Hoeken alleen waar ze een functie hebben: bediening, zwevende lagen,
     en ronde vormen voor personen, stippen en kaartposities.
   - Schaduw alleen voor wat zweeft (menu, melding, sleepobject).
   - Eén accentkleur; status- en afdelingskleuren betekenen iets.
   - Nergens verdikte randen of gekleurde zijstrepen.

   Licht volgt de systeeminstelling; donker via prefers-color-scheme of
   data-theme="dark" op <html>.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Typografie: het systeemlettertype van het apparaat.
     Mac/iPad/iPhone: San Francisco · Windows: Segoe UI · elders: Inter */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Display", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;     /* basis UI */
  --text-lg: 14px;     /* koppen van panelen */
  --text-xl: 16px;
  --text-2xl: 20px;    /* titel in de inhoud */
  --text-3xl: 26px;    /* grote getallen (ETA) */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Ruimte (4-puntsraster) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Dichtheid: compact voor planners, normaal en aanraking voor iPad */
  --row-h: 30px;
  --row-h-compact: 26px;
  --row-h-touch: 44px;
  --control-h: 28px;
  --control-h-touch: 44px;

  /* Vorm: hoeken alleen waar ze een functie hebben */
  --radius-none: 0;        /* panelen, rijen, lijsten, banners, kaartvlak */
  --radius-mark: 2px;      /* tijdlijnbalken, meters, kleine markeringen */
  --radius-control: 4px;   /* knoppen, velden, segmenten, filterchips, sleepobject */
  --radius-overlay: 6px;   /* menu, popover, melding, zwevende kaartpanelen */
  --radius-round: 999px;   /* alleen avatar, statusstip, kaartpositie, schakelaar */

  /* Lijnen: altijd 1 px, nooit verdikt */
  --border: 1px;

  /* Beweging (respecteert prefers-reduced-motion) */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 120ms;
  --dur: 180ms;

  /* ---------- Kleur: licht ---------- */
  --bg: #f5f5f6;               /* venster (canvas) */
  --bg-elevated: #ffffff;      /* werkvlak */
  --bg-subtle: #f7f7f8;        /* navigatie, groepskoppen, onderrijen */
  --bg-sunken: #eeeef0;        /* invoervelden, sporen van meters */
  --bg-sidebar: #f7f7f8;
  --bg-overlay: #ffffff;       /* zwevende lagen: effen, met rand en schaduw */
  --bg-hover: rgba(0, 0, 0, .035);
  --bg-pressed: rgba(0, 0, 0, .06);

  --line: #e6e6e9;             /* haarlijn */
  --line-strong: #d3d3d8;      /* rand van bediening */

  --text: #1d1d1f;
  --text-2: #545458;           /* 7,5:1 op wit */
  --text-3: #6e6e73;           /* 5,1:1 op wit, nog AA */
  --text-on-accent: #ffffff;

  --accent: #0a66e4;           /* actie, selectie, focus, links */
  --accent-hover: #0858c7;
  --accent-soft: rgba(10, 102, 228, .09);
  --accent-softer: rgba(10, 102, 228, .05);
  --focus-ring: 0 0 0 2px var(--bg-elevated), 0 0 0 4px rgba(10, 102, 228, .55);

  /* Status = functionele data, spaarzaam */
  --ok: #178244;       --ok-soft: rgba(23, 130, 68, .09);
  --warn: #a65700;     --warn-soft: rgba(230, 140, 20, .12);
  --crit: #d92d20;     --crit-soft: rgba(217, 45, 32, .07);
  --live: #d92d20;     /* nu-lijn */
  --ai: #6a4fe0;       --ai-soft: rgba(106, 79, 224, .06);   /* voorstel, nooit een vulling van knoppen */

  /* Temperatuurbanden (De Jong): altijd met de tekst erbij, de kleur helpt alleen herkennen */
  --t-cold: #0b7590;   --t-cold-soft: rgba(11, 117, 144, .09);   /* 2–8 °C */
  --t-room: #9c3478;   --t-room-soft: rgba(156, 52, 120, .08);   /* 15–25 °C */

  /* Afdelingen (TRAFIEK_COLOR) – als zachte vulling van balken en als stip */
  --dept-export: #2f80ed;
  --dept-import: #0f9d8a;
  --dept-pakket: #e8890c;
  --dept-koel:   #2bb3d6;
  --dept-bouw:   #9b6b43;
  --dept-retail: #d6457a;
  --dept-charter:#7b61ff;
  --dept-overig: #8e8e93;

  /* Personen: gedempte tinten zodat collega's te onderscheiden zijn */
  --person-1: #6b7fb8; --person-2: #b88063; --person-3: #5f9a83; --person-4: #9a7bb0;

  /* Diepte: alleen voor wat zweeft */
  --shadow-overlay: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .10);
}

/* ---------- Kleur: donker ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141416;
    --bg-elevated: #1c1c1f;
    --bg-subtle: #19191c;
    --bg-sunken: #26262a;
    --bg-sidebar: #19191c;
    --bg-overlay: #232327;
    --bg-hover: rgba(255, 255, 255, .045);
    --bg-pressed: rgba(255, 255, 255, .08);
    --line: #2c2c31;
    --line-strong: #3a3a40;
    --text: #f2f2f4;
    --text-2: #b0b0b6;
    --text-3: #8e8e95;
    --accent: #3b8cff;
    --accent-hover: #5c9fff;
    --accent-soft: rgba(59, 140, 255, .16);
    --accent-softer: rgba(59, 140, 255, .09);
    --focus-ring: 0 0 0 2px var(--bg-elevated), 0 0 0 4px rgba(59, 140, 255, .6);
    --ok: #3ccf78;      --ok-soft: rgba(60, 207, 120, .12);
    --warn: #ffad33;    --warn-soft: rgba(255, 173, 51, .14);
    --crit: #ff6159;    --crit-soft: rgba(255, 97, 89, .11);
    --live: #ff6159;
    --ai: #9a85ff;      --ai-soft: rgba(154, 133, 255, .09);
    --t-cold: #5cc8e4;   --t-cold-soft: rgba(92, 200, 228, .12);
    --t-room: #e889c6;   --t-room-soft: rgba(232, 137, 198, .11);
    --dept-export: #5aa0ff;
    --dept-import: #2cc4ad;
    --dept-pakket: #ffa733;
    --dept-koel:   #4fcbea;
    --dept-bouw:   #c4956b;
    --dept-retail: #f06a9b;
    --dept-charter:#9c88ff;
    --dept-overig: #9a9aa1;
    --person-1: #7d90c8; --person-2: #c8917a; --person-3: #6fae95; --person-4: #ad8fc2;
    --shadow-overlay: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  --bg: #141416;
  --bg-elevated: #1c1c1f;
  --bg-subtle: #19191c;
  --bg-sunken: #26262a;
  --bg-sidebar: #19191c;
  --bg-overlay: #232327;
  --bg-hover: rgba(255, 255, 255, .045);
  --bg-pressed: rgba(255, 255, 255, .08);
  --line: #2c2c31;
  --line-strong: #3a3a40;
  --text: #f2f2f4;
  --text-2: #b0b0b6;
  --text-3: #8e8e95;
  --accent: #3b8cff;
  --accent-hover: #5c9fff;
  --accent-soft: rgba(59, 140, 255, .16);
  --accent-softer: rgba(59, 140, 255, .09);
  --focus-ring: 0 0 0 2px var(--bg-elevated), 0 0 0 4px rgba(59, 140, 255, .6);
  --ok: #3ccf78;      --ok-soft: rgba(60, 207, 120, .12);
  --warn: #ffad33;    --warn-soft: rgba(255, 173, 51, .14);
  --crit: #ff6159;    --crit-soft: rgba(255, 97, 89, .11);
  --live: #ff6159;
  --ai: #9a85ff;      --ai-soft: rgba(154, 133, 255, .09);
  --t-cold: #5cc8e4;   --t-cold-soft: rgba(92, 200, 228, .12);
  --t-room: #e889c6;   --t-room-soft: rgba(232, 137, 198, .11);
  --dept-export: #5aa0ff;
  --dept-import: #2cc4ad;
  --dept-pakket: #ffa733;
  --dept-koel:   #4fcbea;
  --dept-bouw:   #c4956b;
  --dept-retail: #f06a9b;
  --dept-charter:#9c88ff;
  --dept-overig: #9a9aa1;
  --person-1: #7d90c8; --person-2: #c8917a; --person-3: #6fae95; --person-4: #ad8fc2;
  --shadow-overlay: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .45);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; }
}