@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=DM+Mono:wght@400;500&display=swap');

/* ── Design tokens — gedeeld met asperity.nl ───────────────
   Standaard licht met gouden accenten, met een strakke
   zakelijke sans (Inter) voor alle UI/tekst. Cormorant
   Garamond en DM Mono zijn bewust beperkt tot resp. grote
   merk-koppen en kleine metadata-labels — niet meer de
   hoofdmoot van de tekst. Donker kan aangezet worden (zie
   hieronder) en is dan de uitzondering, niet de basis. ─ */
:root {
  --gold:        #B8933A;
  --gold-light:  #C9A84C;
  --gold-dim:    #8A6B22;
  --gold-faint:  rgba(184,147,58,.12);
  --black:       #FAF8F3;
  --black-2:     #F2EEE5;
  --black-3:     #FFFFFF;
  --black-4:     #EFEAE0;
  --black-5:     #E3DCCC;
  --white:       #18170F;
  --white-70:    rgba(24,23,15,.78);
  --white-40:    rgba(24,23,15,.55);
  --white-15:    rgba(24,23,15,.16);
  --line:        rgba(122,94,26,.35);

  --c-success:       #15803D;
  --c-success-bg:     rgba(21,128,61,.1);
  --c-success-border: rgba(21,128,61,.35);
  --c-error:          #B91C1C;
  --c-error-bg:       rgba(185,28,28,.1);
  --c-error-border:   rgba(185,28,28,.35);
  --c-warning:        #B45309;
  --c-warning-bg:     rgba(180,83,9,.1);
  --c-warning-border: rgba(180,83,9,.35);

  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow:    0 4px 12px rgba(0,0,0,.1);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.16);

  --font:      'Inter', system-ui, -apple-system, sans-serif;
  --font-serif:'Cormorant Garamond', serif;
  --font-mono: 'DM Mono', monospace;
  --transition: 150ms cubic-bezier(.4,0,.2,1);
}

/* ── Donkere modus ────────────────────────────────────────
   Actief zodra <html data-theme="dark"> staat — geschakeld
   vanuit "Mijn account" (of tijdens registreren) en onthouden
   in localStorage (zie theme-init.js, dat dit vóór de eerste
   render al zet zodat er geen flits van het verkeerde thema
   is). Zelfde variabelenamen, dus geen enkel component hoeft
   te weten in welk thema het draait. ─ */
:root[data-theme="dark"] {
  --gold:        #C9A84C;
  --gold-light:  #E2C97E;
  --gold-dim:    #7A5E1A;
  --gold-faint:  rgba(201,168,76,.1);
  --black:       #08080A;
  --black-2:     #0E0E11;
  --black-3:     #17171B;
  --black-4:     #1E1E23;
  --black-5:     #29292F;
  --white:       #F7F5F0;
  --white-70:    rgba(247,245,240,.86);
  --white-40:    rgba(247,245,240,.6);
  --white-15:    rgba(247,245,240,.22);
  --line:        rgba(201,168,76,.3);

  /* Functionele kleuren, gedimd voor een donkere achtergrond */
  --c-success:       #4ADE80;
  --c-success-bg:     rgba(74,222,128,.1);
  --c-success-border: rgba(74,222,128,.35);
  --c-error:          #F87171;
  --c-error-bg:       rgba(248,113,113,.1);
  --c-error-border:   rgba(248,113,113,.35);
  --c-warning:        #E3B341;
  --c-warning-bg:     rgba(227,179,65,.1);
  --c-warning-border: rgba(227,179,65,.35);

  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow:    0 4px 12px rgba(0,0,0,.35);
  --shadow-lg: 0 30px 70px rgba(0,0,0,.55);
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Auth-pagina body ───────────────────────────────────── */
body {
  font-family: var(--font);
  background: var(--black);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  color: var(--white);
  -webkit-font-smoothing: antialiased;
}

/* ── Auth kaart ─────────────────────────────────────────── */
.auth-brand {
  text-align: center;
  margin-bottom: 1.75rem;
}
.auth-brand__logo {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--gold);
  text-decoration: none;
  font-family: var(--font-serif);
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.auth-brand__logo img { display: block; height: 32px; width: auto; }
.auth-brand__sub {
  color: var(--white-40);
  font-size: .82rem;
  margin-top: .4rem;
  letter-spacing: .01em;
}

.auth-form {
  width: 100%;
  max-width: 460px;
  background: var(--black-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2rem;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.auth-form::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, var(--gold), var(--gold-light));
}

.auth-form h1 {
  font-family: var(--font);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--white);
  margin-bottom: 1.5rem;
}

/* ── Labels & inputs ────────────────────────────────────── */
label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--white-70);
  margin-bottom: .4rem;
  margin-top: 1.1rem;
}
label:first-of-type { margin-top: 0; }
label small { font-weight: 400; color: var(--white-40); }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
textarea,
select {
  display: block;
  width: 100%;
  padding: .65rem .875rem;
  border: 1.5px solid var(--white-15);
  border-radius: var(--radius-sm);
  font-size: .9375rem;
  font-family: var(--font);
  color: var(--white);
  background: var(--black-4);
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-faint);
}
input::placeholder, textarea::placeholder { color: var(--white-40); }
textarea { resize: vertical; min-height: 90px; }
select { cursor: pointer; }

