/* GEGENEREERD door npm run css:sync — bewerk shared/design-tokens.css, niet dit bestand. */
/* ============================================================================
 * Stee — DESIGN TOKENS (de ÉÉN bron van waarheid voor kleur, ruimte,
 *                       afronding, schaduw, typografie en z-index)
 *
 * Gebruikt door:
 *   - Web (JS/*.html)        → laad dit bestand EERST in <head>, vóór stee-theme.css
 *   - App (app/src, Svelte)  → `@import '../../../shared/design-tokens.css';` in app.css
 *
 * Regels (afgedwongen door JS/style-consistency.test.cjs):
 *   - Kleuren staan ALLEEN hier. Geen hex in component-CSS of inline styles.
 *   - Elke --stee-* kleur heeft een light- én dark-waarde.
 *   - Nieuwe uiterlijkheden = nieuw token, geen hardcoded waarde.
 *
 * De oudere token-namen (--primary, --bg-surface, --text, --btn-success-bg …)
 * blijven werken via ALIAS-toekenningen onderaan dit bestand; nieuwe code
 * gebruikt de --stee-* namen.
 * ========================================================================== */

/* ── Niet-thema-gebonden schaal (identiek in elk thema) ─────────────────── */
:root {
  /* Ruimte (4px-basis) */
  --stee-space-0: 0;
  --stee-space-1: 4px;
  --stee-space-2: 8px;
  --stee-space-3: 12px;
  --stee-space-4: 16px;
  --stee-space-5: 24px;
  --stee-space-6: 32px;

  /* Afronding */
  --stee-radius-sm: 4px;
  --stee-radius-md: 8px;
  --stee-radius-lg: 12px;
  --stee-radius-pill: 999px;

  /* Schaduw */
  --stee-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --stee-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --stee-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Typografie */
  --stee-font-heading: 'Poppins', system-ui, -apple-system, sans-serif;
  --stee-font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Z-index-ladder (geen losse 9999 meer) */
  --stee-z-header: 100;
  --stee-z-dropdown: 2000;
  --stee-z-modal: 10000;
  --stee-z-toast: 11000;

  /* Semantische tint-oppervlakken (lichte vulkleur voor een statusblok).
     color-mix maakt ze automatisch lichter/donker per thema. */
  --stee-surface-success-tint: color-mix(in srgb, var(--stee-color-success) 12%, var(--stee-surface-1));
  --stee-surface-danger-tint:  color-mix(in srgb, var(--stee-color-danger) 12%, var(--stee-surface-1));
  --stee-surface-warning-tint: color-mix(in srgb, var(--stee-color-warning) 16%, var(--stee-surface-1));
  --stee-surface-info-tint:    color-mix(in srgb, var(--stee-color-info) 12%, var(--stee-surface-1));

  /* 2026-09-09 (todo-…-ecwff): rendercode in JS schrijft de statusvlakken als
     var(--stee-color-<status>-tint, #<licht>). Die vier tokens BESTONDEN niet,
     dus viel elke var() terug op de hardgecodeerde LICHTE hexwaarde — ook in
     donkere modus, met lichte tekst op een lichtblauw/lichtgroen vlak als
     gevolg. Ze zijn nu echte tokens: dezelfde color-mix als de
     --stee-surface-*-tint hierboven, dus automatisch mee met licht/donker.
     De -border-variant is een sterkere mix, zodat een rand op zo'n vlak
     zichtbaar blijft in plaats van in de vulkleur te verdwijnen. */
  --stee-color-success-tint: var(--stee-surface-success-tint);
  --stee-color-danger-tint:  var(--stee-surface-danger-tint);
  --stee-color-warning-tint: var(--stee-surface-warning-tint);
  --stee-color-info-tint:    var(--stee-surface-info-tint);
  --stee-color-success-tint-border: color-mix(in srgb, var(--stee-color-success) 34%, var(--stee-surface-1));
  --stee-color-danger-tint-border:  color-mix(in srgb, var(--stee-color-danger) 34%, var(--stee-surface-1));
  --stee-color-warning-tint-border: color-mix(in srgb, var(--stee-color-warning) 38%, var(--stee-surface-1));
  --stee-color-info-tint-border:    color-mix(in srgb, var(--stee-color-info) 34%, var(--stee-surface-1));

  /* Neutrale (donkergrijze) knop — bijv. 🩺 Diagnose in het AI-paneel. Stond
     als background:var(--stee-text-strong) met color:var(--stee-surface-1);
     in donkere modus wisselden die twee van rol en werd de knop spierwit.
     Eigen token met een light- én dark-waarde, tekst altijd op wit. */
  --stee-button-neutral-bg:   #37474F;
  --stee-button-neutral-text: #FFFFFF;

  /* Modale verduistering tussen venster en dialoog (thema-neutraal).
     Tot 2026-09-17 was dit color-mix(…, var(--stee-text-strong) 55%, transparent) —
     een token dat NERGENS werd gebruikt (grep bevestigt: alleen hier
     gedefinieerd). Was hij wél gebruikt, dan had hij in donkere modus een
     WIT vlak gegeven: --stee-text-strong wordt in dark #F9FAFB (bijna wit),
     en color-mix met wit 55% is een lichte, niet een donkere, verduistering
     — het omgekeerde van een overlay. Vaste rgba(0,0,0,…) i.p.v. een
     text-kleur-mix: een verduistering moet altijd donker zijn, in élke
     modus. Vanaf nu de eigenaar van stee-home.js/ui-todo-element-link.js
     hun eerder hardcoded overlay-kleuren (todo-plan-opruim-css-eigenaar). */
  --stee-overlay: rgba(0, 0, 0, 0.55);
  --stee-overlay-heavy: rgba(0, 0, 0, 0.75);

  /* Screenshot-tool: volledig ondoorzichtig bijna-zwart werkvlak achter de
     schermafbeelding-selectie (ui-todo-screenshot.js). Geen dimming van
     iets erachter (dus geen alpha) en bewust thema/modus-onafhankelijk. */
  --stee-screenshot-overlay-bg: #05060a;

  /* Tekst op een --stee-color-warning-vlak (amber/oranje badge). Wit leest
     op amber slecht; donkerbruin/zwart is de gangbare WCAG-keuze op #F59E0B
     én op de iets lichtere dark-mode variant #F5A623 (zie thema-blokken). */
  --stee-text-on-warning: #1a1200;
}

