/*
 * Gedeelde thematokens voor alle Rekenen-schermen.
 *
 * Componenten gebruiken betekenisvolle variabelen. De oude paletnamen blijven
 * voorlopig als alias bestaan, zodat het huidige uiterlijk tijdens de migratie
 * pixelgelijk blijft en volgende thema's niet de spelcode hoeven te wijzigen.
 */
:root,
:root[data-theme="pastel-meadow"] {
  color-scheme: only light;

  --theme-browser-color: #f3eaf8;
  --theme-font-interface: ui-rounded, "SF Pro Rounded", "Nunito", "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --theme-font-display: var(--theme-font-interface);
  --theme-font-learning: var(--theme-font-interface);

  --theme-text: #3d3563;
  --theme-text-muted: #6a6291;
  --theme-accent: #7c6bd6;
  --theme-accent-rgb: 124, 107, 214;
  --theme-success: #8fd5bb;
  --theme-error: #f5b48e;
  --theme-line: rgba(124,107,214,.15);
  --theme-surface: rgba(255,254,253,.94);
  --theme-card-background: linear-gradient(160deg, #fffefd, #f9f5fd);
  --theme-page-background: radial-gradient(circle at 8% 6%, rgba(255,244,214,.95), transparent 42%), radial-gradient(circle at 95% 95%, rgba(196,218,250,.95), transparent 46%), radial-gradient(circle at 90% 8%, rgba(253,226,236,.9), transparent 40%), linear-gradient(135deg, #fdeff1, #ece4fa);
  --theme-parent-background: radial-gradient(circle at 8% 4%, rgba(255,244,214,.8), transparent 38%), radial-gradient(circle at 96% 96%, rgba(196,218,250,.75), transparent 42%), linear-gradient(135deg, #fdf4f4, #eee9fa);
  --theme-gate-background: var(--theme-parent-background);
  --theme-shadow-lg: 0 22px 44px rgba(132,112,190,.20), 0 6px 14px rgba(132,112,190,.10), inset 0 2px 4px rgba(255,255,255,.95), inset 0 -8px 16px rgba(176,160,225,.14);
  --theme-shadow: 0 10px 20px rgba(132,112,190,.22), 0 2px 6px rgba(132,112,190,.12), inset 0 2px 3px rgba(255,255,255,.9), inset 0 -5px 10px rgba(140,120,200,.16);
  --theme-shadow-press: 0 2px 6px rgba(132,112,190,.20), inset 0 4px 9px rgba(132,112,190,.22);
  --theme-shadow-inset: inset 0 4px 10px rgba(132,112,190,.20), inset 0 -3px 5px rgba(255,255,255,.9);
  --theme-parent-shadow: 0 16px 38px rgba(99,81,150,.13), 0 3px 10px rgba(99,81,150,.07);

  --theme-counter-area: linear-gradient(180deg, #c9eddf, #e0f6ee);
  --theme-target-area: linear-gradient(180deg, #ffe6d3, #fff3e8);
  --theme-target-border: rgba(214,150,105,.55);
  --theme-progress-transform: scaleX(-1);
  --theme-heading-end-transform: scaleX(-1);

  --theme-icon-peach-1: #ffe6d4;
  --theme-icon-peach-2: #ffc19a;
  --theme-icon-pink-1: #ffe0ea;
  --theme-icon-pink-2: #f5a8c1;
  --theme-icon-lavender-1: #e6dffc;
  --theme-icon-lavender-2: #b3a5ec;
  --theme-icon-lavender-dark-1: #cfc4f6;
  --theme-icon-lavender-dark-2: #9a89e2;
  --theme-icon-mint-1: #d9f5e9;
  --theme-icon-mint-2: #9bdcc4;
  --theme-icon-blue-1: #dcebfd;
  --theme-icon-blue-2: #a6c7f1;
  --theme-icon-cream-1: #ffffff;
  --theme-icon-cream-2: #ece6f8;
  --theme-icon-yellow-1: #fff3cf;
  --theme-icon-yellow-2: #ffd47d;
  --theme-icon-brown-1: #e7c9b0;
  --theme-icon-brown-2: #c99774;

  /* Tijdelijke aliases voor bestaande componenten. */
  --ink: var(--theme-text);
  --ink-soft: var(--theme-text-muted);
  --soft: var(--theme-text-muted);
  --lav: var(--theme-accent);
  --lav-d: var(--theme-accent);
  --lav-1: #e8e2fb;
  --lav-2: #cfc5f4;
  --mint-1: #daf4ea;
  --mint-2: #b4e5d3;
  --mint-d: #2b7a62;
  --blue-1: #deebfc;
  --blue-2: #bcd6f6;
  --peach-1: #ffe9da;
  --peach-2: #ffd0b3;
  --peach-d: #b5683a;
  --pink-1: #fde4ec;
  --pink-2: #f7c4d5;
  --pink-d: #c2476f;
  --cream-1: #fffdfb;
  --cream-2: #f3eefb;
  --paper: var(--theme-surface);
  --mint: #e2f7ee;
  --peach: #fff0dc;
  --rose: #fde0e6;
  --line: var(--theme-line);
  --clay-lg: var(--theme-shadow-lg);
  --clay: var(--theme-shadow);
  --clay-press: var(--theme-shadow-press);
  --inset: var(--theme-shadow-inset);
  --shadow: var(--theme-parent-shadow);
  --ok: var(--theme-success);
  --bad: var(--theme-error);
  --setup-button-radius: 24px;
}

.icon-defs{position:absolute}.theme-asset{object-fit:contain}

html[data-preview-mode="production"] [data-development-only]{display:none!important}.development-preview-control{position:fixed;left:50%;bottom:max(10px,env(safe-area-inset-bottom));z-index:12000;display:flex;align-items:center;gap:8px;transform:translateX(-50%);padding:8px 11px;border:1px solid rgba(255,255,255,.42);border-radius:999px;background:rgba(27,31,47,.88);box-shadow:0 5px 18px rgba(20,24,45,.22);color:#fff;font:700 12px/1.2 system-ui,-apple-system,sans-serif;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.development-preview-control input{width:17px;height:17px;margin:0;accent-color:#73d4f4;cursor:pointer}.development-preview-control label{display:flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap}@media(max-width:520px){.development-preview-control{padding:7px 9px;font-size:11px}}