/* AUTO-GENERATED (scripts/build-css.mjs) — token CSS bundled into one file (no @import waterfall). */

/* ===== tokens/fonts.css ===== */
/* ============================================================
   FONTS — self-hosted (no external Google Fonts request).
   Fredoka (display) + Nunito (body), variable weight, latin + latin-ext.
   ============================================================ */

/* ---- Fredoka (display) ---- */
@font-face {
  font-family: "Fredoka";
  src: url("/assets/fonts/Fredoka-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fredoka";
  src: url("/assets/fonts/Fredoka-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Nunito (body) ---- */
@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/Nunito-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/Nunito-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ===== tokens/colors.css ===== */
/* ============================================================
   COLORS — speurtochtenkinderfeestjes.nl
   Two layers:
   1. CORE PALETTE  — fixed brand colors, identical across every theme.
   2. THEME ACCENTS — 4 swappable roles per adventure theme.
      Structure & type stay identical; only the accent colors change.
   ============================================================ */

:root {
  /* ---- Core brand palette (fixed) ---- */
  --navy:          #1B3A6B;   /* deep brand navy — structure, dark UI */
  --navy-700:      #152E55;   /* darker navy for deep backgrounds */
  --teal:          #1C7C8C;   /* logo "speurtochten" teal */
  --teal-bright:   #3DB6A0;   /* fresh teal — tip dots, secondary accent */
  --blue:          #3B7DD8;   /* friendly blue */
  --orange:        #E86B2C;   /* primary warm orange — CTAs, "kreet" */
  --orange-deep:   #D4500A;   /* deep orange — pressed / emphasis */
  --gold:          #D4A534;   /* core gold */
  --gold-bright:   #E0B24C;   /* brighter gold — titles on dark */
  --green:         #2E8B57;   /* JA-flag / success green */
  --red:           #D64533;   /* NEE-flag / alert red-orange */

  /* ---- Paper & ink ---- */
  --cream:         #FBF4E4;   /* warm cream — panels, page paper */
  --cream-2:       #F4E9D2;   /* second cream — alt panels */
  --paper:         #FFFFFF;   /* pure white — cards, sticker fill */
  --brown:         #4A2F1B;   /* dark storybook brown — bubble text */
  --brown-soft:    #6E4A2E;   /* softer brown — secondary text on cream */

  /* ---- Neutral ink scale (on light) ---- */
  --ink-900:       #241A12;   /* near-black warm ink */
  --ink-700:       #50412F;   /* body text on cream */
  --ink-500:       #877760;   /* muted / eyebrow grey-brown */
  --ink-300:       #C9BCA6;   /* hairlines on cream */

  /* ---- Alpha helpers (for bleeds / scrims over imagery) ---- */
  --scrim-dark:    rgba(20, 28, 44, 0.55);
  --scrim-light:   rgba(251, 244, 228, 0.86);

  /* ===========================================================
     THEME ACCENT ROLES — default theme = the house brand.
     Override these 4 (+ surface) on a .theme-* scope per product.
     =========================================================== */
  --theme-base:        var(--navy);        /* dark themed background */
  --theme-base-deep:   var(--navy-700);    /* deeper shade of base */
  --theme-gold:        var(--gold-bright);  /* titles on the dark base */
  --theme-warm:        var(--orange);       /* kreet, highlights, names */
  --theme-secondary:   var(--teal-bright);  /* tips, labels, dot accents */
  --theme-on-base:     #FFFFFF;             /* default text on dark base */
}

/* ---- Theme: Dino (bosgroen) ---- */
.theme-dino {
  --theme-base:      #23402A;
  --theme-base-deep: #1A3120;
  --theme-gold:      #E0B24C;
  --theme-warm:      #E0612C;
  --theme-secondary: #3DB6A0;
  --theme-on-base:   #FFFFFF;
}

/* ---- Theme: Voetbal (navy + gold + orange) ---- */
.theme-voetbal {
  --theme-base:      #16284A;
  --theme-base-deep: #0F1D38;
  --theme-gold:      #E0B24C;
  --theme-warm:      var(--orange);
  --theme-secondary: var(--blue);
  --theme-on-base:   #FFFFFF;
}

/* ---- Theme: Zee / Piraat (diep blauw + teal) ---- */
.theme-zee {
  --theme-base:      #123A55;
  --theme-base-deep: #0C2B40;
  --theme-gold:      #E6C25A;
  --theme-warm:      var(--orange);
  --theme-secondary: #2FB3C9;
  --theme-on-base:   #FFFFFF;
}

/* ---- Theme: Brandweer (diep brandweerrood + helm-goud) ----
   Cast: Bram Brandweer, Bente Blus, Spetter Kat.
   base = deep fire red · gold = helmet-badge yellow (titles) ·
   warm = sunny orange (kreet/names) · secondary = water blue (tips). */
.theme-brandweer {
  --theme-base:      #9E2B25;
  --theme-base-deep: #6E1A16;
  --theme-gold:      #E0B24C;
  --theme-warm:      #D4500A;
  --theme-secondary: #3B7DD8;
  --theme-on-base:   #FFFFFF;
}

/* ============================================================
   SEMANTIC ALIASES — reference these in components, not raw hex.
   ============================================================ */
:root {
  /* Surfaces */
  --surface-dark:        var(--theme-base);
  --surface-dark-deep:   var(--theme-base-deep);
  --surface-page:        var(--cream);
  --surface-panel:       var(--cream);
  --surface-panel-alt:   var(--cream-2);
  --surface-card:        var(--paper);

  /* Text */
  --text-on-dark:        var(--theme-on-base);
  --text-title-dark:     var(--theme-gold);     /* gold titles on dark */
  --text-title-light:    var(--navy);           /* titles on cream/paper */
  --text-body:           var(--ink-700);
  --text-bubble:         var(--brown);          /* storybook bubble text */
  --text-muted:          var(--ink-500);
  --text-eyebrow:        var(--ink-500);

  /* Accents */
  --accent-warm:         var(--theme-warm);     /* kreet, names, CTA */
  --accent-warm-deep:    var(--orange-deep);
  --accent-tip:          var(--theme-secondary); /* speurtochtactie / tips */
  --accent-gold:         var(--theme-gold);

  /* Story dots (crème panels) */
  --dot-teller:          var(--orange);         /* ● vertellerstekst */
  --dot-actie:           var(--theme-secondary);/* ● speurtochtactie & tips */

  /* Lines & states */
  --border-hairline:     var(--ink-300);
  --border-cut:          var(--ink-500);        /* dashed snijlijnen */
  --focus-ring:          var(--blue);
}


/* ===== tokens/typography.css ===== */
/* ============================================================
   TYPOGRAPHY — speurtochtenkinderfeestjes.nl
   Display = Fredoka (rounded, friendly, weighty)
   Body    = Nunito (clean rounded sans)
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "Fredoka", "Baloo 2", system-ui, sans-serif;
  --font-body:    "Nunito", system-ui, -apple-system, sans-serif;

  /* ---- Weights ---- */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-extra:     800; /* @kind font */

  /* ---- Type scale (rem, 16px base) ---- */
  --fs-eyebrow:   0.75rem;   /* 12px — UPPERCASE labels */
  --fs-caption:   0.8125rem; /* 13px — footers, fine print */
  --fs-small:     0.9375rem; /* 15px */
  --fs-body:      1.0625rem; /* 17px — default reading size */
  --fs-body-lg:   1.25rem;   /* 20px — voorleestekst */
  --fs-h4:        1.5rem;    /* 24px */
  --fs-h3:        2rem;      /* 32px */
  --fs-h2:        2.75rem;   /* 44px */
  --fs-h1:        3.75rem;   /* 60px — slide titles */
  --fs-display:   5rem;      /* 80px — sticker / cover titles */

  /* ---- Line heights ---- */
  --lh-tight:     1.05;      /* @kind font */
  --lh-heading:   1.15;      /* @kind font */
  --lh-snug:      1.3;       /* @kind font */
  --lh-body:      1.55;      /* @kind font */
  --lh-loose:     1.7;       /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-eyebrow:   0.18em;    /* @kind font */
  --ls-title:     0.005em;   /* @kind font */
  --ls-body:      0;         /* @kind font */

  /* ============================================================
     SEMANTIC TYPE ROLES
     ============================================================ */
  --type-display-family:  var(--font-display);
  --type-display-weight:  var(--fw-bold);

  /* Eyebrow: small, uppercase, wide-tracked, muted  (e.g. "02 · VOORBEREIDING") */
  --type-eyebrow-family:  var(--font-display);
  --type-eyebrow-weight:  var(--fw-semibold);
  --type-eyebrow-size:    var(--fs-eyebrow);
  --type-eyebrow-track:   var(--ls-eyebrow);

  /* Voorleestekst (read-aloud, max 2 lines direct speech) */
  --type-read-family:     var(--font-body);
  --type-read-weight:     var(--fw-semibold);
  --type-read-size:       var(--fs-body-lg);
  --type-read-leading:    var(--lh-snug);

  /* Bubble / storybook brown text */
  --type-bubble-family:   var(--font-display);
  --type-bubble-weight:   var(--fw-medium);
}


/* ===== tokens/spacing.css ===== */
/* ============================================================
   SPACING, RADII, SHADOWS & BORDERS — speurtochtenkinderfeestjes.nl
   Warm storybook look: generous rounding, soft shadows.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --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;

  /* ---- Radii — rounded & friendly ---- */
  --radius-xs:    6px;
  --radius-sm:    10px;
  --radius-md:    16px;   /* default cards / panels */
  --radius-lg:    24px;   /* framed illustrations */
  --radius-xl:    32px;   /* large feature panels */
  --radius-pill:  999px;  /* pills, eyebrow chips, page-number circles */

  /* ---- Border widths ---- */
  --border-thin:   1.5px;
  --border-base:   2px;
  --border-bold:   3px;   /* sticker outlines, framed art */

  /* ---- Soft storybook shadows ---- */
  --shadow-sm:   0 2px 6px rgba(36, 26, 18, 0.10);
  --shadow-md:   0 6px 18px rgba(36, 26, 18, 0.14);
  --shadow-lg:   0 14px 40px rgba(36, 26, 18, 0.20);
  --shadow-art:  0 18px 50px rgba(15, 23, 42, 0.35);   /* framed illustration on dark */

  /* Sticker title drop shadow (covers / titles) */
  --shadow-sticker: 0 3px 0 rgba(36, 26, 18, 0.18);

  /* Inset / pressed */
  --shadow-inset: inset 0 2px 5px rgba(36, 26, 18, 0.16);

  /* ---- Dashed cut line (printkit snijlijnen) ---- */
  --cut-dash: 2px dashed var(--border-cut);

  /* ---- Motion (gentle overshoot / bounce) ---- */
  --ease-soft:    cubic-bezier(0.34, 1.2, 0.64, 1);   /* @kind other */
  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --dur-fast:     140ms;  /* @kind other */
  --dur-base:     220ms;  /* @kind other */
  --dur-slow:     360ms;  /* @kind other */
}


/* ===== tokens/responsive.css ===== */
/* responsive.css — mobiele overrides voor SpeurtochtNL.
   De pagina's gebruiken vaste inline-grids (display:grid + grid-template-columns)
   zonder media-queries. Inline styles kunnen geen @media bevatten, dus collapsen we
   ze hier globaal met attribuut-selectors + !important. Eén bron voor alle pagina's. */

/* ---- Tablet & telefoon: alle meerkoloms inline-grids naar één kolom ---- */
@media (max-width: 860px) {
  /* minmax(0,1fr) i.p.v. 1fr: een gewone 1fr-track mag niet kleiner worden dan zijn
     inhoud (min-width:auto), waardoor brede items (e-mailveld, knoppen) de kolom
     buiten het scherm duwden. min-width:0 op de items maakt krimpen mogelijk. */
  [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [style*="grid-template-columns"] > * { min-width: 0; }
  [style*="display: flex"] > *, [style*="display:flex"] > * { min-width: 0; }

  /* Brede gap's verspillen ruimte als alles gestapeld is */
  [style*="gap: 44px"], [style*="gap:44px"],
  [style*="gap: 52px"], [style*="gap:52px"] {
    gap: 28px !important;
  }

  /* Vergelijkingstabellen: niet clippen maar horizontaal scrollbaar */
  [style*="overflow: hidden"]:has(> table) {
    overflow-x: auto !important;
  }
  table { min-width: 460px; }

  /* Voorkom dat afbeeldingen/slots breder worden dan het scherm */
  img, image-slot, svg { max-width: 100%; }
  [style*="max-width: 540"], [style*="max-width:540"],
  [style*="max-width: 520"], [style*="max-width:520"] {
    max-width: 100% !important;
  }

  /* Ruimere secties krijgen op mobiel wat minder verticale lucht */
  [style*="padding: 62px"], [style*="padding:62px"] {
    padding-top: 36px !important;
    padding-bottom: 30px !important;
  }

  /* Lange knoppen/labels met white-space:nowrap liepen buiten het scherm
     (o.a. "Bekijk alle print & speel pakketten"). Laat ze afbreken en passen. */
  [style*="nowrap"] {
    white-space: normal !important;
    max-width: 100% !important;
  }
  a[style*="border-radius: 999px"], a[style*="border-radius:999px"],
  button[style*="border-radius: 999px"], button[style*="border-radius:999px"] {
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  /* Niets mag breder zijn dan het scherm (vangnet tegen horizontaal scrollen) */
  section, header, footer { max-width: 100vw; }
}

/* ---- Telefoon: grote koppen en hero's temperen ---- */
@media (max-width: 560px) {
  h1 { font-size: 32px !important; line-height: 1.14 !important; }
  h2 { font-size: 22px !important; }

  /* Hero- en artikelpadding compacter */
  [style*="padding: 40px 24px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Negatieve marge van de meta-strip kleiner houden zodat hij niet plakt */
  [style*="margin-top: -26"] { margin-top: -14px !important; }
}

/* ---- Heel smal (≤380px): minimale zijmarges ---- */
@media (max-width: 380px) {
  [style*="padding: 40px 24px"],
  [style*="padding: 32px 24px"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}