/* ═════════════════════════════════════════════════════════════════════════
 * THEMA 1 — Rustig & Vertrouwd (Paars) — DEFAULT
 * ═════════════════════════════════════════════════════════════════════════ */
:root,
[data-theme="purple"],
[data-theme=""] {
  --stee-color-primary:        #5E2D87;
  --stee-color-primary-hover:  #4A2470;
  --stee-color-primary-light:  #8E5CB5;
  --stee-color-primary-tint:   #EDE4F4;
  --stee-color-success:        #2E7D6B;
  --stee-color-danger:         #E14D4D;
  --stee-color-warning:        #F59E0B;
  --stee-color-info:           #2563EB;

  --stee-surface-app:          #F8F7FA;
  --stee-surface-1:            #FFFFFF;
  --stee-surface-2:            #F3EEF8;
  --stee-surface-selected:     #EDE4F4;

  --stee-text-strong:          #1F2937;
  --stee-text-normal:          #1F2937;
  --stee-text-muted:           #6B7280;
  --stee-text-faint:           #9CA3AF;
  --stee-text-on-primary:      #FFFFFF;

  --stee-border:               #E5E7EB;
  --stee-border-strong:        #D1D5DB;

  --stee-button-primary-bg:    #5E2D87;
  --stee-button-primary-text:  #FFFFFF;
  --stee-button-secondary-bg:  #FFFFFF;
  --stee-button-success-bg:    #2E7D6B;
  --stee-button-danger-bg:     #E14D4D;

  --stee-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --stee-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --stee-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ═════════════════════════════════════════════════════════════════════════
 * THEMA 2 — Fris & Modern (Groen)
 * ═════════════════════════════════════════════════════════════════════════ */
[data-theme="green"] {
  --stee-color-primary:        #0FA67A;
  --stee-color-primary-hover:  #0B8A66;
  --stee-color-primary-light:  #22C55E;
  --stee-color-primary-tint:   #DDF7EE;
  --stee-color-info:           #2563EB;
  --stee-surface-app:          #F4FBF8;
  --stee-surface-2:            #E7F7F1;
  --stee-surface-selected:     #DDF7EE;
  --stee-button-primary-bg:    #0FA67A;
}

/* ═════════════════════════════════════════════════════════════════════════
 * THEMA 3 — Warm & Huiskamer (Bruin)
 * ═════════════════════════════════════════════════════════════════════════ */
[data-theme="brown"] {
  --stee-color-primary:        #8B5E3C;
  --stee-color-primary-hover:  #744C2F;
  --stee-color-primary-light:  #D9A066;
  --stee-color-primary-tint:   #FFF5E6;
  --stee-surface-app:          #FBF7F2;
  --stee-surface-2:            #F7EEE3;
  --stee-surface-selected:     #FFF5E6;
  --stee-button-primary-bg:    #8B5E3C;
}

/* ═════════════════════════════════════════════════════════════════════════
 * DONKERE MODUS — geldt voor álle thema's (opgehelderde kleuren)
 * ═════════════════════════════════════════════════════════════════════════ */
[data-color-mode="dark"] {
  color-scheme: dark;

  --stee-surface-app:      #101218;
  --stee-surface-1:        #1A1D25;
  --stee-surface-2:        #20242D;
  --stee-surface-selected: #292D3A;

  --stee-text-strong:      #F9FAFB;
  --stee-text-normal:      #F3F4F6;
  --stee-text-muted:       #C2C7D0;
  --stee-text-faint:       #8F96A3;

  --stee-border:           #343946;
  --stee-border-strong:    #4A5161;

  --stee-color-primary:        #9B6FD4;
  --stee-color-primary-hover:  #AC82DC;
  --stee-color-success:        #2F9E7E;
  --stee-color-danger:         #E5605F;
  --stee-color-info:           #5B9BF5;
  --stee-color-warning:        #F5A623;

  --stee-button-primary-bg:    #7C4FB8;
  --stee-button-success-bg:    #2F9E7E;
  --stee-button-danger-bg:     #E5605F;
  --stee-button-secondary-bg:  #1A1D25;
  --stee-button-neutral-bg:    #3B424F;

  --stee-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --stee-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
  --stee-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55);
}

