/* Huisstijl van Beauty Specialist: één plek voor kleuren, font en vorm.
 * GEGENEREERD door scripts/huisstijl.py uit branding/huisstijl.json; bewerk de JSON, niet dit bestand.
 * Beheer, klantenportaal, homepage, aanmelden, afrekenen en welkom laden dit
 * bestand NA hun eigen stijl, zodat deze waarden winnen. */
@font-face { font-family: 'Geist'; src: url('/fonts/Geist-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/fonts/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-kop: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --green-text: #15803D; --yellow-text: #A16207; --red-text: #B91C1C;
  --row-hover: #FAF5FF; --chip-bg: #EFE9F5; --chip-text: #3C2455; --table-head: #696470; --badge-bg: #EFE9F5; --skeleton: #DAD7DE; --overlay: rgba(5,3,8,0.40);
  --radius-card: 18px; --radius-hero: 24px; --radius-field: 12px; --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(5,3,8,.04), 0 8px 24px rgba(5,3,8,.06); --shadow-pop: 0 12px 40px rgba(5,3,8,.16); --dur-fast: 150ms; --dur-panel: 240ms;
  --bg: #E7E7E7;
  --card: #FFFFFF;
  --border: #E7E7E7;
  --border-strong: #958F9B;
  --text: #050308;
  --ink: #050308;
  --muted: #696470;
  --brand: #3C2455;
  --brand-dark: #241534;
  --brand-soft: rgba(60,36,85,0.10);
  --cta: #7442C8; --cta-hover: #3C2455;
  --green: #22c55e; --green-bg: #F0FDF4;
  --yellow: #eab308; --yellow-bg: #FEFCE8;
  --red: #ef4444; --red-bg: #FEF2F2;
  --sidebar: #171419; --sidebar-fg: #B9B5BE; --sidebar-active: #FFFFFF;
  --radius: 18px;
}
@font-face { font-family: 'Geist Mono'; src: url('/fonts/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-kop: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --green-text: #15803D; --yellow-text: #A16207; --red-text: #B91C1C;
  --row-hover: #FAF5FF; --chip-bg: #EFE9F5; --chip-text: #3C2455; --table-head: #696470; --badge-bg: #EFE9F5; --skeleton: #DAD7DE; --overlay: rgba(5,3,8,0.40);
  --radius-card: 18px; --radius-hero: 24px; --radius-field: 12px; --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(5,3,8,.04), 0 8px 24px rgba(5,3,8,.06); --shadow-pop: 0 12px 40px rgba(5,3,8,.16); --dur-fast: 150ms; --dur-panel: 240ms;
  --bg: #E7E7E7;
  --card: #FFFFFF;
  --border: #E7E7E7;
  --border-strong: #958F9B;
  --text: #050308;
  --ink: #050308;
  --muted: #696470;
  --brand: #3C2455;
  --brand-dark: #241534;
  --brand-soft: rgba(60,36,85,0.10);
  --cta: #7442C8; --cta-hover: #3C2455;
  --green: #22c55e; --green-bg: #F0FDF4;
  --yellow: #eab308; --yellow-bg: #FEFCE8;
  --red: #ef4444; --red-bg: #FEF2F2;
  --sidebar: #171419; --sidebar-fg: #B9B5BE; --sidebar-active: #FFFFFF;
  --radius: 18px;
}
@font-face { font-family: 'Geist Mono'; src: url('/fonts/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-kop: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --row-hover: #FAF5FF; --chip-bg: #EFE9F5; --chip-text: #3C2455; --table-head: #696470; --badge-bg: #EFE9F5; --skeleton: #DAD7DE; --overlay: rgba(5,3,8,0.40);
  --radius-card: 18px; --radius-hero: 24px; --radius-field: 12px; --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(5,3,8,.04), 0 8px 24px rgba(5,3,8,.06); --shadow-pop: 0 12px 40px rgba(5,3,8,.16); --dur-fast: 150ms; --dur-panel: 240ms;
  --bg: #E7E7E7;
  --card: #FFFFFF;
  --border: #E7E7E7;
  --border-strong: #958F9B;
  --text: #050308;
  --ink: #050308;
  --muted: #696470;
  --brand: #3C2455;
  --brand-dark: #241534;
  --brand-soft: rgba(60,36,85,0.10);
  --cta: #7442C8; --cta-hover: #3C2455;
  --green: #22c55e; --green-bg: #F0FDF4;
  --yellow: #eab308; --yellow-bg: #FEFCE8;
  --red: #ef4444; --red-bg: #FEF2F2;
  --sidebar: #171419; --sidebar-fg: #B9B5BE; --sidebar-active: #FFFFFF;
  --radius: 18px;
}
/* Toetsenbordfocus (POLIJST A, 26 sep): zichtbaar op knoppen, links en velden; alleen bij
 * toetsenbordgebruik, niet bij muisklik. Staat achter de :root-blok zodat huisstijl.py het bewaart. */
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
/* Typografie (2 okt): koppen in het kopfont, strak gespatieerd; selectie in de merkkleur. */
h1, h2, h3 { font-family: var(--font-kop); letter-spacing: -0.02em; }
::selection { background: rgba(60,36,85,0.18); }
/* HIG-ronde 2 okt (apple-design-skill): zichtbare veldranden (>= 3:1), indrukstaat op knoppen, minder beweging op verzoek. */
.login-card input, .field input, .field select, .field textarea, input[type="email"], input[type="password"] { border-color: var(--border-strong); }
button:active, .btn:active, .login-btn:active { transform: scale(0.985); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
/* Apple-ronde 2 (Seyed 2772, 2 okt): één helder accent alleen op primaire knoppen; de diepe paarsen gaan terug naar vlakken,
 * hover en focus; kaarten zonder rand met zachte diepte; velden en knoppen op 12px; tabs als segmentknop. Platformbreed. */
.btn-gold, .login-btn, .btn-primair { background: var(--cta); color: #fff; border-color: transparent; }
.btn-gold:hover, .login-btn:hover, .btn-primair:hover { background: var(--cta-hover); }
.btn, .login-btn, .field input, .field textarea, .field select, .login-card input { border-radius: 12px; }
.btn-sm { border-radius: 10px; }
.btn-ghost { background: #F2F2F2; border-color: transparent; color: var(--ink); }
.btn-ghost:hover { background: #E7E7E7; }
.card, .stat, .conv-list, .agent-card, .modal { border: none; box-shadow: 0 1px 2px rgba(5,3,8,0.04), 0 10px 30px rgba(5,3,8,0.05); }
.modal { border-radius: 24px; }
.tabs { border-bottom: none; background: #F2F2F2; padding: 4px; border-radius: 999px; display: inline-flex; max-width: 100%; gap: 2px; }
.tabs button { border-bottom: none !important; border-radius: 999px; padding: 8px 14px; }
.tabs button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(5,3,8,0.08); }
.nav-item .badge { background: #E7E7E7; color: #050308; }
.topbar .avatar { background: #F2F2F2; color: var(--ink); }
.stat .value.gold { color: var(--ink); }