/* ==========================================================================
   TOKENS — única fonte de verdade (a cor dourada também é lida pelo JS da fita)
   ========================================================================== */
:root {
  /* paleta da marca */
  --c-ivory: #F6F2E9;
  --c-sage: #C8D1BF;
  --c-sand: #D9C5A2;
  --c-gold: #B89B68;
  --c-forest: #59695B;
  --c-graphite: #2C302E;
  --c-alert: #8C3F2D;                   /* só para erros de formulário (contraste 6,6:1 sobre marfim) */
  --c-paper: #EEF0E6;                   /* sage muito diluído sobre marfim: fundo da secção de imersão */
  --rgb-ivory: 246,242,233;
  --rgb-gold: 184,155,104;
  --rgb-forest: 89,105,91;
  --rgb-graphite: 44,48,46;
  --ink-2: rgba(var(--rgb-graphite), .74);   /* texto secundário (≥ 4.5:1 sobre marfim) */

  /* tipografia */
  --f-serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --f-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* espaço */
  --gutter: clamp(20px, 6vw, 96px);
  --col-gap: clamp(12px, 2vw, 28px);
  --sec-y: clamp(96px, 13vw, 200px);
  --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;

  /* movimento */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --t-fast: .35s; --t-med: .8s; --t-slow: 1.4s;

  /* camadas: 1 mar (canvas) · 2 fita (canvas) · 3 tipografia/UI */
  --z-ribbon: 30; --z-fg: 35; --z-veil: 37; --z-header: 50; --z-menu: 55; --z-sound: 60;
}