/* ============================================================
 *  Pluffie Design Tokens (v2)
 *
 *  Het kernidee: een gedeelde warme basiswereld, een constante
 *  terracotta-accent (de "lijm"), en per Pluffie een eigen pastel
 *  uit hetzelfde harmonieuze palet. Daardoor zien de Pluffies
 *  eruit als vrienden van elkaar: een bende uit hetzelfde wereldje.
 *
 *  Backwards-compat: variabel-namen die de vorige iteratie van het
 *  thema gebruikte (--pluffie-mokka*, --pluffie-peach*, etc) blijven
 *  bestaan en wijzen nu naar de nieuwe waarden, zodat al gebouwde
 *  componenten direct mee gaan.
 * ============================================================ */

:root {

	/* === Merkbasis (de wereld) === */
	--pluffie-bg:           #FBF6EF; /* paginavlak, cream */
	--pluffie-bg-warm:      #F3E7D9; /* warm secundair vlak, sectie-afwisseling */
	--pluffie-bg-card:      #FFFCF6; /* witte cards / surfaces */
	--pluffie-white:        #FFFFFF;

	--pluffie-fg:           #3B2E24; /* warm darkbrown, hoofdtekst */
	--pluffie-fg-muted:     #8A7A6E; /* gedempte tekst, captions */
	--pluffie-border:       #E7DCCD; /* subtiele lijnen */
	--pluffie-border-soft:  #F3E7D9; /* nog zachtere scheiding */

	/* === Hoofdaccent (terracotta-perzik, de lijm) === */
	--pluffie-accent:       #E08A5F; /* knoppen, badges, links */
	--pluffie-accent-dark:  #C56F45; /* hover, knoppen met witte tekst */
	--pluffie-accent-light: #F7DDCB; /* zachte badges, hover-fill */

	/* === Pluffie-kleuren (vriendengroep) === */
	--pluffie-blush:        #F3C3C4; /* blush roze */
	--pluffie-boterbloem:   #F6DDA0; /* boterbloem geel */
	--pluffie-saliegroen:   #BCCDAC; /* saliegroen */
	--pluffie-hemelsblauw:  #AECFDF; /* hemelsblauw */
	--pluffie-lavendel:     #D0C5E3; /* lavendel */
	--pluffie-perzik:       #F6C8A6; /* perzik */
	--pluffie-mint:         #BFE0CD; /* mint */

	/* === Donkere wereld (warm espresso, voor sectie-contrast) ===
	 * Geen koud zwart maar een warme cacao zodat de crème-kleurige
	 * Pluffies er prachtig tegen afsteken. Dit is de "donkerder" kant
	 * van het om-en-om ritme. */
	--pluffie-dark:         #2E2620; /* primair donker sectievlak */
	--pluffie-dark-deep:    #241D18; /* diepste vlak (footer) */
	--pluffie-dark-surface: #3A3029; /* verhoogd kaartje op donker */
	--pluffie-dark-surface-2: #463A31; /* nog lichter kaartje op donker */
	--pluffie-on-dark:      #FBF6EF; /* crème tekst op donker */
	--pluffie-on-dark-muted:#C7B8AA; /* warm taupe gedempt op donker */
	--pluffie-dark-border:  rgba(251, 246, 239, 0.14); /* hairline op donker */
	--pluffie-dark-glow:    radial-gradient(60% 80% at 15% 10%, rgba(224, 138, 95, 0.16), transparent 60%);

	/* CTA-gradient (warme terracotta punch, crème tekst) */
	--pluffie-cta-gradient: linear-gradient(135deg, #E8946A 0%, #C56F45 100%);

	/* === Functioneel === */
	--pluffie-success:      #6FAE7E;
	--pluffie-warning:      #E8A857;
	--pluffie-error:        #D17B72;
	--pluffie-info:         #7BA9C7;

	/* === Karakter-kleuren (gebruiken Pluffie-palet als bron) === */
	--pluffie-karakter-dappere:    var(--pluffie-perzik);
	--pluffie-karakter-rustige:    var(--pluffie-hemelsblauw);
	--pluffie-karakter-luisteraar: var(--pluffie-lavendel);
	--pluffie-karakter-wijze:      var(--pluffie-saliegroen);

	/* === Typografie (behouden: Fredoka + Nunito) === */
	--pluffie-font-display: "Fredoka", "Comic Sans MS", system-ui, sans-serif;
	--pluffie-font-body:    "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--pluffie-fs-3xs:  0.75rem;
	--pluffie-fs-2xs:  0.875rem;
	--pluffie-fs-xs:   1rem;
	--pluffie-fs-sm:   1.125rem;
	--pluffie-fs-md:   1.25rem;
	--pluffie-fs-lg:   1.5rem;
	--pluffie-fs-xl:   2rem;
	--pluffie-fs-2xl:  2.5rem;
	--pluffie-fs-3xl:  3rem;
	--pluffie-fs-4xl:  4rem;
	--pluffie-fs-hero: clamp(2.5rem, 5vw, 4.5rem);

	--pluffie-fw-regular:  400;
	--pluffie-fw-medium:   500;
	--pluffie-fw-semibold: 600;
	--pluffie-fw-bold:     700;
	--pluffie-fw-extra:    800;

	--pluffie-lh-tight:   1.15;
	--pluffie-lh-snug:    1.3;
	--pluffie-lh-base:    1.55;
	--pluffie-lh-relaxed: 1.7;

	--pluffie-tracking-tight:  -0.02em;
	--pluffie-tracking-normal: 0;
	--pluffie-tracking-wide:   0.04em;

	/* === Spacing schaal === */
	--pluffie-space-3xs: 0.25rem;
	--pluffie-space-2xs: 0.5rem;
	--pluffie-space-xs:  0.75rem;
	--pluffie-space-sm:  1rem;
	--pluffie-space-md:  1.5rem;
	--pluffie-space-lg:  2rem;
	--pluffie-space-xl:  3rem;
	--pluffie-space-2xl: 4rem;
	--pluffie-space-3xl: 6rem;
	--pluffie-space-4xl: 8rem;

	/* === Hoekradii === */
	--pluffie-radius-xs:   0.375rem;
	--pluffie-radius-sm:   0.75rem;
	--pluffie-radius-md:   1.25rem;
	--pluffie-radius-lg:   1.75rem;
	--pluffie-radius-xl:   2.5rem;
	--pluffie-radius-blob: 60% 40% 50% 50% / 50% 50% 40% 60%;
	--pluffie-radius-blob-alt: 40% 60% 65% 35% / 55% 45% 55% 45%;
	--pluffie-radius-pill: 9999px;

	/* === Shadows (zacht, warme tint) === */
	--pluffie-shadow-soft:   0 4px 12px rgba(59, 46, 36, 0.06);
	--pluffie-shadow-medium: 0 8px 24px rgba(59, 46, 36, 0.10);
	--pluffie-shadow-large:  0 16px 48px rgba(59, 46, 36, 0.14);
	--pluffie-shadow-hover:  0 12px 32px rgba(59, 46, 36, 0.16);
	--pluffie-shadow-glow:   0 0 0 4px rgba(224, 138, 95, 0.25);
	--pluffie-shadow-inner:  inset 0 2px 8px rgba(59, 46, 36, 0.06);

	/* === Transitions === */
	--pluffie-transition-fast: 0.15s ease-out;
	--pluffie-transition-base: 0.25s ease-out;
	--pluffie-transition-slow: 0.4s ease-out;
	--pluffie-easing-bounce:   cubic-bezier(0.68, -0.55, 0.265, 1.55);
	--pluffie-easing-smooth:   cubic-bezier(0.16, 1, 0.3, 1);

	/* === Containers === */
	--pluffie-container:        1200px;
	--pluffie-container-narrow: 760px;
	--pluffie-container-wide:   1440px;
	--pluffie-gutter:           clamp(1rem, 4vw, 2rem);

	/* === Z-index schaal === */
	--pluffie-z-base:    1;
	--pluffie-z-raised:  10;
	--pluffie-z-sticky:  100;
	--pluffie-z-overlay: 500;
	--pluffie-z-modal:   1000;
	--pluffie-z-toast:   2000;

	/* === Layout-specifiek === */
	--pluffie-header-height:        84px;
	--pluffie-header-height-mobile: 64px;
	--pluffie-topbar-height:        36px;

	/* === Per-dier kleur (default fallback voor card zonder dier-attribute) === */
	--pluffie-current: var(--pluffie-accent-light);
}

/* === Per-dier kleur via data-attribute === */
[data-pluffie-dier="panda"]  { --pluffie-current: var(--pluffie-hemelsblauw); }
[data-pluffie-dier="beer"]   { --pluffie-current: var(--pluffie-perzik); }
[data-pluffie-dier="koala"]  { --pluffie-current: var(--pluffie-saliegroen); }
[data-pluffie-dier="hond"]   { --pluffie-current: var(--pluffie-boterbloem); }
[data-pluffie-dier="konijn"] { --pluffie-current: var(--pluffie-blush); }
[data-pluffie-dier="kat"]    { --pluffie-current: var(--pluffie-lavendel); }
[data-pluffie-dier="schaap"] { --pluffie-current: var(--pluffie-mint); }

/* ============================================================
 *  Backwards-compatibility aliases.
 *  Componenten die nog de oude variabel-namen gebruiken pakken
 *  automatisch de nieuwe waarden over.
 * ============================================================ */

:root {
	/* Oude mokka-* aliassen wijzen naar het nieuwe accent */
	--pluffie-mokka:        var(--pluffie-accent);
	--pluffie-mokka-dark:   var(--pluffie-accent-dark);
	--pluffie-mokka-light:  var(--pluffie-accent-light);
	--pluffie-mokka-50:     var(--pluffie-bg-warm);

	/* Oude peach-* aliassen wijzen naar perzik (Beer's Pluffie-kleur) */
	--pluffie-peach:        var(--pluffie-perzik);
	--pluffie-peach-dark:   #E5A893;
	--pluffie-peach-light:  var(--pluffie-accent-light);

	/* Oude neutralen */
	--pluffie-cream:        var(--pluffie-bg);
	--pluffie-soft-white:   var(--pluffie-bg-card);
	--pluffie-text:         var(--pluffie-fg);
	--pluffie-text-muted:   var(--pluffie-fg-muted);
	--pluffie-text-light:   #B5A698;

	/* Oude pastel-aliassen wijzen naar Pluffie-kleuren */
	--pluffie-sage:         var(--pluffie-saliegroen);
	--pluffie-sage-dark:    #A6BD9A;
	--pluffie-sage-light:   #E0EBD6;

	--pluffie-sky:          var(--pluffie-hemelsblauw);
	--pluffie-sky-dark:     #95BAD0;
	--pluffie-sky-light:    #DEEAF3;

	--pluffie-butter:       var(--pluffie-boterbloem);
	--pluffie-butter-dark:  #E6CC85;
	--pluffie-butter-light: #FBF1D2;

	--pluffie-lilac:        var(--pluffie-lavendel);
	--pluffie-lilac-dark:   #B6A5C8;
	--pluffie-lilac-light:  #EDE5F2;
}