/* ==========================================================================
   NAMI CURAÇAO — design tokens
   Palette, type scale, spacing and motion. Single source of truth.
   ========================================================================== */

:root {
  /* --- colour ----------------------------------------------------------- */
  --ivory:        #F6F0E7;
  --ivory-light:  #FBF7F1;
  --nude:         #EAD7C6;
  --caramel:      #D6B89C;
  --ink:          #1A1714;
  --ink-soft:     #2A2521;
  --coral:        #FF684A;
  --coral-deep:   #E8543A;

  --text-on-ivory:      var(--ink);
  --text-on-ivory-mute: #6B6055;
  --text-on-ink:        #EFE7DC;
  --text-on-ink-mute:   #9C9086;

  --mask-color: var(--ivory);   /* curtain colour for image reveals */

  /* --- media cards ------------------------------------------------------- */
  --radius:     clamp(12px, 1.1vw, 18px);   /* large photography            */
  --radius-sm:  10px;                       /* small tiles, insets          */
  --radius-btn: 8px;                        /* buttons, notes — same family */
  --lift:       -8px;                       /* hover rise                   */
  --lift-shadow: 0 30px 58px -30px rgba(26, 23, 20, .6);

  --rule-dark:  rgba(26, 23, 20, .16);
  --rule-light: rgba(246, 240, 231, .18);

  /* --- type ------------------------------------------------------------- */
  --font-serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans:  "Montserrat", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* fluid editorial scale — clamp(min, preferred, max) */
  --fs-display: clamp(3.2rem, 8.6vw, 8.6rem);   /* hero lines            */
  --fs-h1:      clamp(2.6rem, 6.4vw, 5.6rem);   /* section statements    */
  --fs-h2:      clamp(2.1rem, 4.4vw, 3.9rem);   /* panel titles          */
  --fs-h3:      clamp(1.25rem, 1.9vw, 1.7rem);
  --fs-body:    clamp(0.95rem, 1.05vw, 1.06rem);
  --fs-small:   0.8125rem;
  --fs-label:   0.6875rem;

  --tracking-label: .26em;
  --tracking-btn:   .16em;
  --leading-tight:  0.92;
  --leading-body:   1.75;

  /* --- space ------------------------------------------------------------ */
  --gutter:      clamp(1.25rem, 4.5vw, 5rem);
  --section-y:   clamp(5rem, 11vw, 10.5rem);
  --max:         1680px;
  --measure:     46ch;

  /* --- motion ----------------------------------------------------------- */
  --ease-out:  cubic-bezier(.16, .84, .34, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
  --dur-fast:  .35s;
  --dur-mid:   .7s;
  --dur-slow:  1.15s;

  --header-h: 84px;
}

@media (max-width: 760px) {
  :root {
    --header-h: 68px;
    --radius: 14px;
    --radius-sm: 10px;
    --lift: -5px;
  }
}