/* ═════════════════════════════════════════════════════════════════════════
 * HOOG-CONTRAST
 * ═════════════════════════════════════════════════════════════════════════ */
html[data-high-contrast="on"] {
  --stee-border: #9AA2B1;
  --stee-border-strong: #C7CDD8;
}
html[data-high-contrast="on"][data-color-mode="dark"] {
  --stee-border: #6B7280;
  --stee-border-strong: #9AA2B1;
}

/* ═════════════════════════════════════════════════════════════════════════
 * COMPAT-ALIASSEN — bestaande token-namen wijzen naar de canonische --stee-*
 * waarden, zodat huidige componenten blijven werken tijdens de migratie.
 * Nieuwe code gebruikt direct --stee-*; deze regels worden weggehaald zodra
 * de migratie (DESIGN-SYSTEM-LANGETERMIJN.md Fase 2-3) klaar is.
 * ═════════════════════════════════════════════════════════════════════════ */
:root,
[data-theme="purple"], [data-theme="green"], [data-theme="brown"],
[data-color-mode="dark"] {
  --primary: var(--stee-color-primary);
  --primary-light: var(--stee-color-primary-light);
  --primary-very-light: var(--stee-color-primary-tint);
  --success: var(--stee-color-success);
  --danger: var(--stee-color-danger);
  --warning: var(--stee-color-warning);
  --info: var(--stee-color-info);

  --bg-app: var(--stee-surface-app);
  --bg-surface: var(--stee-surface-1);
  --bg-surface-alt: var(--stee-surface-2);
  --bg-selected: var(--stee-surface-selected);
  --bg-hover: var(--stee-surface-2);

  --text: var(--stee-text-normal);
  --text-secondary: var(--stee-text-muted);
  --text-muted: var(--stee-text-faint);
  --text-on-primary: var(--stee-text-on-primary);

  --border: var(--stee-border);
  --border-hover: var(--stee-border-strong);

  --btn-primary-bg: var(--stee-button-primary-bg);
  --btn-primary-text: var(--stee-text-on-primary);
  --btn-secondary-bg: var(--stee-button-secondary-bg);
  --btn-success-bg: var(--stee-button-success-bg);
  --btn-danger-bg: var(--stee-button-danger-bg);

  --shadow-sm: var(--stee-shadow-sm);
  --shadow-md: var(--stee-shadow-md);
  --shadow-lg: var(--stee-shadow-lg);

  --font-heading: var(--stee-font-heading);
  --font-body: var(--stee-font-body);

  --radius-md: var(--stee-radius-md);
}

