/* =====================================================================
   Dashboards: designtokens

   Dit is de ENIGE plek waar kleuren, letters, afstanden, afrondingen en
   beweging worden vastgelegd. Alle andere CSS en JavaScript gebruikt
   uitsluitend deze variabelen. Wijzig hier alleen iets als daar
   uitdrukkelijk om gevraagd wordt.

   Bronnen:
   - Stadstheater UI (het uiterlijk van de Tools-webapp, oktober 2026):
     nachtpaarse grond, doorschijnend paarse vlakken met een dunne witte rand,
     Inter voor tekst, Barlow Condensed in kapitalen voor koppen, oranje
     alleen voor de belangrijkste actie, focus en voortgang.
   - Design system "Stadstheater Zoetermeer" (huisstijlhandboek 2025).
   - Apple Human Interface Guidelines: 8-puntsraster, rustige vlakken,
     segmented control, schakelaar, kleur alleen met betekenis.

   Weergave: <html data-appearance="dark|light|auto">, gezet door
   public/shared/shell.js: de keuze van de kijker met de schakelaar in de
   kopbalk. Anders geldt appearance uit de config.js van het dashboard (of uit
   dashboards.js voor het overzicht). Donker is de standaard (Stadstheater UI).
   ===================================================================== */

@font-face {
  font-family: "Barlow Condensed";
  src: url("../../assets/fonts/barlow-condensed-latin-300-normal.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("../../assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Inter (OFL), variabel lettertype: alle diktes in één bestand. */
@font-face {
  font-family: "Inter";
  src: url("../../assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),
    url("../../assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Letters ---------- */
  /* Koppen: Barlow Condensed in kapitalen (huisstijl). */
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  /* Alle overige tekst, labels en cijfers: Inter (Stadstheater UI). */
  --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-features: "cv11", "ss01"; /* Inter: rechte 1 en open cijfers */

  --size-page-title: 2.5rem;      /* 40px, Barlow 600 kapitalen */
  --size-section-title: 1.75rem;  /* 28px, Barlow 600 kapitalen */
  --size-card-title: 1.25rem;     /* 20px, Barlow 600 kapitalen */
  --size-subtitle: 0.9375rem;     /* 15px, ondertitel onder een paginatitel */
  --size-figure: 2.25rem;         /* 36px, kerncijfer in een tegel */
  --size-figure-text: 1.75rem;    /* 28px, als het kerncijfer een naam is */
  --size-summary-figure: 1.625rem; /* 26px, cijfer in de samenvattingsstrook */
  --size-group-title: 1.0625rem;  /* 17px, Barlow 600 kapitalen: titel van een blok met doelen */
  --size-body: 0.875rem;          /* 14px */
  --size-caption: 0.8125rem;      /* 13px, ondertitels en toelichting */
  --size-label: 0.6875rem;        /* 11px, label (eyebrow): 600 in kapitalen */
  --size-chip: 0.75rem;           /* 12px, infoblokje (chip) */
  --size-control: 0.8125rem;      /* 13px, tabbladen (segmented control) */
  --size-button: 0.8125rem;       /* 13px, knoptekst */

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --tracking-title: 0.01em;       /* koppen in Barlow */
  --tracking-label: 0.08em;       /* labels in kapitalen */
  --tracking-control: 0;          /* tekst in de tabbladen */
  --leading-tight: 1.1;
  --leading-body: 1.5;

  /* ---------- Afstanden (8-puntsraster) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --page-max: 1280px;             /* breedte van de pagina inclusief de marges: 1200px inhoud op een groot scherm */
  --gutter: clamp(16px, 4vw, 40px);

  /* ---------- Maten van onderdelen ---------- */
  --size-app-bar: 56px;           /* hoogte van de kopbalk */
  --size-tap: 44px;               /* minimaal raakvlak voor een vinger (Apple HIG) */
  --size-toggle-width: 40px;      /* schakelaar voor de lichte weergave */
  --size-toggle-height: 24px;
  --size-toggle-thumb: 20px;      /* het knopje in de schakelaar */
  --size-button-height: 36px;     /* knoppen, zoals Vernieuwen */
  --size-chip-height: 22px;       /* hoogte van een infoblokje */
  --size-row: 42px;               /* minimale hoogte van een regel met een doel */
  --size-status: 20px;            /* statusrondje: behaald of aandacht nodig */
  --size-step: 6px;               /* hoogte van de vakjesbalk in de samenvattingsstrook */
  --size-step-gap: 3px;           /* ruimte tussen de vakjes */
  --size-line-chart: 150px;       /* hoogte van het vlak van een lijngrafiek */
  --size-line: 2px;               /* lijn in een lijngrafiek */
  --size-line-strong: 3px;        /* de eerste lijn (gerealiseerd): iets dikker */
  --size-dot: 8px;                /* stip bij de status in de kopbalk en op de laatste waarde van een lijn */
  --line-dash: 5 4;               /* streepjeslijn (begroot): streepje en tussenruimte */

  /* ---------- Afronding ---------- */
  --radius-card: 12px;      /* kaarten en tegels */
  --radius-control: 8px;    /* segmented control en tooltip */
  --radius-button: 8px;     /* knoppen en velden */
  --radius-mark: 4px;       /* uiteinde van balken in grafieken */
  --radius-tag: 6px;        /* infoblokjes (chips) */

  /* ---------- Beweging ---------- */
  /* Kort en met een reden (Apple HIG): een pagina bouwt zich op, balken groeien naar hun waarde.
     Met "beweging beperken" op het apparaat staat alles meteen stil (base.css en motion.js). */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* snel vertrekken, zacht landen */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* veert iets door, voor een statusrondje */
  --duration-fast: 150ms;         /* knoppen: kleur en indrukken */
  --duration: 200ms;              /* hover, kleur, schakelaar */
  --duration-slide: 280ms;        /* het gekozen tabblad schuift naar zijn plek */
  --duration-enter: 440ms;        /* strook en kaarten komen omhoog en worden zichtbaar */
  --duration-grow: 720ms;         /* balken groeien van 0 naar hun waarde */
  --duration-count: 720ms;        /* cijfers in de strook tellen op */
  --duration-pop: 360ms;          /* statusrondje verschijnt, het vinkje wordt getekend */
  --duration-reveal: 560ms;       /* wisselen tussen licht en donker: een cirkel vanuit de schakelaar */
  --stagger: 60ms;                /* tijd tussen twee kaarten */
  --stagger-row: 35ms;            /* tijd tussen twee regels in een kaart */
  --stagger-step: 40ms;           /* tijd tussen twee vakjes in de vakjesbalk */
  --rise: var(--space-3);         /* zo ver komt een kaart omhoog */

  /* ---------- Kleur: donker (Stadstheater UI) ---------- */
  color-scheme: dark;
  --color-bg: #221c42;               /* nacht: paginagrond */
  --color-bar: rgba(34, 28, 66, 0.8); /* doorschijnende kopbalk */
  --color-surface: rgba(41, 32, 90, 0.55); /* paars-diep op 55%: kaarten en vakken */
  --color-surface-raised: rgba(41, 32, 90, 0.8); /* tegel bij hover, regel in een tabel bij hover */
  --color-border: rgba(255, 255, 255, 0.07);       /* dunne rand om kaarten */
  --color-border-hover: rgba(255, 255, 255, 0.2);
  --color-line: rgba(255, 255, 255, 0.08);         /* haarlijnen tussen regels */
  --color-text: #ffffff;
  --color-text-secondary: #bbb4e4;   /* lila-licht: ondertitels en toelichting, 7,8:1 op surface */
  --color-label: #a29bcb;            /* dempen: labels in kapitalen, 5,9:1 op surface */
  --color-heading: #ffffff;
  --color-accent: #ed6e13;           /* oranje: belangrijkste actie, focus en voortgang */
  --color-accent-hover: #d77112;     /* oranje-donker */
  --color-on-accent: #ffffff;
  --color-tag: rgba(255, 255, 255, 0.07); /* infoblokje (chip) */
  --color-on-tag: #d6d4e2;           /* mist */
  --color-button: rgba(255, 255, 255, 0.06);       /* secundaire knop */
  --color-button-hover: rgba(255, 255, 255, 0.11);
  --color-button-border: rgba(255, 255, 255, 0.1);
  --color-button-border-hover: rgba(255, 255, 255, 0.18);
  --color-segment-track: rgba(255, 255, 255, 0.04);
  --color-segment-selected: rgba(255, 255, 255, 0.1);
  --color-segment-text: #bbb4e4;
  --color-segment-text-selected: #ffffff;
  --color-focus: #ed6e13;
  --shadow-focus: 0 0 0 3px rgba(237, 110, 19, 0.22); /* zachte oranje gloed om de focusrand */
  --color-selection: rgba(237, 110, 19, 0.4);      /* geselecteerde tekst */
  --color-tooltip-bg: #1a1534;       /* nacht-diep */
  --color-tooltip-text: #ffffff;
  --color-tooltip-muted: #bbb4e4;
  --shadow-tooltip: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.3); /* tegel die bij hover omhoog komt */
  --logo-dark-display: block;        /* wit logo */
  --logo-light-display: none;        /* paars logo */

  /* Gloed achter de pagina: oranje rechtsboven, roze links. Staat stil. */
  --color-glow-1: rgba(237, 110, 19, 0.1);
  --color-glow-2: rgba(200, 40, 110, 0.08);

  /* Status in de kopbalk: opgehaald, bezig of fout */
  --color-live: #3fc48a;             /* groen */
  --color-busy: #ed6e13;             /* oranje */
  --color-error: #f0524f;            /* rood */

  /* Schakelaar: oranje als hij aan staat (huisstijl: oranje voor actie) */
  --color-toggle-off: rgba(255, 255, 255, 0.2);
  --color-toggle-on: #ed6e13;
  --color-toggle-thumb: #ffffff;
  --color-toggle-icon: #221c42;
  --shadow-toggle: 0 1px 3px rgba(0, 0, 0, 0.3);

  /* Grafieken (gevalideerd met de dataviz-validator op #221c42; surface is paars-diep op 55% daarover) */
  --color-meter-fill: #ed6e13;
  --color-meter-track: rgba(255, 255, 255, 0.1);
  --color-data: #bdb6e0;             /* enkele reeks, 7,9:1 op surface */
  --color-series-1: #eae7f4;         /* seizoen 1 (meest recent, sterkst) */
  --color-series-2: #bdb6e0;
  --color-series-3: #9189bd;         /* medium-paars */
  --color-series-4: #6e65a6;         /* 3:1 op surface, waarden staan ook in de tabel */

  /* Status: alleen voor behaald en aandacht nodig, nooit voor reeksen in grafieken */
  --color-status-done: #3fc48a;      /* groen (Stadstheater UI), 6,9:1 op surface */
  --color-status-attention: #e5a009; /* geel (huisstijl), 6,8:1 op surface */
  --color-on-status: #221c42;        /* vinkje en uitroepteken in het statusrondje */
}

/* ---------- Kleur: licht ---------- */
:root[data-appearance="light"] {
  color-scheme: light;
  --color-bg: #f5f4fa;
  --color-bar: rgba(245, 244, 250, 0.82);
  --color-surface: #ffffff;
  --color-surface-raised: #f5f4fa;
  --color-border: rgba(34, 28, 66, 0.08);
  --color-border-hover: rgba(34, 28, 66, 0.2);
  --color-line: rgba(34, 28, 66, 0.1);
  --color-text: #221c42;
  --color-text-secondary: #5f5a7a;   /* 6,5:1 op wit */
  --color-label: #5f5a7a;
  --color-heading: #46398e;          /* basis-paars: titels op wit */
  --color-accent: #ed6e13;
  --color-accent-hover: #d77112;
  --color-on-accent: #ffffff;
  --color-tag: rgba(34, 28, 66, 0.06);
  --color-on-tag: #46398e;
  --color-button: #ffffff;
  --color-button-hover: #eae7f4;
  --color-button-border: rgba(34, 28, 66, 0.12);
  --color-button-border-hover: rgba(34, 28, 66, 0.22);
  --color-segment-track: rgba(34, 28, 66, 0.05);
  --color-segment-selected: #ffffff;
  --color-segment-text: #5f5a7a;
  --color-segment-text-selected: #221c42;
  --color-focus: #c2480a;
  --shadow-focus: 0 0 0 3px rgba(237, 110, 19, 0.22);
  --color-selection: rgba(237, 110, 19, 0.25);
  --color-tooltip-bg: #221c42;
  --color-tooltip-text: #ffffff;
  --color-tooltip-muted: #bbb4e4;
  --shadow-tooltip: 0 8px 24px rgba(34, 28, 66, 0.18);
  --shadow-hover: 0 20px 25px -5px rgba(34, 28, 66, 0.12);
  --logo-dark-display: none;
  --logo-light-display: block;

  --color-glow-1: rgba(237, 110, 19, 0.07);
  --color-glow-2: rgba(200, 40, 110, 0.05);

  --color-live: #248a3d;
  --color-busy: #c2480a;
  --color-error: #c93431;

  --color-toggle-off: rgba(34, 28, 66, 0.16);
  --color-toggle-on: #ed6e13;
  --color-toggle-thumb: #ffffff;
  --color-toggle-icon: #c2480a;
  --shadow-toggle: 0 1px 3px rgba(34, 28, 66, 0.25);

  --color-meter-fill: #ed6e13;
  --color-meter-track: #eae7f4;
  --color-data: #46398e;
  --color-series-1: #2c2558;
  --color-series-2: #46398e;
  --color-series-3: #7a70b8;
  --color-series-4: #a9a1d6;         /* 2,4:1 op wit, waarden staan ook in de tabel */

  --color-status-done: #248a3d;      /* 4,4:1 op wit */
  --color-status-attention: #b37800; /* 3,7:1 op wit */
  --color-on-status: #221c42;
}

/* "auto": volgt de instelling van het apparaat (Apple HIG). Zelfde waarden als licht. */
@media (prefers-color-scheme: light) {
  :root[data-appearance="auto"] {
    color-scheme: light;
    --color-bg: #f5f4fa;
    --color-bar: rgba(245, 244, 250, 0.82);
    --color-surface: #ffffff;
    --color-surface-raised: #f5f4fa;
    --color-border: rgba(34, 28, 66, 0.08);
    --color-border-hover: rgba(34, 28, 66, 0.2);
    --color-line: rgba(34, 28, 66, 0.1);
    --color-text: #221c42;
    --color-text-secondary: #5f5a7a;   /* 6,5:1 op wit */
    --color-label: #5f5a7a;
    --color-heading: #46398e;          /* basis-paars: titels op wit */
    --color-accent: #ed6e13;
    --color-accent-hover: #d77112;
    --color-on-accent: #ffffff;
    --color-tag: rgba(34, 28, 66, 0.06);
    --color-on-tag: #46398e;
    --color-button: #ffffff;
    --color-button-hover: #eae7f4;
    --color-button-border: rgba(34, 28, 66, 0.12);
    --color-button-border-hover: rgba(34, 28, 66, 0.22);
    --color-segment-track: rgba(34, 28, 66, 0.05);
    --color-segment-selected: #ffffff;
    --color-segment-text: #5f5a7a;
    --color-segment-text-selected: #221c42;
    --color-focus: #c2480a;
    --shadow-focus: 0 0 0 3px rgba(237, 110, 19, 0.22);
    --color-selection: rgba(237, 110, 19, 0.25);
    --color-tooltip-bg: #221c42;
    --color-tooltip-text: #ffffff;
    --color-tooltip-muted: #bbb4e4;
    --shadow-tooltip: 0 8px 24px rgba(34, 28, 66, 0.18);
    --shadow-hover: 0 20px 25px -5px rgba(34, 28, 66, 0.12);
    --logo-dark-display: none;
    --logo-light-display: block;

    --color-glow-1: rgba(237, 110, 19, 0.07);
    --color-glow-2: rgba(200, 40, 110, 0.05);

    --color-live: #248a3d;
    --color-busy: #c2480a;
    --color-error: #c93431;

    --color-toggle-off: rgba(34, 28, 66, 0.16);
    --color-toggle-on: #ed6e13;
    --color-toggle-thumb: #ffffff;
    --color-toggle-icon: #c2480a;
    --shadow-toggle: 0 1px 3px rgba(34, 28, 66, 0.25);

    --color-meter-fill: #ed6e13;
    --color-meter-track: #eae7f4;
    --color-data: #46398e;
    --color-series-1: #2c2558;
    --color-series-2: #46398e;
    --color-series-3: #7a70b8;
    --color-series-4: #a9a1d6;         /* 2,4:1 op wit, waarden staan ook in de tabel */

    --color-status-done: #248a3d;      /* 4,4:1 op wit */
    --color-status-attention: #b37800; /* 3,7:1 op wit */
    --color-on-status: #221c42;
  }
}