/* ==========================================================================
   La Dilettante Amsterdam — design tokens
   Bron: kleuren geëxtraheerd uit het officiële logo (kleurhistogram),
   accenten uit de eventposters op Instagram. Zie BRIEFING.md §2.2 en §3.
   NEO Agency — 24-08-2026
   ========================================================================== */

:root{
  /* --- Merkkleuren (uit het logo) ------------------------------------- */
  --ink:        #000000;  /* 44.1% — contourlijn, woordmerk               */
  --paper:      #F8F8F8;  /* 15.7% — huid en gewaad                       */
  --wine:       #B82028;  /* 11.7% — druiventros, ondertitel              */
  --lime:       #C0C860;  /*  6.3% — wingerdblad                          */
  --vine:       #C0A890;  /*  5.4% — de rank                              */
  --sun:        #F8E088;  /*  3.6% — de zon                               */
  --coral:      #E86050;  /*  1.6% — mond, wijn in het glas               */

  /* --- Posteraccenten (roteren per sectie/event) ---------------------- */
  --pop-orange: #F0A050;
  --pop-red:    #E00010;
  --pop-purple: #9050A0;
  --pop-yellow: #F0D000;
  --pop-blue:   #A0D0F0;

  /* --- Voorstel, GEEN logokleur: warmer papier voor grote vlakken ----- */
  --paper-warm: #F4EFE3;

  /* --- Typografie ----------------------------------------------------- */
  --font-display: "Caprasimo", "Cooper Black", Georgia, serif;
  --font-hand:    "Knewave", cursive;
  --font-body:    "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-label:   "Space Mono", ui-monospace, SFMono-Regular, monospace;

  --fs-display: clamp(3.5rem, 11vw, 9rem);
  --fs-h1:      clamp(2.5rem, 7vw, 5.5rem);
  --fs-h2:      clamp(1.9rem, 4.5vw, 3.25rem);
  --fs-h3:      clamp(1.35rem, 2.4vw, 1.9rem);
  --fs-body:    clamp(1rem, 1.15vw, 1.15rem);
  --fs-label:   0.78rem;

  --lh-display: 0.9;
  --lh-body:    1.6;
  --ls-label:   0.12em;

  /* --- Vorm ------------------------------------------------------------ */
  --line:        3px;
  --line-heavy:  6px;
  --radius:      0;
  --radius-blob: 60% 40% 55% 45% / 50% 55% 45% 50%;
  --shadow-hard: 8px 8px 0 var(--ink);
  --shadow-deep: 14px 14px 0 var(--ink);

  /* --- Ritme ----------------------------------------------------------- */
  --maxw:      1320px;
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 10vw, 9rem);

  /* --- Motion ---------------------------------------------------------- */
  --t-fast:   120ms;
  --t-base:   350ms;
  --ease-stamp: cubic-bezier(.34, 1.56, .64, 1);
}

/* Kleurparen die gegarandeerd contrast halen.
   Lichte merkkleuren dragen ALTIJD zwarte tekst. */
.on-lime, .on-sun, .on-blue, .on-yellow, .on-paper { color: var(--ink); }
.on-wine, .on-purple, .on-red, .on-ink           { color: var(--paper); }

@media (prefers-reduced-motion: reduce){
  :root{ --t-fast: 0ms; --t-base: 0ms; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}