/* SuperDoggo — design tokens (P1 typografie · P2 spacing · P3 schaduw · P4 radius · P8 tintschaal).
   ADDITIEF en veilig: dit bestand voegt NIEUWE tokens toe en herdefinieert de bestaande
   site-variabelen (--paper/--card/--ink/--accent/…) NIET, zodat de ~60 bestaande pagina's
   ongewijzigd blijven werken. Nieuwe/gemigreerde componenten gebruiken de tokens hieronder.
   Geladen op elke pagina via @import boven in sd-polish.css. Zie STIJLGIDS.md. */

:root{
  /* ---- P8 · Terracotta tintschaal (merk-accent #C7512A) ---- */
  --accent-50:#FBF1EC;  --accent-100:#F6E0D5; --accent-200:#EEC3AE; --accent-300:#E3A184;
  --accent-400:#D77A54; --accent-500:#C7512A; --accent-600:#A8421F; --accent-700:#863219;
  --accent-800:#642614; --accent-900:#431910;
  --accent-rgb:199,81,42;               /* voor rgba(var(--accent-rgb), …) */

  /* ---- Blauw (app-merk, o.a. app.html / store) ---- */
  --blauw-50:#EAF0FF; --blauw-100:#D6E2FF; --blauw-300:#7DB0FF; --blauw-500:#0942B6;
  --blauw-700:#062E80; --blauw-900:#0B1B45; --blauw-rgb:9,66,182;

  /* ---- Neutrale schaal (sage-inkt) ---- */
  --gray-50:#F5F8F1; --gray-100:#EDF1E7; --gray-200:#E3E8DA; --gray-300:#CDD5C4;
  --gray-400:#9AA79A; --gray-500:#5C6B61; --gray-600:#45524A; --gray-700:#333E37;
  --gray-800:#232B26; --gray-900:#1E2B24;

  /* ---- Semantische status ---- */
  --ok-500:#2E8B57; --waarschuwing-500:#C98A2A; --fout-500:#C0392B; --info-500:#3E6FB0;

  /* ---- P1 · Typografische schaal (basis 1rem, ratio 1.25) ---- */
  --text-xs:.64rem; --text-sm:.8rem; --text-base:1rem; --text-md:1.25rem;
  --text-lg:1.563rem; --text-xl:1.953rem; --text-2xl:2.441rem; --text-3xl:3.052rem;
  --leading-tight:1.15; --leading-normal:1.6;
  --font-body:"Inter",system-ui,sans-serif;
  --font-kop:"Bricolage Grotesque",sans-serif;
  --font-mono:"Space Mono",monospace;

  /* ---- P2 · 8-punts spacing ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;

  /* ---- P4 · Radius-schaal ---- */
  --radius-sm:12px; --radius-md:16px; --radius-lg:20px; --radius-xl:28px; --radius-full:999px;

  /* ---- P3 · Elevatie (3 niveaus) ---- */
  --shadow-1:0 1px 2px rgba(30,43,36,.10),0 1px 3px rgba(30,43,36,.06);
  --shadow-2:0 6px 22px -10px rgba(30,43,36,.30);
  --shadow-3:0 22px 50px -22px rgba(30,43,36,.42);

  /* ---- Overgangen ---- */
  --snel:.15s ease; --normaal:.28s ease;
}

/* Donker thema: alleen de scale-tokens bijstellen die visueel anders moeten.
   (De bestaande dark-overrides in sd-polish.css blijven leidend voor de oude variabelen.) */
html[data-theme="dark"]{
  --gray-50:#1d2326; --gray-100:#171c1e; --gray-200:#2c3438; --gray-300:#3a454a;
  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 10px 28px -14px rgba(0,0,0,.66);
  --shadow-3:0 24px 54px -20px rgba(0,0,0,.75);
}