/* ═══════════════════════════════════════════════════════════════
   TERUG NAAR MIJ — Design Tokens
   Vogue editorial × Aman resort × Cinematic luxury
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Inter:wght@300;400;500&family=Dancing+Script:wght@400;500;600&display=swap');

:root {
  /* ── COLOUR ───────────────────────────────────────────────── */
  --black:        #090806;
  --black-rich:   #0D0B08;
  --black-warm:   #141210;
  --black-panel:  #1A1714;
  --gold:         #C6A46A;
  --gold-light:   #D4B87A;
  --gold-pale:    #DFC99A;
  --gold-dim:     rgba(198,164,106,.3);
  --gold-glow:    rgba(198,164,106,.1);
  --ivory:        #F7F4EF;
  --ivory-warm:   #EDE8DF;
  --ivory-deep:   #E2DAD0;
  --on-dark:      rgba(247,244,239,.88);
  --on-dark-mid:  rgba(247,244,239,.52);
  --on-dark-soft: rgba(247,244,239,.3);
  --ink:          #0D0B08;
  --ink-mid:      #3D3830;
  --ink-soft:     #6B6358;
  --ink-faint:    #9A9188;

  /* ── TYPOGRAPHY ───────────────────────────────────────────── */
  --serif:    'Playfair Display', Georgia, serif;
  --serif-accent: 'Playfair Display', Georgia, serif;
  --sans:     'Inter', -apple-system, sans-serif;
  --display:  clamp(68px, 10vw, 148px);
  --h1:       clamp(52px, 7.5vw, 108px);
  --h2:       clamp(38px, 5vw,   76px);
  --h3:       clamp(26px, 3vw,   48px);
  --h4:       clamp(18px, 2vw,   30px);
  --lead:     clamp(15px, 1.1vw, 18px);
  --body:     14px;
  --label:    10px;

  /* ── SPACING ──────────────────────────────────────────────── */
  --xl:    clamp(100px, 13vw, 180px);
  --lg:    clamp(72px, 9vw,  130px);
  --md:    clamp(48px, 6vw,  88px);
  --gutter: clamp(24px, 5vw, 80px);

  /* ── LINES ────────────────────────────────────────────────── */
  --line-gold:  .5px solid rgba(198,164,106,.28);
  --line-dark:  .5px solid rgba(247,244,239,.07);
  --line-ivory: .5px solid rgba(13,11,8,.09);

  /* ── MOTION ───────────────────────────────────────────────── */
  --ease:      cubic-bezier(.25,.1,.25,1);
  --ease-out:  cubic-bezier(0,0,.2,1);
  --dur-fast:  .25s;
  --dur:       .55s;
  --dur-slow:  .9s;

  /* Mapped aliases for component compatibility */
  --charcoal:        var(--black-rich);
  --chalk-ivory:     var(--ivory);
  --smoked-gold:     var(--gold);
  --font-display:    var(--serif);
  --font-body:       var(--sans);
  --font-accent:     var(--serif);
  --ink-secondary:   var(--ink-soft);
  --ink-on-dark:     var(--on-dark);
  --ink-on-dark-soft:var(--on-dark-soft);
  --warm-cream:      var(--ivory-warm);
  --dur-slow-var:    var(--dur-slow);
  --ease-soft:       var(--ease-out);
}

/* ── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--body);
  line-height: 1.9;
  color: var(--ink);
  background: var(--ivory);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; }

/* ── SCROLL REVEAL ───────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.reveal.in-view { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .22s; }
.reveal-delay-3 { transition-delay: .34s; }
.reveal-delay-4 { transition-delay: .46s; }

/* ── UTILITY ─────────────────────────────────────────────────── */
.gold { color: var(--gold); }
.italic { font-style: italic; }
.serif { font-family: var(--serif); }