/* ── Knoppen (alleen binnen .auth-form — niet globaal) ──── */
.auth-form button[type="submit"],
.btn-submit {
  display: block;
  width: 100%;
  margin-top: 1.5rem;
  padding: .8rem 1rem;
  background: var(--gold);
  color: var(--black);
  font-size: .9rem;
  font-family: var(--font);
  font-weight: 700;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.auth-form button[type="submit"]:hover {
  background: var(--gold-light);
  box-shadow: 0 8px 22px rgba(201,168,76,.3);
  transform: translateY(-1px);
}
.auth-form button[type="submit"]:active { transform: translateY(0); }

/* ── Meldingen ──────────────────────────────────────────── */
.notice {
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.1rem;
  font-size: .875rem;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  line-height: 1.5;
}
.notice--success {
  background: var(--c-success-bg);
  border: 1px solid var(--c-success-border);
  color: var(--c-success);
}
.notice--error {
  background: var(--c-error-bg);
  border: 1px solid var(--c-error-border);
  color: var(--c-error);
}

/* ── Auth links ─────────────────────────────────────────── */
.auth-form p {
  margin-top: 1.1rem;
  font-size: .85rem;
  color: var(--white-40);
  line-height: 1.6;
}
a {
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
}
a:hover { color: var(--gold-light); text-decoration: underline; }

/* ── Auth voettekst ─────────────────────────────────────── */
.auth-footer {
  margin-top: 1.5rem;
  font-size: .78rem;
  color: var(--white-40);
  text-align: center;
}
.auth-footer a { color: var(--white-40); font-weight: 500; }
.auth-footer a:hover { color: var(--gold); }

/* ── Mobiel ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  body { padding: 1.5rem .75rem; }
  .auth-form { padding: 1.75rem 1.25rem; }
}

/* ── Eigen lijn-iconensysteem (vervangt losse emoji) ──────
   Erft kleur via currentColor — standaard goud, en schaalt met de
   font-size van de omliggende context (1em) zodat hetzelfde icoon
   ongewijzigd werkt in een tab-label, een kaart-icoon of een lijstitem. */
.icon {
  width: 1em;
  height: 1em;
  color: var(--gold);
  vertical-align: -0.15em;
  flex-shrink: 0;
}

/* ── Doelgroep-kiezer (school/bedrijf) ──────────────────── */
.voor-picker {
  text-align: center;
  padding: 2rem 1.5rem .5rem;
  max-width: 1100px;
  margin: 0 auto;
}
.voor-picker__label {
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white-40);
  font-weight: 600;
  margin: 0 0 .85rem;
}
.voor-tabs {
  display: flex;
  justify-content: center;
  gap: .85rem;
  flex-wrap: wrap;
}
.voor-tab {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .75rem 1.4rem;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--line);
  background: var(--black-3);
  color: var(--white-70);
  font-size: .95rem;
  text-decoration: none;
  text-align: left;
  transition: border-color 120ms, box-shadow 120ms, background 120ms;
}
.voor-tab .icon { width: 1.5em; height: 1.5em; }
.voor-tab__text { display: flex; flex-direction: column; line-height: 1.35; }
.voor-tab__text strong { font-size: 1rem; }
.voor-tab__text small { font-size: .76rem; color: var(--white-40); font-weight: 400; }
.voor-tab:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.voor-tab.is-active {
  background: var(--gold-faint);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-faint);
}
.voor-tab.is-active .icon { color: var(--gold-dim); }
.voor-tab.is-active .voor-tab__text small { color: var(--white-70); }
@media (max-width: 480px) {
  .voor-picker { padding: 1.5rem 1rem .5rem; }
  .voor-tabs { flex-direction: column; }
  .voor-tab { justify-content: flex-start; }
}

/* ── Taal-tabs (NL/EN) — kleinere variant van .voor-tabs ──── */
.lang-tabs {
  display: flex;
  justify-content: center;
  gap: .4rem;
  padding: .6rem 1.5rem 0;
  max-width: 1100px;
  margin: 0 auto;
}
.lang-tab {
  padding: .3rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--white-70);
  font-weight: 600;
  font-size: .78rem;
  text-decoration: none;
}
.lang-tab:hover {
  color: var(--gold);
  border-color: var(--gold);
  text-decoration: none;
}
.lang-tab.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
}
.lang-tab.is-active:hover { color: var(--black); }

/* ── Taal-tabs geïntegreerd in de site-header (rechtsboven, overal gelijk) ── */
.site-header__nav .lang-tabs {
  display: flex;
  gap: .3rem;
  padding: 0;
  margin: 0 0 0 .4rem;
  max-width: none;
}
.site-header__nav .lang-tab {
  padding: .3rem .65rem;
  font-size: .72rem;
}

/* ── Taal-tabs als losstaande hoek-widget (pagina's zonder site-header,
   bv. login/registreren) — vaste positie rechtsboven, overal gelijk ──── */
.lang-tabs--corner {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 100;
  margin: 0;
  max-width: none;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .25rem;
}
@media (max-width: 480px) {
  .lang-tabs--corner { top: .6rem; right: .6rem; }
}