/* =============================================================
   Oefenmeester — Centrale Brand Kleuren (Lichte look)
   Pas ALLEEN dit bestand aan om kleuren site-breed te wijzigen.
   ============================================================= */

:root {
  /* ── Primair — Marineblauw ─────────────────────────────── */
  --primary:      #1B2E6B;   /* Knoppen, navbar, koppen */
  --primary-dk:   #152455;   /* Hover-staat */
  --primary-sec:  #2A4399;   /* Links, secondaire knoppen */
  --primary-lt:   #EAF0FF;   /* Info-blokken, actieve items */
  --primary-mid:  #C5D3F5;   /* Borders, subtiele accenten */

  /* ── Accent — Goud ────────────────────────────────────── */
  --accent:       #C9A84C;   /* Badges, iconen, sterren */
  --accent-hv:    #E8C46A;   /* Hover goud */
  --accent-dk:    #8B6E2A;   /* Rand gouden badges */
  --accent-bg:    #FEF9EC;   /* Tip-blokken achtergrond */

  /* ── Achtergronden & Vlakken ─────────────────────────── */
  --bg:           #F7F9FF;   /* Licht blauw-wit paginaachtergrond */
  --surface:      #f1f1f1;   /* Kaarten, modals, formulieren */
  --surf2:        #F0F4FF;   /* Zachtblauwe kaartachtergronden */
  --surf3:        #E6ECFF;   /* Dividers, subtiele vlakken */

  /* ── Tekst ───────────────────────────────────────────── */
  --text:         #1A1A2E;   /* Bodytekst */
  --text2:        #4B5563;   /* Subtekst */
  --text3:        #9CA3AF;   /* Placeholders, metadata */
  --white:        #FFFFFF;

  /* ── Borders ─────────────────────────────────────────── */
  --border:       rgba(27,46,107,0.08);
  --border2:      rgba(27,46,107,0.16);

  /* ── Functioneel ─────────────────────────────────────── */
  --green:        #16A34A;
  --green-bg:     #DCFCE7;
  --red:          #DC2626;
  --red-bg:       #FEE2E2;
  --amber:        #D97706;
  --amber-bg:     #FEF3C7;
  --orange:       #EA580C;

  /* ── Schaduwen ───────────────────────────────────────── */
  --shadow-sm:    0 1px 3px rgba(27,46,107,0.07);
  --shadow-md:    0 4px 16px rgba(27,46,107,0.10);
  --shadow-lg:    0 8px 32px rgba(27,46,107,0.13);

  /* ── Border radius ───────────────────────────────────── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  24px;

  /* ── Aliassen (bestaande pagina's gebruiken --teal) ──── */
  --teal:         var(--primary);
  --teal-dk:      var(--primary-dk);
  --teal-bg:      var(--primary-lt);
  --teal-lt:      var(--primary-lt);
}

/* ── Typografie ──────────────────────────────────────────── */
.display-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
}
h1, h2.page-title { letter-spacing: -0.3px; }

/* ── Micro-animaties (consistent site-breed) ─────────────── */
:root {
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-normal: 200ms;
  --dur-slow:   350ms;
}

/* Skeleton loading shimmer */
.skeleton {
  background: linear-gradient(90deg, var(--surf2) 25%, var(--surf3) 50%, var(--surf2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r-md);
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Fade-in bij laden */
.fade-in {
  animation: fade-in var(--dur-slow) var(--ease) both;
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Slide-in van rechts (modals, panels) */
.slide-in {
  animation: slide-in var(--dur-slow) var(--ease) both;
}
@keyframes slide-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Bounce-in voor succes-iconen */
.bounce-in {
  animation: bounce-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes bounce-in {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Basis helpers ───────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

::selection {
  background: var(--primary-lt);
  color: var(--primary-dk);
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--surf2); }
::-webkit-scrollbar-thumb { background: var(--primary-mid); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-sec); }