/* Speelopvliegers Design System — geleverd door Suustival via Claude Design.
   Eén bestand, de losse tokenbestanden achter elkaar, zodat de pagina er één
   stylesheet voor ophaalt. Niet met de hand aanpassen: dit is aangeleverd
   materiaal, net als het logo. Zie design-system.md hoofdstuk 1. */

/* --- tokens/fonts.css --- */
@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&family=Nunito:ital,wght@0,300..900;1,400..700&family=Bitter:ital,wght@0,400..800;1,400..700&display=swap");
/* SUBSTITUTED FONTS — no brand font files were supplied. Baloo 2 stands in for the
   Speelopvliegers wordmark (heavy, rounded, warm); Bitter stands in for the
   "Feestje der herkenning" tagline serif; Nunito carries UI + body copy. */
:root{--font-display:"Baloo 2","Baloo 2 Fallback",system-ui,sans-serif;--font-body:"Nunito",system-ui,-apple-system,sans-serif;--font-accent:"Bitter",Georgia,serif;--font-mono:ui-monospace,"SFMono-Regular",Menlo,monospace}

/* --- tokens/colors.css --- */
:root{
/* Brand — sampled from speelopvliegers_hoofdlogo_printbaar_A4.pdf */
--flame-orange:#fe7a35;--flame-coral:#fe5942;--flame-rose:#fa4454;--flame-pink:#f6335c;
--pink-500:#f5315a;--pink-600:#ef285d;--pink-700:#d51d4e;--pink-300:#fa7d97;--pink-100:#fde3e9;
--plum-900:#2a072d;--plum-700:#4a2450;--plum-500:#6d4a73;--plum-300:#9c82a0;--plum-100:#e6dce8;
--blush-300:#fedcce;--blush-200:#ffe9e0;--blush-100:#fff4ee;--cream:#fff8f4;--white:#ffffff;
--line-300:#e6cfc5;--line-200:#f2e0d8;--line-100:#f7ece6;
/* Semantic — derived, warm-tuned; not present in the source material */
--green-500:#3aa36a;--amber-500:#e8952b;--red-500:#d92040;--blue-500:#4a7bb7;
/* Gradients */
--grad-flame:linear-gradient(158deg,var(--flame-orange) 0%,var(--flame-rose) 55%,var(--flame-pink) 100%); /* @kind color */
--grad-flame-soft:linear-gradient(158deg,#fff1e6 0%,#ffe1e6 100%); /* @kind color */
--grad-protect:linear-gradient(180deg,rgba(42,7,45,0) 0%,rgba(42,7,45,.62) 100%); /* @kind color */
/* Semantic aliases */
--text-heading:var(--plum-900);--text-body:var(--plum-700);--text-muted:var(--plum-500);
--text-accent:var(--pink-600);--text-on-brand:var(--white);--text-on-blush:var(--plum-900);
--surface-page:var(--cream);--surface-card:var(--white);--surface-sunken:var(--blush-100);
--surface-blush:var(--blush-300);--surface-ink:var(--plum-900);--surface-brand:var(--pink-500);
--border-subtle:var(--line-200);--border-strong:var(--line-300);--border-ink:var(--plum-900);
--accent:var(--pink-500);--accent-hover:var(--pink-600);--accent-press:var(--pink-700);
--focus-ring:var(--pink-500);
--status-success:var(--green-500);--status-warning:var(--amber-500);--status-error:var(--red-500);--status-info:var(--blue-500)}

/* --- tokens/typography.css --- */
:root{
--fs-display-1:clamp(44px,6vw,76px); /* @kind font */
--fs-display-2:clamp(34px,4.4vw,54px); /* @kind font */
--fs-h1:40px;--fs-h2:30px;--fs-h3:23px;--fs-h4:19px;
--fs-body-lg:19px;--fs-body:17px;--fs-body-sm:15px;--fs-caption:13px;--fs-eyebrow:12px;
--lh-tight:1.06; /* @kind font */
--lh-snug:1.18; /* @kind font */
--lh-heading:1.24; /* @kind font */
--lh-body:1.62; /* @kind font */
--lh-loose:1.75; /* @kind font */
--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold:700; /* @kind font */
--fw-extrabold:800; /* @kind font */
--ls-display:-0.015em; /* @kind font */
--ls-heading:-0.008em; /* @kind font */
--ls-body:0; /* @kind font */
--ls-eyebrow:0.26em; /* @kind font */
--ls-label:0.02em; /* @kind font */
--tt-eyebrow:uppercase; /* @kind font */
}

/* --- tokens/spacing.css --- */
:root{--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;
--gutter-card:24px;--gutter-section:64px;--gutter-slide:72px;--maxw-prose:64ch; /* @kind spacing */
--maxw-content:1120px; /* @kind spacing */
}

/* --- tokens/radius.css --- */
:root{--radius-xs:6px;--radius-sm:10px;--radius-md:16px;--radius-lg:22px;--radius-xl:30px;--radius-2xl:40px;--radius-pill:999px;--border-width:1.5px; /* @kind radius */
--border-width-strong:2.5px; /* @kind radius */
}

/* --- tokens/elevation.css --- */
:root{--shadow-xs:0 1px 2px rgba(42,7,45,.06);
--shadow-sm:0 2px 6px rgba(42,7,45,.07);
--shadow-md:0 6px 18px rgba(42,7,45,.09);
--shadow-lg:0 14px 40px rgba(42,7,45,.12);
--shadow-brand:0 8px 22px rgba(245,49,90,.28);
--shadow-inset:inset 0 1px 0 rgba(255,255,255,.6); /* @kind shadow */
--ring-focus:0 0 0 3px rgba(245,49,90,.32); /* @kind shadow */
}

/* --- tokens/motion.css --- */
:root{
--dur-fast:120ms; /* @kind other */
--dur-base:200ms; /* @kind other */
--dur-slow:320ms; /* @kind other */
--dur-slower:520ms; /* @kind other */
--ease-soft:cubic-bezier(.22,.61,.36,1); /* @kind other */
--ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
--ease-pop:cubic-bezier(.34,1.56,.64,1); /* @kind other */
--lift-hover:translateY(-2px); /* @kind other */
--press-scale:.97; /* @kind other */
}

/* --- tokens/base.css --- */
body{font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-heading);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);font-weight:var(--fw-extrabold);margin:0}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}h4{font-size:var(--fs-h4)}
p{margin:0 0 var(--space-4);text-wrap:pretty}
a{color:var(--text-accent);text-decoration-color:color-mix(in oklch,var(--accent) 40%,transparent);text-underline-offset:3px}
a:hover{color:var(--accent-press);text-decoration-color:currentColor}
::selection{background:var(--blush-300);color:var(--plum-900)}
:focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:var(--radius-xs)}