/* ==========================================================================
   VERNATTE — design tokens
   Brief tokens are listed first and must not be changed casually.
   Derived tokens are marked and exist only where the brief left a gap.
   ========================================================================== */

:root {
  /* ---- Colour: brief tokens ------------------------------------------- */
  --bg: #F5F1E9;          /* main warm ivory */
  --sidebar: #EAE4D9;     /* secondary warm beige */
  --surface: #F9F7F2;     /* cards and panels */
  --text: #171512;        /* primary typography */
  --text-2: #777064;      /* supporting typography (large text, icons) */
  --border: #D8D0C3;      /* dividers and outlines */
  --accent: #B89557;      /* champagne gold: rules, dashes, hairlines only */
  --dark: #24211C;        /* primary CTA */

  /* ---- Colour: derived ------------------------------------------------ */
  --page: #E4DDCF;        /* outer page, a deeper warm neutral behind the container */
  --text-2-aa: #5E574C;   /* small secondary copy; --text-2 is only 3.9:1 on --sidebar */
  --placeholder: #DDD5C7; /* missing-image surface */
  --placeholder-ink: #6F675A;
  --on-image: #FBF9F4;    /* text laid over photography */
  --scrim: 23 21 18;      /* rgb triplet of --text, used for the text scrim */

  /* ---- Typography ----------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Cormorant", "EB Garamond", Garamond,
    "Times New Roman", Times, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --fs-eyebrow: 0.75rem;
  --fs-small: 0.8125rem;
  --fs-body: 0.9375rem;
  --fs-nav: 0.875rem;
  --fs-lede: 1rem;
  --fs-wordmark: 1.75rem;
  --fs-card-title: clamp(1.375rem, 1.1rem + 0.7vw, 1.75rem);
  --fs-side-title: 1.5rem;
  --fs-h1: clamp(2.75rem, 4.2vw, 4rem);

  /* ---- Shape ---------------------------------------------------------- */
  --r-container: 22px;    /* outer website container */
  --r-panel: 14px;        /* header, sidebar, hero, cards */
  --r-image: 12px;        /* hero photograph */
  --r-small: 8px;         /* sidebar photograph */
  --r-pill: 999px;

  /* ---- Space ---------------------------------------------------------- */
  --gap: 10px;            /* between major panels (brief: 8-12px) */
  --container-pad: 10px;
  --page-pad: clamp(8px, 2vw, 28px);
  --max-w: 1320px;
  --header-h: 78px;
  --sidebar-w: 250px;

  /* ---- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --t-fast: 180ms;
  --t-med: 320ms;
  --t-image: 700ms;
}