/* ============================================================
   Stichting Tijdig — Design Tokens
   Eén centrale plek voor alle kleuren, fonts en spacings.
   In het WordPress-thema komen deze als theme.json variabelen.
   ============================================================ */

:root {
  /* ---- IJsblauw basis (ontwerp D) ---- */
  --tj-cream:       #DCF0FA;
  --tj-cream-deep:  #C4E5F7;
  --tj-cream-soft:  #EBF6FC;
  --tj-paper:       #FFFFFF;

  /* ---- Inkt ---- */
  --tj-ink:         #4A4E5C;
  --tj-ink-soft:    #445566;
  --tj-ink-mute:    #8899AA;

  /* ---- Theelabel-kleuren (uit flyer) ---- */
  --tj-lime:        #B3CC2E;
  --tj-mustard:     #E8C328;
  --tj-orange:      #EC8A2E;
  --tj-coral:       #E25A42;
  --tj-blue:        #4F7FBC;
  --tj-sky:         #44BFF0;
  --tj-purple:      #6A4F9C;
  --tj-lavender:    #A48DC2;
  --tj-teal:        #2F726B;
  --tj-dot:         #7BB541;

  /* Script/eyebrow: groen (ontwerp D) i.p.v. koraalrood */
  --tj-coral:       #7BB541;

  /* Tekstkleur bij de lichte tinten (lime/mustard) — voor toegankelijk contrast */
  --tj-on-light:    #1c2a08;

  /* ---- Typografie ---- */
  --tj-display:     "Bricolage Grotesque", system-ui, sans-serif;
  --tj-sans:        "Hanken Grotesk", system-ui, sans-serif;
  --tj-script:      "Caveat", "Bradley Hand", cursive;

  /* ---- Vorm ---- */
  --tj-r-tag:       18px;
  --tj-r-card:      24px;
  --tj-r-pill:      999px;
  --tj-shadow-soft: 0 18px 40px -22px rgba(31, 32, 36, 0.25);
  --tj-shadow-tag:  0 8px 22px -10px rgba(31, 32, 36, 0.35);

  /* ---- Maatvoering ---- */
  --tj-section-x:   80px;   /* horizontale section padding op desktop */
  --tj-section-y:   96px;
  --tj-content-max: 1280px; /* maximum site-breedte */
}

@media (max-width: 720px) {
  :root {
    --tj-section-x: 24px;
    --tj-section-y: 64px;
  }
}