/* ═══════════════════════════════════════════════════════
   ClipsBrowser — Default (licht) thema
   Kopieer dit bestand om een nieuw thema te maken.
   ═══════════════════════════════════════════════════════ */
:root {

  /* ── Typografie ──────────────────────────────────────── */
  --font-body:      'Lato', system-ui, -apple-system, sans-serif;
  --font-size-base: 14px;
  --line-height:    1.5;

  /* ── Basisoppervlakken ───────────────────────────────── */
  --bg:       #f6f8fa;   /* paginaachtergrond */
  --surface:  #e9e3d2;   /* kaarten, sidebar, modals */
  --surface2: #f0f2f4;   /* inputs, hover-states, badges */

  /* ── Randen ──────────────────────────────────────────── */
  --border:       #9ea9b4;   /* standaard rand */
  --border-hover: #d0d7de;   /* rand bij hover (kaarten, clips, tiles) */

  /* ── Tekst ───────────────────────────────────────────── */
  --text:     #1f2328;   /* hoofdtekst */
  --text-dim: #636c76;   /* metadata, labels, placeholders */

  /* ── Accentkleur ─────────────────────────────────────── */
  --accent:        #485859;           /* knoppen, links, actieve states */
  --accent2:       #3a4748;           /* hover op accent, donkerder tint */
  --accent3:       rgba(11, 104, 160, 0.44); /* hover en active submenulinks */
  --accent-subtle: rgba(72,88,89,0.06);  /* actieve items achtergrond */
  --accent-muted:  rgba(72,88,89,0.10);  /* tag-pills, focus-ring */
  --accent-border: rgba(72,88,89,0.30);  /* tag-pill randen, actieve borders */
  --accent-badge:  rgba(72,88,89,0.85);  /* clip-badge op thumbnail */

  /* ── Statuskleuren ───────────────────────────────────── */
  --danger:  #cf222e;
  --success: #1a7f37;

  /* ── Toast achtergronden ─────────────────────────────── */
  --toast-success-bg:     #dafbe1;
  --toast-success-border: #82e09a;
  --toast-success-text:   #1a7f37;
  --toast-error-bg:       #ffebe9;
  --toast-error-border:   #f5a9a6;
  --toast-error-text:     #cf222e;
  --toast-info-bg:        #ddf4ff;
  --toast-info-border:    #80ccff;
  --toast-info-text:      #0969da;

  /* ── Overlays / donkere elementen ────────────────────── */
  --overlay-bg:    rgba(0,0,0,0.70);  /* modal backdrop */
  --thumb-overlay: rgba(0,0,0,0.50);  /* video-tile hover overlay */
  --duration-bg:   rgba(0,0,0,0.80);  /* duur-badge op thumbnail */
  --duration-text: #e8eaed;           /* tekst op donkere duration-badge */
  --thumb-bg:      #e8eaed;           /* placeholder als thumbnail ontbreekt */
  --on-dark:       #ffffff;           /* tekst/iconen op donkere achtergrond */
  --video-bg:      #000000;           /* achtergrond van videospeler */

  /* ── Layout ──────────────────────────────────────────── */
  --radius:    4px;
  --sidebar-w: 200px;
}