/* ==========================================================================
   POSA — Design tokens
   Palette is ONLY Ballerina Pink, Chianti and White (+ tints/shades of them).
   ========================================================================== */

:root {
  /* ---- Brand colours ---- */
  --pink: #F0B0BB;          /* Ballerina Pink */
  --chianti: #551212;       /* Chianti — main dark, glossy logo */
  --white: #FFFFFF;

  /* ---- Tints / shades (derived only from the three above) ---- */
  --pink-soft: #FADFE4;     /* pink ≈35% on white — soft section bg */
  --pink-deep: #E596A4;     /* pink shade — hover on pink */
  --chianti-80: rgba(85, 18, 18, .80);  /* body text on light */
  --chianti-60: rgba(85, 18, 18, .62);  /* muted text */
  --chianti-12: rgba(85, 18, 18, .14);  /* hairlines / borders */
  --chianti-hi: #7E2A2A;    /* lighter chianti — gloss highlight only */
  --chianti-lo: #3B0A0A;    /* darker chianti — gloss shadow only */
  --pink-line: rgba(240, 176, 187, .78); /* sketch lines on chianti */

  /* ---- Typography ---- */
  --font-serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-script: "Pinyon Script", "Snell Roundhand", cursive;
  --font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Courier Prime", "Courier New", monospace;

  /* Fluid type scale: 360px → 1440px */
  --fs-display: clamp(3.25rem, 1.85rem + 6.2vw, 8.25rem);
  --fs-h1: clamp(2.75rem, 1.9rem + 4.2vw, 6rem);
  --fs-h2: clamp(2.125rem, 1.55rem + 2.8vw, 4rem);
  --fs-h3: clamp(1.5rem, 1.32rem + .8vw, 2rem);
  --fs-lead: clamp(1.125rem, 1.02rem + .45vw, 1.375rem);
  --fs-body: clamp(1rem, .96rem + .18vw, 1.125rem);
  --fs-small: .9375rem;
  --fs-label: .8125rem;

  --lh-tight: 1.02;
  --lh-head: 1.08;
  --lh-body: 1.6;

  /* ---- Spacing (4px base) ---- */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;   --s-11: 10rem;

  --section-y: clamp(64px, 8vw, 120px);
  --gutter: clamp(1.25rem, .6rem + 2.9vw, 3.5rem);
  --max-w: 82.5rem;      /* 1320px */
  --header-h: 4.75rem;

  /* ---- Shape & motion ---- */
  --radius-pill: 999px;
  --radius-card: 1.25rem;
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --ease-arch: cubic-bezier(.65, 0, .35, 1);
  --dur-ui: .45s;
}