/* ==========================================================================
   Villa Breakfast · design tokens
   WP: enqueue first as `cb-tokens`. Every other stylesheet reads these.
   Contrast ratios (WCAG 2.x) are listed in DESIGN-SYSTEM.md and design-system.html.
   ========================================================================== */
:root{
  /* ---- Colour: brand ---- */
  --sun:#FFC53D;            /* hero colour. espresso on sun 10.5:1 */
  --sun-soft:#FFE7A3;
  --sun-deep:#F2A516;
  --terracotta:#C4461F;     /* actions + key prices. paper on terracotta 4.8:1 */
  --terracotta-dark:#A5391A;/* pressed state + error text. 6.4:1 on paper */
  --espresso:#2A1B14;       /* text + dark blocks. never pure black. 16.1:1 on paper */
  --espresso-2:#5E4A3E;     /* secondary text. 7.6:1 on cream */
  --espresso-3:#7A6558;     /* tertiary text on paper only. 5.3:1 */
  --pool:#2BC0B4;           /* sparingly: villa, pool, delivered */
  --pool-deep:#0E7C76;      /* pool text/icons. 4.9:1 with paper */
  --pool-soft:#DDF4F1;
  --olive:#56622F;          /* secondary accent + success. 6.4:1 with paper */
  --olive-soft:#E9ECD6;
  --cream:#FFF4DF;
  --paper:#FFFBF3;
  --white:#FFFFFF;

  /* ---- Colour: roles ---- */
  --bg:var(--paper);
  --ink:var(--espresso);
  --ink-2:var(--espresso-2);
  --line:rgba(42,27,20,.14);
  --line-strong:rgba(42,27,20,.28);
  --action:var(--terracotta);
  --action-ink:var(--paper);
  --price:var(--terracotta);
  --success:var(--olive);
  --error:var(--terracotta-dark);
  --error-bg:#FBE6DC;
  --warn-bg:var(--sun-soft);
  --focus:var(--pool-deep);

  /* ---- Type ----
     Display: Bricolage Grotesque (variable: opsz, wdth, wght). Body: Manrope.
     Fallback faces below keep the swap from shifting layout (see base.css). */
  --font-display:"Bricolage Grotesque","CB Display Fallback","CB Display Fallback Wide",sans-serif;
  --font-body:Manrope,"CB Body Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wdth-tight:76;          /* hero + prices */
  --wdth-display:80;        /* headings */

  --fs-hero:clamp(3rem,.9rem + 11vw,10.5rem);    /* 57px @390 → 168px @1440 */
  --fs-h1:clamp(2.75rem,1.4rem + 6vw,6.5rem);    /* inner-page H1 */
  --fs-h2:clamp(2.25rem,1.3rem + 4vw,4.75rem);
  --fs-h3:clamp(1.5rem,1.1rem + 1.6vw,2.25rem);
  --fs-h4:1.25rem;
  --fs-price:clamp(2.25rem,1.8rem + 1.2vw,2.875rem);
  --fs-lead:clamp(1.0625rem,1rem + .3vw,1.25rem);
  --fs-body:1rem;
  --fs-sm:.875rem;
  --fs-xs:.75rem;
  --lh-tight:.88;
  --lh-head:.95;
  --lh-body:1.55;
  --track-eyebrow:.16em;
  --track-head:-.01em;      /* h1/h2: condensed display face, so only a hair tighter than default */
  --track-display:-.02em;   /* the giant hero lines (home H1, villa name) */

  /* ---- Space: 8px scale ---- */
  --s-half:4px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:48px;
  --s8:64px; --s10:80px; --s12:96px; --s16:128px;
  --gutter:clamp(16px,4vw,48px);
  --section:clamp(64px,9vw,128px);
  --maxw:1280px;
  --maxw-text:68ch;

  /* ---- Shape ---- */
  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px; --r-pill:999px;

  /* ---- Elevation: layered, warm-tinted ---- */
  --sh-1:0 1px 0 rgba(42,27,20,.06),0 2px 8px -3px rgba(42,27,20,.18);
  --sh-2:0 1px 0 rgba(42,27,20,.06),0 14px 28px -14px rgba(42,27,20,.32);
  --sh-3:0 1px 0 rgba(42,27,20,.06),0 28px 50px -24px rgba(42,27,20,.42);
  --sh-hard:0 4px 0 var(--espresso);
  --sh-up:0 -10px 30px -12px rgba(42,27,20,.35);

  /* ---- Motion ---- */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.3,.7,.4,1.5);
  --dur-1:.15s; --dur-2:.3s; --dur-3:.55s;

  /* ---- Layers ---- */
  --z-header:50; --z-bar:60; --z-toast:90;

  --tap:44px;               /* minimum touch target */
}