/* ==========================================================================
   i-cu — design tokens (shell v6)
   Bron: iseeyou-claudecode-shell-kit-v6/assets/css/heritage-tokens.css: de historische blauwtinten uit de
   i-cu-stylesheet van 2003 (#3E7DC0, #89CDF5, #CEE7FF, #E5EFFF, #F0F8FF). Dit bestand is de enige plek met
   merk- en themakleuren; app.css en de modules gebruiken alleen variabelen.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Merk: i-cu-blauw (2003) ---- */
  --brand-ink: #174f93;
  --brand-blue: #3e7dc0;
  --brand-signal: #89cdf5;
  --brand-soft: #cee7ff;
  --brand-soft-2: #e5efff;
  --brand-ice: #f0f8ff;

  --neutral-950: #17283a;
  --neutral-800: #2e4255;
  --neutral-600: #607386;
  --neutral-400: #8da0b1;
  --neutral-250: #c8d9e7;
  --neutral-150: #deebf4;
  --neutral-050: #f7fbfe;
  --white: #ffffff;

  /* ---- Type: twee webfonts met een vaste rol (typografie 29-09-2026; Geist Mono eruit dezelfde dag). Het logo is vector en
     telt niet als UI-font. Elke familie heeft een vervanger op maat in fonts.css ("… Fallback"), tegen verspringen tijdens
     het laden. Tijden en tellers staan in Geist met tabular-nums; alleen code gebruikt de monospace van het systeem
     (geen webfont). ---- */
  --font-body: Geist, "Geist Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Bricolage Grotesque", "Bricolage Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; /* smilies van leden: altijd in kleur */

  /* Letterschaal: groottes buiten dit bestand alleen via deze tokens (een test bewaakt dat) */
  --text-2xs: .6875rem;                                  /* 11 px: alleen hoofdletterlabels en badges */
  --text-xs: .75rem;                                     /* 12 px: meta, tijden, tabelkoppen */
  --text-sm: .875rem;                                    /* 14 px: blokken, lijsten, tabellen, knoppen */
  --text-base: 1rem;                                     /* 16 px: lopende tekst, velden, hoofdmenu, blokkoppen */
  --text-lg: 1.125rem;                                   /* 18 px: h3, sectietitels, intro's */
  --text-xl: 1.25rem;                                    /* 20 px: h2 */
  --text-2xl: 1.5rem;                                    /* 24 px: welkomstkop, profielnaam, statistiekgetal */
  --text-3xl: clamp(1.75rem, 1.58rem + .75vw, 2.25rem);  /* 28 px bij 360 → 36 px bij 1440: h1 */
  --text-4xl: clamp(2.5rem, 2rem + 2.22vw, 4rem);        /* 40 px bij 360 → 64 px bij 1440: grote losse getallen */
  --leading-tight: 1.1;                                  /* h1, grote getallen */
  --leading-snug: 1.25;                                  /* koppen, eenregelige interface */
  --leading-ui: 1.4;                                     /* lijsten, tabellen, compacte blokken */
  --leading-body: 1.5;                                   /* lopende tekst (WCAG 1.4.12) */
  --tracking-tight: -0.02em;                             /* h1 en groter */
  --tracking-snug: -0.01em;                              /* h2, h3, sectietitels */
  --tracking-caps: .06em;                                /* labels in hoofdletters */

  /* ---- Geometrie ---- */
  /* ---- Ruimte: één schaal (spec docs/superpowers/specs/2026-09-29-ruimte-design.md). Padding, marges en gaps buiten dit
     bestand alleen via deze tokens of de rollen hieronder (een test bewaakt dat). ---- */
  --space-3xs: .125rem;  /*  2 px: haarfijn: tussen menu-items, ring om een avatar */
  --space-2xs: .25rem;   /*  4 px: icoon ↔ tekst, binnenkant van badges */
  --space-xs: .5rem;     /*  8 px: binnen een onderdeel: label ↔ veld, knoppen naast elkaar */
  --space-sm: .75rem;    /* 12 px: onder een kop, tussen regels in een blok */
  --space-md: 1rem;      /* 16 px: binnenruimte paneel, zijmarge mobiel */
  --space-lg: 1.5rem;    /* 24 px: tussen panelen, binnenruimte kaart, zijmarge desktop */
  --space-xl: 2rem;      /* 32 px: tussen secties */
  --space-2xl: 3rem;     /* 48 px: onder de pagina, grote tussenruimtes */
  --space-3xl: 4rem;     /* 64 px: foutpagina's en lege staten */
  /* Rollen: onderdelen verwijzen naar een rol, niet naar een getal. Binnen ≤ buiten: panelen staan minstens zo ver uit
     elkaar als hun binnenruimte. Mobiele en aanraakwaarden staan alleen hier. */
  --inset-panel: var(--space-md);   /* blok (.box): kopregel opzij, inhoud rondom */
  --inset-card: var(--space-md);    /* kaart (.card), welkomstkaart, profielkop: 24 vanaf 768 px */
  --gap-panels: var(--space-md);    /* tussen panelen en kolommen: 24 vanaf 768 px */
  --row-h: 2.25rem;                 /* lijstrij 36 px; 40 px op een aanraakscherm */
  /* Hoeken: een klein vlak in een paneel krijgt een kleinere hoek dan het paneel (binnenhoek ≈ buitenhoek − padding) */
  --radius-xs: .25rem;       /*  4 px: badges, prefix, balkjes, crewbadge */
  --radius-sm: .5rem;        /*  8 px: kleine knoppen en vlakken in een paneel, menu-items, citaat, code */
  --radius-control: .625rem; /* 10 px: knoppen, velden */
  --radius-panel: .75rem;    /* 12 px: panelen en kaarten */
  --radius-lg: 1rem;         /* 16 px: grote profielfoto */
  --radius-pill: 999px;      /* pillen, tags, tellers */
  --radius-avatar: 0.625rem;
  --border-thin: 1px solid var(--color-border);
  --shadow-panel: 0 1px 2px rgba(23, 79, 147, 0.07), 0 8px 24px rgba(23, 79, 147, 0.04);
  --shadow-small: 0 1px 2px rgba(23, 79, 147, 0.07);
  --shadow-pop: 0 12px 30px rgba(18, 40, 70, 0.16);   /* dropdowns en het mobiele menu */
  --content-max: 75rem;                                /* 1200 px inhoud */
  --gutter: var(--space-md);
  --tap: 2.75rem;                                      /* minimaal klikvlak 44 px */
  --transition-fast: 140ms ease;

  /* ---- Shell: berichtenbalk, headerregel en navigatierail ---- */
  --ticker-h: 2.375rem;                                /* 38 px mobiel, 40 px vanaf 768 px */
  --header-row-h: 4.125rem;                            /* 66 px; 56 px onder 960 px (mobiele header) */
  --nav-h: 2.625rem;                                   /* 42 px */
  --rail-w: 15.25rem;                                  /* 244 px */
  --rail-w-tablet: 15.5rem;                            /* 248 px */

  /* ---- Vaste signaalkleuren (gelden in alle thema's) ---- */
  --color-online: #43a866;
  --color-highlight: var(--brand-signal);              /* signaal op donkere merkvlakken: berichtenbalk, footer */
  --color-scrim: rgba(13, 30, 52, .45);                /* achter de menulade (::backdrop), in alle thema's */
  --color-on-highlight: #123c70;
  /* Berichtenbalk (spec berichtenbalk §1): namen in lichte geslachtskleuren op de donkere balk (AA op --color-ink in elk
     thema, tests/berichtenbalk_test.php) en de tickertape-gaatjes boven en onder */
  --g-m-on-ink: #9fd2ff;
  --g-v-on-ink: #ffb3d6;
  --g-s-on-ink: #ffc98a;
  --color-ticker-perf: color-mix(in srgb, var(--color-highlight) 45%, transparent);
  --rank-1: #ffd43b; --rank-1-text: #4d3900;
  --rank-2: #dee2e6; --rank-2-text: #343a40;
  --rank-3: #f0a36b; --rank-3-text: #4d2600;
  --crew-lid: #5c5f66;
  --crew-mod: #26773a;
  --crew-admin: #b5460a;
  --crew-webmaster: #b01f55;
  --gold: #e0a800;

  /* E-kaarten: illustratiekleuren van de kaartjes, witte tekst op AA-contrast */
  --ecard-verjaardag: linear-gradient(135deg, #d9480f, #e67700);
  --ecard-liefde: linear-gradient(135deg, #c2255c, #9c36b5);
  --ecard-vriendschap: linear-gradient(135deg, #1971c2, #0b7285);
  --ecard-sterkte: linear-gradient(135deg, #4c6ef5, #5f3dc4);
  --ecard-feest: linear-gradient(135deg, #d9480f, #c92a2a);
  --ecard-zomaar: linear-gradient(135deg, #0b7285, #1864ab);
  --ecard-kerst: linear-gradient(135deg, #2b8a3e, #c92a2a);
}
@media (min-width: 768px) {
  :root { --gutter: var(--space-lg); --inset-card: var(--space-lg); --gap-panels: var(--space-lg); --ticker-h: 2.5rem; }
}
/* Mobiele header (spec mobiele-header §3.1): één balk van 56 px onder 960 px */
@media (max-width: 959px) {
  :root { --header-row-h: 3.5rem; }
}
/* Aanraakscherm (ook een tablet in landschap): rijen goed te tikken */
@media (pointer: coarse) {
  :root { --row-h: 2.5rem; }
}

/* ---- Semantische laag: i-cu-blauw (merkthema, standaard voor iedereen) ----
   Ledenthema's hieronder overschrijven dezelfde namen. */
:root,
[data-theme="iseeyou"] {
  --color-bg: var(--neutral-050);
  --color-bg-pattern: linear-gradient(180deg, var(--neutral-050) 0, var(--white) 28rem);
  --color-surface: var(--white);
  --color-surface-muted: var(--brand-ice);
  --color-surface-sunken: #f5f9fc;
  --color-text: var(--neutral-950);
  --color-text-muted: var(--neutral-600);
  --color-heading: #123c70;
  --color-border: var(--neutral-250);
  --color-border-control: #7894aa;           /* 3:1 op wit, voor invoervelden */
  --color-action: var(--brand-ink);
  --color-action-hover: #0f3d76;
  --color-on-action: var(--white);
  --color-live: #d94b64;                     /* › in kopregels, badges: functioneel accent, geen merklaag */
  --color-on-live: var(--white);
  --color-focus: #0969da;
  --color-ink: #123c70;                      /* donkere merkdrager: berichtenbalk, footer */
  --color-on-ink: var(--white);
  --color-on-ink-muted: #d8e9f7;
  --color-ink-line: #3e6d9d;

  --color-danger: #bd304c;
  --color-danger-soft: #fff0f2;
  --color-danger-line: #f5c2cc;
  --color-success: #2e7d4d;
  --color-success-soft: #eef8f1;
  --color-success-line: #bfe3cb;
  --color-info-soft: var(--brand-ice);
  --color-info-line: var(--brand-soft);

  /* Geslachtskleuren zoals vroeger (blauw, roze, oranje), op AA-contrast gebracht */
  --g-m: #1f6fbf;
  --g-v: #b82f70;
  --g-s: #a95800;
  /* Tijden: rood tot 15 min, blauw tot 1 uur, groen tot 24 uur */
  --rec-15: #bd304c;
  --rec-60: #245fa0;
  --rec-24: #2e7d4d;

  /* Welke logovariant de header toont (i-cu-primary op licht, i-cu-primary-reversed op donker) */
  --logo-on-light: block;
  --logo-on-dark: none;
}

/* ---- Donker: merkthema volgt de systeeminstelling als het lid niets koos ---- */
@media (prefers-color-scheme: dark) {
  html[data-auto] {
    color-scheme: dark;
    --color-bg: #0d1622;
    --color-bg-pattern: none;
    --color-surface: #142131;
    --color-surface-muted: #1a2b40;
    --color-surface-sunken: #101b29;
    --color-text: #e6eef7;
    --color-text-muted: #a7b8c9;
    --color-heading: #eef5fc;
    --color-border: #2a3e56;
    --color-border-control: #5d7a97;
    --color-action: #8fcdf6;
    --color-action-hover: #b6e0fa;
    --color-on-action: #0d1622;
    --color-live: #ff8aa0;
    --color-on-live: #0d1622;
    --color-focus: #8fc4ff;
    --color-ink: #09121d;
    --color-on-ink: #e6eef7;
    --color-on-ink-muted: #b3c6d8;
    --color-ink-line: #20344b;
    --color-danger: #ff8a99;
    --color-danger-soft: #3a1720;
    --color-danger-line: #6b2a36;
    --color-success: #9be07f;
    --color-success-soft: #172e17;
    --color-success-line: #2f5a2a;
    --color-info-soft: #152840;
    --color-info-line: #2b4a6e;
    --g-m: #5fb3ff; --g-v: #ff7ab8; --g-s: #ffab4a;
    --rec-15: #ff8787; --rec-60: #74c0fc; --rec-24: #8ce99a;
    --logo-on-light: none; --logo-on-dark: block;
  }
}

/* ==========================================================================
   Ledenthema's (/beheer/thema). Alleen kleuren; vorm, typografie en logo blijven merk.
   ========================================================================== */

/* I-cu blauw (2004): lavendel en blauw */
[data-theme="icu"] {
  --color-bg: #e9ecf8; --color-bg-pattern: radial-gradient(circle at 1px 1px, #d6dbf2 1px, transparent 0) 0 0 / 18px 18px;
  --color-surface: #ffffff; --color-surface-muted: #f3f5fc; --color-surface-sunken: #f3f5fc;
  --color-text: #1d2345; --color-text-muted: #5c6390; --color-heading: #1b2a6b;
  --color-border: #cdd3ee; --color-border-control: #7f87b3;
  --color-action: #3b5bdb; --color-action-hover: #2f49b3; --color-on-action: #ffffff;
  --color-live: #ff5fa2; --color-on-live: #1b2a6b;
  --color-ink: #1b2a6b; --color-on-ink: #ffffff; --color-on-ink-muted: #d3d9f5; --color-ink-line: #34458a;
}
/* Meet'n oranje (2005) */
[data-theme="meetn"] {
  --color-bg: #fff1e3; --color-bg-pattern: radial-gradient(circle at 1px 1px, #ffdcbc 1px, transparent 0) 0 0 / 18px 18px;
  --color-surface: #ffffff; --color-surface-muted: #fff7ef; --color-surface-sunken: #fff7ef;
  --color-text: #3a2410; --color-text-muted: #86644a; --color-heading: #6b3200;
  --color-border: #f3d3b5; --color-border-control: #b88c68;
  --color-action: #b85400; --color-action-hover: #9c4700; --color-on-action: #ffffff;
  --color-live: #1f6fbf; --color-on-live: #ffffff;
  --color-ink: #6b3200; --color-on-ink: #ffffff; --color-on-ink-muted: #f6dcc4; --color-ink-line: #8a4a17;
}
/* ZieMe grijs (eind 2005) */
[data-theme="zieme"] {
  --color-bg: #e7e7ea; --color-bg-pattern: linear-gradient(#e7e7ea, #dcdce1);
  --color-surface: #ffffff; --color-surface-muted: #f4f4f6; --color-surface-sunken: #f4f4f6;
  --color-text: #25272d; --color-text-muted: #5d616b; --color-heading: #30333b;
  --color-border: #d4d5db; --color-border-control: #8a8d97;
  --color-action: #4e5563; --color-action-hover: #3b414d; --color-on-action: #ffffff;
  --color-live: #c2327a; --color-on-live: #ffffff;
  --color-ink: #30333b; --color-on-ink: #ffffff; --color-on-ink-muted: #d6d7dc; --color-ink-line: #4a4e58;
}
[data-theme="groen"] {
  --color-bg: #eaf6ec; --color-bg-pattern: radial-gradient(circle at 1px 1px, #cfe9d4 1px, transparent 0) 0 0 / 18px 18px;
  --color-surface: #ffffff; --color-surface-muted: #f3faf4; --color-surface-sunken: #f3faf4;
  --color-text: #173022; --color-text-muted: #4f6e5a; --color-heading: #16502a;
  --color-border: #c3e2ca; --color-border-control: #7ea78a;
  --color-action: #237032; --color-action-hover: #1b5a27; --color-on-action: #ffffff;
  --color-live: #f59f00; --color-on-live: #2b1e00;
  --color-ink: #16502a; --color-on-ink: #ffffff; --color-on-ink-muted: #cfe9d4; --color-ink-line: #2c6a3f;
}
[data-theme="roze"] {
  --color-bg: #fdeef5; --color-bg-pattern: radial-gradient(circle at 1px 1px, #f8d3e5 1px, transparent 0) 0 0 / 18px 18px;
  --color-surface: #ffffff; --color-surface-muted: #fff6fa; --color-surface-sunken: #fff6fa;
  --color-text: #3d1528; --color-text-muted: #8a5570; --color-heading: #7d1d4d;
  --color-border: #f3c6db; --color-border-control: #c27fa0;
  --color-action: #c92a62; --color-action-hover: #b42658; --color-on-action: #ffffff;
  --color-live: #7048e8; --color-on-live: #ffffff;
  --color-ink: #7d1d4d; --color-on-ink: #ffffff; --color-on-ink-muted: #f8d3e5; --color-ink-line: #9a3566;
}
/* Nacht: donker thema */
[data-theme="nacht"] {
  color-scheme: dark;
  --color-bg: #12141c; --color-bg-pattern: radial-gradient(circle at 1px 1px, #1e2130 1px, transparent 0) 0 0 / 18px 18px;
  --color-surface: #1b1e2a; --color-surface-muted: #222636; --color-surface-sunken: #161822;
  --color-text: #e4e7f2; --color-text-muted: #9aa0b8; --color-heading: #dfe4ff;
  --color-border: #30354a; --color-border-control: #5d6484;
  --color-action: #7c93ff; --color-action-hover: #9aabff; --color-on-action: #0d1020;
  --color-live: #ff7ab8; --color-on-live: #12141c;
  --color-focus: #8fb8ff;
  --color-ink: #0b0d14; --color-on-ink: #e4e7f2; --color-on-ink-muted: #aab0c8; --color-ink-line: #262b3e;
  --color-danger: #ff8a99; --color-danger-soft: #3a1720; --color-danger-line: #6b2a36;
  --color-success: #9be07f; --color-success-soft: #172e17; --color-success-line: #2f5a2a;
  --color-info-soft: #1d2336; --color-info-line: #33405f;
  --g-m: #5fb3ff; --g-v: #ff7ab8; --g-s: #ffab4a;
  --rec-15: #ff8787; --rec-60: #74c0fc; --rec-24: #8ce99a;
  --logo-on-light: none; --logo-on-dark: block;
}

/* ---- Donkere merkdrager: lichte varianten binnen .ink-vlakken (berichtenbalk, footer) en .hero ---- */
.ink, .hero {
  --g-m: #7cc0ff; --g-v: #ff8fc4; --g-s: #ffb561;
  --rec-15: #ff9aa6; --rec-60: #b3d9ff; --rec-24: #b4ec8f;
  --color-focus: var(--color-highlight);
  color: var(--color-on-ink);
  background: var(--color-ink);
}

/* ==========================================================================
   Afgeleide tokens en oude variabelenamen (modules gebruiken deze) → semantische tokens.
   Staat op elk [data-theme]-element zodat themavoorbeelden kloppen.
   ========================================================================== */
:root,
[data-theme] {
  /* Kopregel van panelen (effen vlak) en de navigatierail: zeer subtiele tint van het thema (ijsblauw in het merkthema) */
  --color-panel-head: color-mix(in srgb, color-mix(in srgb, var(--color-surface-muted), var(--color-action) 7%) 65%, var(--color-surface));
  --color-nav-rail: color-mix(in srgb, var(--color-surface-muted) 70%, var(--color-surface));
  --color-divider: color-mix(in srgb, var(--color-border) 55%, var(--color-surface));
  /* Tabelrijen (app.css "Tabel"): hover als leeshulp, markering (vastgepind, vandaag, jij, live) en scrollschaduw */
  --color-row-hover: color-mix(in srgb, var(--color-surface-muted) 55%, var(--color-surface));
  --color-row-mark: color-mix(in srgb, var(--color-action) 5%, var(--color-surface));
  --color-scroll-shadow: color-mix(in srgb, var(--color-text) 16%, transparent);

  --bg: var(--color-bg);
  --bg-pattern: var(--color-bg-pattern);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-muted);
  --head: var(--color-surface-muted);
  --head-text: var(--color-heading);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --primary: var(--color-action);
  --primary-2: var(--color-action-hover);
  --on-primary: var(--color-on-action);
  --accent: var(--color-live);
  --on-accent: var(--color-on-live);
  --ticker: var(--color-ink);
  --ticker-text: var(--color-on-ink);
  --font: var(--font-body);
  --radius: var(--radius-panel);
  --radius-s: var(--radius-control);
  --gap: var(--gap-panels);   /* oude naam in modules: ruimte tussen panelen en kolommen */
  --maxw: var(--content-max);
}