/* ============================================================
   Schoolvoetbal Core — design-tokens
   Machine-leesbare versie van de Website Toolkit (schoolvoetbal.nl).
   Bron: Website_Toolkit_Schoolvoetbal.html §1 (kleuren), §6 (radius),
   §7 (schaduwen), §9 (focus-ring).
   Plugins verwijzen hiernaar met hun eigen variabelen + hex-fallback:
   --svhof-primary: var(--sv-color-primary, #003d7c);
   ============================================================ */

:root {
  /* Kleuren — toolkit §1 */
  --sv-color-primary:       #003D7C;
  --sv-color-primary-dark:  #002952;
  --sv-color-primary-light: #DEF1FB;
  --sv-color-accent:        #6CBE57;
  --sv-color-accent-dark:   #5BA249;
  --sv-color-accent-light:  #E6F4E2;
  --sv-color-text:          #333333;
  --sv-color-text-muted:    #666666;
  --sv-color-bg:            #F8F8F8;
  --sv-color-border:        #DDDDDD;

  /* Functionele kleuren — foutmeldingen (games, formulieren); AA op wit */
  --sv-color-error:         #C0392B;
  --sv-color-error-light:   #FADBD8;

  /* Border radius — toolkit §6 */
  --sv-radius-sm:   6px;
  --sv-radius-md:   10px;
  --sv-radius-lg:   12px;
  --sv-radius-xl:   16px;
  --sv-radius-2xl:  20px;
  --sv-radius-pill: 30px;
  --sv-radius-full: 999px;

  /* Schaduwen (blauw-getint) — toolkit §7 */
  --sv-shadow-sm: 0 1px 3px rgba(0, 61, 124, 0.08);
  --sv-shadow-md: 0 2px 8px rgba(0, 61, 124, 0.06);
  --sv-shadow-lg: 0 4px 12px rgba(0, 61, 124, 0.10);
  --sv-shadow-xl: 0 8px 24px rgba(0, 61, 124, 0.12);

  /* Focus-ring — toolkit §9 */
  --sv-focus-ring: 2px solid #6CBE57;
}