/* Designify Paneel: tokens. De enige plek met kleuren, fonts, radii en spacing.
   Make it Flow, richting Moss. Bron: Figma "Studio rebranding" (Qi8zVgdD9xU2evDi2Cd1h3),
   collectie Richting, mode Moss. Licht is de basis. Donker (bijna-zwart) volgt het systeem,
   of wordt gekozen met data-theme="dark" / "light" op <html>. */

/* Fonts: Geist zelf gehost (zoals de website). Geen Google Fonts. */
@font-face { font-family: "Geist"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/Geist-Light.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Geist-Regular.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/Geist-Medium.woff2") format("woff2"); }

:root {
  /* Kleuren */
  --bg: #FFFFFF;            /* surface-white: kaarten, werkvlak */
  --bg-2: #F3F2EE;          /* bg-light (gebroken wit): sidebar, activity bar, kolommen */
  --bg-3: #E8E7E1;          /* hover, actief: bg-light een stap dieper */
  --bg-tint: #D8EDE4;       /* moss-100: secundaire achtergrond voor blokken, tegels en panelen */
  --fg-on-tint: #2F6F5E;    /* lopende tekst en labels op de tint (titels blijven --fg) */
  /* Zachte versie van de tint: je ziet het verloop amper. De echte gradient blijft voor paginaachtergronden. */
  --tint-fill: radial-gradient(70% 90% at 12% 8%, rgb(255 255 255 / 55%), rgb(255 255 255 / 0) 60%), radial-gradient(60% 80% at 100% 100%, rgb(155 196 178 / 35%), rgb(155 196 178 / 0) 70%), linear-gradient(135deg, #E1F1EA 0%, #D8EDE4 50%, #CFE6DC 100%);
  /* Glas op licht (zoals de website): wit 45% met blur 12, de Moss-lichtval schijnt erdoorheen */
  --glass-light: rgb(255 255 255 / 45%);
  --glass-light-blur: 12px;
  --fg: #0C0F0E;            /* text-on-light */
  --fg-2: #6C716E;          /* text-muted-on-light */
  --fg-3: #A3A7A4;          /* tertiair: tussen muted en lijn */
  --line: rgb(0 0 0 / 12%); /* line-on-light, alleen functioneel */
  --accent: #4F8C78;        /* moss-500 (website): primaire knop, focus, selectie, links */
  --accent-hover: #2F6F5E;  /* moss-600 */
  --accent-bg: rgba(79, 140, 120, 0.12);
  --on-accent: #FFFFFF;
  --accent-fill: var(--accent);   /* vlak, zoals de knoppen; gebruikt door Finance */

  /* Status: nooit blauw */
  --ok: #2FBF71;
  --warn: #E8C547;
  --bad: #E5484D;
  --info: #7A5AF8;
  --muted: #A6A6A6;
  --on-status: #FFFFFF;
  --white: #FFFFFF;         /* altijd wit, ook in donker (QR-code, carrouselknoppen) */
  --black: #000000;         /* puur zwart: videovlak en maskers, ook in donker */
  --ink: #0C0F0E;           /* altijd bijna-zwart, ook in donker */
  /* Localhost-balk: vast geel, los van licht en donker */
  --local-bg: #FACC15;
  --local-fg: #111111;
  --local-fg-2: #333333;
  --local-fg-3: #4B4B4B;
  --on-warn: var(--ink);    /* tekst op de gele balk */
  --react-like: #378FE9;    /* reactiekleuren in de postpreview, zoals op het kanaal */
  --react-love: #DF704D;
  /* Statustekst op lichte achtergrond: geel is als tekst te licht */
  --warn-fg: #9A7B0C;
  --ok-fg: #1E8A51;

  /* Scoreboard: medailles voor plek 1 t/m 3, in licht en donker gelijk */
  --medal-1: #E8C547;
  --medal-2: #C9CBD3;
  --medal-3: #D29A6A;
  --on-medal: #0C0F0E;

  /* Zwevende lagen */
  /* Kaarten op het bord: zachte schaduw in plaats van een rand */
  --shadow-card: 0 1px 2px rgba(12, 15, 14, 0.06), 0 1px 1px rgba(12, 15, 14, 0.04);
  --shadow-card-hover: 0 8px 24px rgba(12, 15, 14, 0.10), 0 2px 6px rgba(12, 15, 14, 0.06);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --shadow-float: 0 12px 32px rgba(12, 15, 14, 0.16), 0 2px 6px rgba(12, 15, 14, 0.08);
  --backdrop: rgba(12, 15, 14, 0.32);

  /* Verloop en glas: alleen op de achtergrond van base_focus (login, lege klantomgeving).
     Het Moss-verloop (achtergrond v3) met grain als bovenste laag; tekst staat er altijd boven.
     Vier tinten: flow-lightest #D8EDE4, flow-light #8FC2B0, flow-mid #4E8E7E, flow-deep #1E4F4B. */
  /* Groot groen vlak (klantweergave, kop van de startpagina): de liggende zijde v3 van de website */
  --zijde-v3: image-set(url("../img/zijde/zijde-v3.avif") type("image/avif"), url("../img/zijde/zijde-v3.webp") type("image/webp"));
  --gradient: var(--zijde-v3) center / cover no-repeat, #6E9F8E;
  /* Glas zoals op de website: één waarde, wit 9 tot 14%, blur 10, geen rand, geen ring, geen schaduw */
  --glass: linear-gradient(140deg, rgb(255 255 255 / 14%) 0%, rgb(255 255 255 / 10%) 40%, rgb(255 255 255 / 9%) 70%, rgb(255 255 255 / 12%) 100%);
  --glass-blur: 10px;
  /* Menu: het verloop van de website (gradient-flow, moss-350 > moss-500 > moss-650) met grain. Ook het menu van Finance. */
  /* Zijde zoals op de website (makeitflow-site, tokens.css): elk groen vlak de echte zijde, nooit een vlakke CSS-verloop.
     Staand beeld voor de zijbalk, liggend voor kopvlakken; --zijde-base is de gemiddelde kleur zolang het beeld laadt. */
  --zijde-base: #6E9F8E;
  --zijde-v3-st: image-set(url("../img/zijde/zijde-v3-staand.avif") type("image/avif"), url("../img/zijde/zijde-v3-staand.webp") type("image/webp"));
  --zijde-v2: image-set(url("../img/zijde/zijde-v2.avif") type("image/avif"), url("../img/zijde/zijde-v2.webp") type("image/webp"));
  --gradient-menu: var(--zijde-v3-st) left top / auto 100vh no-repeat, var(--zijde-base);
  --gradient-hero: var(--zijde-v2) center / cover no-repeat, var(--zijde-base);
  --ease-flow: cubic-bezier(0.22, 1, 0.36, 1);   /* zoals de website */
  --menu-hover-bg: rgb(255 255 255 / 10%);     /* groen menu: hover */
  --menu-group-bg: rgb(255 255 255 / 8%);      /* groen menu: dienst waar je in zit (LinkedIn) */
  --menu-thread: rgb(255 255 255 / 60%);       /* groen menu: draad van dienst naar onderdeel */
  --menu-active-bg: rgb(255 255 255 / 18%);    /* groen menu: actief onderdeel, glas in plaats van een witte pil */
  --shadow-preview: 0 0 0 1px rgb(12 15 14 / 4%), 0 2px 6px rgb(12 15 14 / 6%), 0 12px 32px rgb(12 15 14 / 10%);   /* schaduw rondom, zoals de kaarten op de website */
  --on-gradient: #FFFFFF;
  --on-gradient-2: #FFFFFF;             /* tekst op kleur altijd volledig wit, nooit op lagere dekking */

  /* Fonts */
  --font-base: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font: var(--font-base);
  --font-display: var(--font-base);
  --mono: var(--font-base);   /* labels, tijden en nummers in Geist zoals op de website (Geist Mono wordt niet geladen); cijfers op vaste breedte via .mono en de tabular-regel in app.css */
  --text-compact: 15px;
  --text-focus: 16px;

  /* Radii: zoals de website (kaart 24, veld 14, knop 24) */
  --r-2xs: 4px;             /* toetsen, code */
  --r-xs: 8px;              /* rijen in menu's en lijsten, tips */
  --r-md: 12px;             /* zijbalk: actieve pil */
  --r-sm: 14px;             /* invoervelden, kleine tegels */
  --r-field: var(--r-sm);   /* invoervelden */
  --r-btn: 24px;            /* knoppen */
  --r-btn-lg: 24px;         /* grote knoppen */
  --r-card: 24px;           /* kaarten, panelen */
  --r-pill: 999px;

  /* Spacing: Designify-schaal */
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-32: 32px;
  --s-40: 40px;
  --s-48: 48px;
  --s-64: 64px;
  --s-80: 80px;
  --s-96: 96px;
  --s-120: 120px;
  --s-160: 160px;

  /* Shell */
  --activity-w: 44px;
  --sidebar-w: 248px;
  --status-h: 24px;
  --header-h: 56px;

  color-scheme: light;
}

/* Donker: bijna-zwart van Moss, niet navy */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151A18;            /* kaarten, werkvlak: bg-dark een stap lichter */
    --bg-2: #0C0F0E;          /* bg-dark */
    --bg-3: #1E2522;          /* hover, actief */
    --bg-tint: #1E4F4B;       /* moss-700 */
    --fg-on-tint: #D8EDE4;
    --tint-fill: linear-gradient(135deg, #24564F 0%, #1E4F4B 55%, #1A4541 100%);
    --fg: #F3F2EE;            /* text-on-dark */
    --fg-2: #B4B8B5;          /* secundair: tussen tekst en muted */
    --fg-3: #8C918D;          /* text-muted-on-dark */
    --line: rgba(255, 255, 255, 0.14);
    --accent: #5E9A86;        /* accent-mid: diep groen is op donker te zwak */
    --accent-hover: #9BC4B2;  /* accent-glow */
    --on-accent: #0C0F0E;     /* donkere tekst op het middengroen */
    --accent-bg: rgba(94, 154, 134, 0.18);
    --warn-fg: #E8C547;
    --ok-fg: #2FBF71;
    --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
    --backdrop: rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #151A18;            /* kaarten, werkvlak: bg-dark een stap lichter */
  --bg-2: #0C0F0E;          /* bg-dark */
  --bg-3: #1E2522;          /* hover, actief */
  --bg-tint: #1E4F4B;       /* moss-700 */
  --fg-on-tint: #D8EDE4;
  --tint-fill: linear-gradient(135deg, #24564F 0%, #1E4F4B 55%, #1A4541 100%);
  --fg: #F3F2EE;            /* text-on-dark */
  --fg-2: #B4B8B5;          /* secundair: tussen tekst en muted */
  --fg-3: #8C918D;          /* text-muted-on-dark */
  --line: rgba(255, 255, 255, 0.14);
  --accent: #5E9A86;        /* accent-mid: diep groen is op donker te zwak */
  --accent-hover: #9BC4B2;  /* accent-glow */
  --on-accent: #0C0F0E;     /* donkere tekst op het middengroen */
  --accent-bg: rgba(94, 154, 134, 0.18);
  --warn-fg: #E8C547;
  --ok-fg: #2FBF71;
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
  --backdrop: rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}