/* ═══════════════════════════════════════════════════════════════
 * 2026-09-04 — LEGACY THEMA-PALET overgenomen uit stee-theme.css.
 * Kleuren horen ALLEEN hier (één kleurbron). Deze blokken leveren de
 * historische legacy-tokens (--nav-*, --badge-*, --btn-*, --bg-*, --text-*,
 * --amount-*, --tag-*, --header-*, --logo-color, --accent-light-bg …) per
 * thema + dark, zodat verwijderde overrides in stee-theme.css geen verschil
 * maken. Bij het stapsgewijs vervangen van legacy-namen door --stee-*
 * verdwijnen deze blokken vanzelf.
 * ═══════════════════════════════════════════════════════════════ */
:root,
[data-theme="purple"],
[data-theme=""] {
  /* ── Primary ── */
  --primary: #5E2D87;
  --primary-light: #8E5CB5;
  --primary-very-light: #EDE4F4;

  /* ── Semantic ── */
  --success: #2E7D6B;
  --danger: #E14D4D;
  --warning: #F59E0B;
  --info: #2563EB;

  /* ── Backgrounds ── */
  --bg-app: #F8F7FA;
  --bg-surface: #FFFFFF;
  --bg-selected: #EDE4F4;
  --bg-hover: #F3EEF8;

  /* ── Text ── */
  --text: #1F2937;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;
  --text-on-primary: #FFFFFF;

  /* ── Borders ── */
  --border: #E5E7EB;
  --border-light: #F0F0F0;
  --border-hover: #D1D5DB;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* ── Transaction amounts ── */
  --amount-negative: #E14D4D;
  --amount-positive: #2E7D6B;

  /* ── Category tags ── */
  --tag-bg: #EDE4F4;
  --tag-text: #5E2D87;

  /* ── Navigation ── */
  --nav-active-bg: #5E2D87;
  --nav-active-text: #FFFFFF;
  --nav-inactive-bg: #FFFFFF;
  --nav-inactive-text: #1F2937;
  --nav-hover-bg: #F3EEF8;

  /* ── Knoppen ── */
  --btn-primary-bg: #5E2D87;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #4A2470;
  --btn-secondary-bg: #FFFFFF;
  --btn-secondary-text: #5E2D87;
  --btn-secondary-border: #5E2D87;
  --btn-success-bg: #2E7D6B;
  --btn-danger-bg: #E14D4D;

  /* ── Header / topbar ── */
  --header-bg: #5E2D87;
  --header-text: #FFFFFF;

  /* ── Badges ── */
  --badge-owner-bg: #FFF3E0;
  --badge-owner-text: #E65100;
  --badge-member-bg: #E3F2FD;
  --badge-member-text: #1565C0;
  --badge-admin-bg: #FCE4EC;
  --badge-admin-text: #C62828;
  --badge-active-bg: #E8F5E9;
  --badge-active-text: #2E7D32;

  /* ── Login / admin accent ── */
  --accent: #5E2D87;
  --accent-hover: #4A2470;
  --accent-light-bg: #EDE4F4;

  /* ── Logo color ── */
  --logo-color: #5E2D87;

  /* ── Boodschappen aanbieding ── */
  --offer-color: #E14D4D;

  /* ── Graphiek ── */
  --chart-primary: #5E2D87;
  --chart-secondary: #8E5CB5;
  --chart-positive: #2E7D6B;
  --chart-negative: #E14D4D;

  /* ── Themanaam (voor JS) ── */
  --theme-name: "Rustig & Vertrouwd";
  --theme-emoji: "🟣";

  /* ── Fonts ── */
  --font-heading: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ═══════════════════════════════════════════════════════
   🟢 THEMA 2 — Fris & Modern (Groen)
   ═══════════════════════════════════════════════════════ */
[data-theme="green"] {
  --primary: #0FA67A;
  --primary-light: #22C55E;
  --primary-very-light: #DDF7EE;

  --success: #2E7D6B;
  --danger: #E14D4D;
  --warning: #F59E0B;
  --info: #2563EB;

  --bg-app: #F7FAF9;
  --bg-surface: #FFFFFF;
  --bg-selected: #DDF7EE;
  --bg-hover: #E8F8F0;

  --text: #1F2937;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;
  --text-on-primary: #FFFFFF;

  --border: #E5E7EB;
  --border-light: #F0F0F0;
  --border-hover: #D1D5DB;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  --amount-negative: #E14D4D;
  --amount-positive: #22C55E;

  --tag-bg: #DDF7EE;
  --tag-text: #0FA67A;

  --nav-active-bg: #0FA67A;
  --nav-active-text: #FFFFFF;
  --nav-inactive-bg: #FFFFFF;
  --nav-inactive-text: #1F2937;
  --nav-hover-bg: #E8F8F0;

  --btn-primary-bg: #0FA67A;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #0C8563;
  --btn-secondary-bg: #FFFFFF;
  --btn-secondary-text: #0FA67A;
  --btn-secondary-border: #0FA67A;
  --btn-success-bg: #2E7D6B;
  --btn-danger-bg: #E14D4D;

  --header-bg: #0FA67A;
  --header-text: #FFFFFF;

  --badge-owner-bg: #FFF3E0;
  --badge-owner-text: #E65100;
  --badge-member-bg: #E3F2FD;
  --badge-member-text: #1565C0;
  --badge-admin-bg: #FCE4EC;
  --badge-admin-text: #C62828;
  --badge-active-bg: #DDF7EE;
  --badge-active-text: #0FA67A;

  --accent: #0FA67A;
  --accent-hover: #0C8563;
  --accent-light-bg: #DDF7EE;

  --logo-color: #0FA67A;

  --offer-color: #F59E0B;

  --chart-primary: #0FA67A;
  --chart-secondary: #22C55E;
  --chart-positive: #22C55E;
  --chart-negative: #E14D4D;

  --theme-name: "Fris & Modern";
  --theme-emoji: "🟢";

  --font-heading: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ═══════════════════════════════════════════════════════
   🟤 THEMA 3 — Warm & Huiskamer (Bruin)
   ═══════════════════════════════════════════════════════ */
[data-theme="brown"] {
  --primary: #8B5E3C;
  --primary-light: #D9A066;
  --primary-very-light: #FFF5E6;

  --success: #2E7D6B;
  --danger: #E14D4D;
  --warning: #F59E0B;
  --info: #2563EB;

  --bg-app: #FFFDF9;
  --bg-surface: #FFFFFF;
  --bg-selected: #FFF5E6;
  --bg-hover: #FFF0D9;

  --text: #1F2937;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;
  --text-on-primary: #FFFFFF;

  --border: #E5E7EB;
  --border-light: #F0F0F0;
  --border-hover: #D1D5DB;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  --amount-negative: #C95C4C;
  --amount-positive: #6B8E68;

  --tag-bg: #FFF5E6;
  --tag-text: #8B5E3C;

  --nav-active-bg: #8B5E3C;
  --nav-active-text: #FFFFFF;
  --nav-inactive-bg: #FFFFFF;
  --nav-inactive-text: #1F2937;
  --nav-hover-bg: #FFF0D9;

  --btn-primary-bg: #8B5E3C;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #724D30;
  --btn-secondary-bg: #FFFFFF;
  --btn-secondary-text: #8B5E3C;
  --btn-secondary-border: #8B5E3C;
  --btn-success-bg: #2E7D6B;
  --btn-danger-bg: #E14D4D;

  --header-bg: #8B5E3C;
  --header-text: #FFFFFF;

  --badge-owner-bg: #FFF5E6;
  --badge-owner-text: #8B5E3C;
  --badge-member-bg: #E3F2FD;
  --badge-member-text: #1565C0;
  --badge-admin-bg: #FCE4EC;
  --badge-admin-text: #C62828;
  --badge-active-bg: #E8F5E9;
  --badge-active-text: #6B8E68;

  --accent: #8B5E3C;
  --accent-hover: #724D30;
  --accent-light-bg: #FFF5E6;

  --logo-color: #8B5E3C;

  --offer-color: #D9A066;

  --chart-primary: #8B5E3C;
  --chart-secondary: #D9A066;
  --chart-positive: #6B8E68;
  --chart-negative: #C95C4C;

  --theme-name: "Warm & Huiskamer";
  --theme-emoji: "🟤";

  --font-heading: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ═══════════════════════════════════════════════════════
   🌙 DONKERE WEERGAVE — orthogonaal op het kleurthema
   ═══════════════════════════════════════════════════════ */
[data-color-mode="dark"] {
  color-scheme: dark;

  --bg-app: #101218;
  --bg-surface: #1A1D25;
  --bg-selected: #292D3A;
  --bg-hover: #232733;

  --text: #F3F4F6;
  --text-secondary: #C2C7D0;
  --text-muted: #8F96A3;
  --text-on-primary: #FFFFFF;

  --border: #343946;
  --border-light: #292E39;
  --border-hover: #4A5161;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, .55);

  --nav-inactive-bg: #1A1D25;
  --nav-inactive-text: #E5E7EB;
  --nav-hover-bg: #292D3A;

  --btn-secondary-bg: #1A1D25;
  /* 2026-08-29 (render-conflict): actie-knoppen gebruikten hardcoded kleuren en
     negeerden donkere modus. Nu ze var(--btn-*) gebruiken moeten die in donker
     ook een passende (opgehelderde) waarde krijgen. */
  --btn-primary-bg: #7C4FB8;
  --btn-primary-hover: #8D63C4;
  --btn-success-bg: #2F9E7E;
  --btn-danger-bg: #E5605F;
  --info: #5B9BF5;
  --warning: #F5A623;
  --danger: #E5605F;
  --success: #2F9E7E;
  --primary: #9B6FD4;
  --bg-surface-alt: #222735;
  --bg-hover: #232733;
  --badge-owner-bg: #49351E;
  --badge-owner-text: #FFD39B;
  --badge-member-bg: #173A54;
  --badge-member-text: #9ED5FF;
  --badge-admin-bg: #4A2230;
  --badge-admin-text: #FFB5C8;
  --badge-active-bg: #173E34;
  --badge-active-text: #9DE4CF;

  --header-bg: #151820;
  --header-text: #F9FAFB;
  --accent-light-bg: #292D3A;
}

/* ═══════════════════════════════════════════════════════
   🌙 DONKER PER THEMA — groen en bruin blijven in donker groen en bruin
   (het algemene donkerblok hierboven geeft paars, het standaardthema)
   ═══════════════════════════════════════════════════════ */
[data-color-mode="dark"][data-theme="green"] {
  --stee-color-primary: #34C79A;
  --stee-color-primary-hover: #52D3AB;
  --stee-color-primary-light: #6EE7B7;
  --stee-color-primary-tint: #173A30;
  --stee-button-primary-bg: #0E7F5F;
  --primary: #34C79A;
  --primary-light: #6EE7B7;
  --primary-very-light: #173A30;
  --btn-primary-bg: #0E7F5F;
  --btn-primary-hover: #12936C;
}
[data-color-mode="dark"][data-theme="brown"] {
  --stee-color-primary: #D9A066;
  --stee-color-primary-hover: #E3B482;
  --stee-color-primary-light: #EBC59A;
  --stee-color-primary-tint: #3A2C1F;
  --stee-button-primary-bg: #8F5F34;
  --primary: #D9A066;
  --primary-light: #EBC59A;
  --primary-very-light: #3A2C1F;
  --btn-primary-bg: #8F5F34;
  --btn-primary-hover: #A0703F;
}

/* ═══...LEGACY EXACTE KLEUREN (opvanglaag, Fase 3b, 2026-09-04)...═══ */
:root {
  --stee-legacy-000000: #000000;
  --stee-legacy-11141A: #11141A;
  --stee-legacy-141720: #141720;
  --stee-legacy-163129: #163129;
  --stee-legacy-173C2A: #173C2A;
  --stee-legacy-1A1A1A: #1A1A1A;
  --stee-legacy-1B1F27: #1B1F27;
  --stee-legacy-1F2937: #1F2937;
  --stee-legacy-20242D: #20242D;
  --stee-legacy-2196F3: #2196F3;
  --stee-legacy-242A34: #242A34;
  --stee-legacy-272C36: #272C36;
  --stee-legacy-2A2F3A: #2A2F3A;
  --stee-legacy-2E7D32: #2E7D32;
  --stee-legacy-303744: #303744;
  --stee-legacy-39745A: #39745A;
  --stee-legacy-3A1D22: #3A1D22;
  --stee-legacy-3A404D: #3A404D;
  --stee-legacy-444444: #444444;
  --stee-legacy-4A2529: #4A2529;
  --stee-legacy-4B79A8: #4B79A8;
  --stee-legacy-515968: #515968;
  --stee-legacy-555555: #555555;
  --stee-legacy-596273: #596273;
  --stee-legacy-5EE3A3: #5EE3A3;
  --stee-legacy-666666: #666666;
  --stee-legacy-666677: #666677;
  --stee-legacy-778092: #778092;
  --stee-legacy-8C4B50: #8C4B50;
  --stee-legacy-8DE6B5: #8DE6B5;
  --stee-legacy-8FF0C8: #8FF0C8;
  --stee-legacy-90CAF9: #90CAF9;
  --stee-legacy-999999: #999999;
  --stee-legacy-AAAAAA: #AAAAAA;
  --stee-legacy-BBBBBB: #BBBBBB;
  --stee-legacy-C62828: #C62828;
  --stee-legacy-CCCCCC: #CCCCCC;
  --stee-legacy-D7DCE5: #D7DCE5;
  --stee-legacy-DDDDDD: #DDDDDD;
  --stee-legacy-E64A19: #E64A19;
  --stee-legacy-EEEEEE: #EEEEEE;
  --stee-legacy-EEF2FF: #EEF2FF;
  --stee-legacy-F1F8F1: #F1F8F1;
  --stee-legacy-F4F6FA: #F4F6FA;
  --stee-legacy-F9AB00: #F9AB00;
  --stee-legacy-F9F9F9: #F9F9F9;
  --stee-legacy-FF5722: #FF5722;
  --stee-legacy-FF6B7A: #FF6B7A;
  --stee-legacy-FF8A80: #FF8A80;
  --stee-legacy-FFB4AB: #FFB4AB;
  --stee-legacy-FFD54F: #FFD54F;
  --stee-legacy-FFF5F5: #FFF5F5;
  --stee-legacy-FFFFFF: #FFFFFF;
}