/**
 * Design tokens.
 *
 * The palette is inherited from the 2016 paris-esthetics.com site: a cool
 * slate-blue family with a single saturated gold accent on warm off-white.
 * Steps that did not exist in the original (slate-900, slate-50, gold-deep)
 * are derived from it to give the scale usable contrast at both ends.
 *
 * THE SCALE IS DELIBERATELY SMALL. The 2016 site was measured off the archive
 * before this was written: 14px/20px body, and the largest type anywhere on
 * the homepage was 24px. The first build of this theme answered that with a
 * 17px body and a 68px h1, and the practice's verdict was that everything was
 * too big. The scale below sits a little above the original rather than a long
 * way above it — 15px body, headings topping out at 32px — which is the whole
 * of the "a little more modern, but not much" brief. Before enlarging anything
 * here, re-read that sentence: these numbers are the deliverable, not a
 * starting point to grow from.
 */

:root {
  /* ---- Brand: slate ---------------------------------------------------- */
  /* The four marked values were sampled from the archived site's own CSS. */
  --c-slate-900: #1D2A38;
  --c-slate-800: #26364A;
  --c-slate-700: #35506A;
  --c-slate-600: #47657D; /* original header / footer-top */
  --c-slate-500: #59748A; /* original secondary nav / primary button */
  --c-slate-400: #698DA9; /* original footer-bottom */
  --c-slate-300: #9DB2C3;
  --c-slate-200: #C4D0DA;
  --c-slate-100: #DFE7ED;
  --c-slate-050: #EFF3F6;

  /* ---- Brand: gold ----------------------------------------------------- */
  --c-gold: #FED627;       /* original accent — on dark grounds only */
  --c-gold-600: #C9A417;   /* hairlines, borders on light */
  --c-gold-deep: #7A5D06;  /* accent text on light: 7.1:1 on cream */

  /* ---- Neutrals (warm, biased toward the original cream) --------------- */
  --c-cream: #FDFBF7;      /* original page ground */
  --c-cream-2: #F5F0E6;    /* original warm panel */
  --c-white: #FFFFFF;
  --c-ink: #35373B;        /* original heading ink */
  --c-ink-2: #46596B;
  --c-ink-3: #556C7E; /* 5.3:1 on cream, 4.8:1 on the warm panel — AA for small text */
  --c-rule: #E4E7E4;
  --c-rule-2: #F0F1EE;
  --c-strip: #F6F6F6;      /* original category-strip ground */

  /* ---- Semantic -------------------------------------------------------- */
  --bg-page: var(--c-cream);
  --bg-surface: var(--c-white);
  --bg-warm: var(--c-cream-2);
  --bg-tint: var(--c-slate-050);
  --bg-invert: var(--c-slate-800);

  --fg: var(--c-ink);
  --fg-muted: var(--c-ink-2);
  --fg-faint: var(--c-ink-3);
  --fg-invert: #EEF3F7;
  --fg-invert-muted: #B6C6D4;

  --accent: var(--c-slate-500);
  --accent-strong: var(--c-slate-600);
  --accent-on-light: var(--c-gold-deep);
  --accent-on-dark: var(--c-gold);

  --border: var(--c-rule);
  --border-strong: var(--c-slate-200);

  /* ---- Site chrome ------------------------------------------------------ */
  /* The three stacked bands that made the 2016 site recognisable at a
     glance: masthead, primary nav, and the copyright strip under the footer.
     Named separately from the slate ramp so the chrome can be re-toned
     without disturbing every other use of those blues. */
  --chrome-masthead: var(--c-slate-600);
  --chrome-nav: var(--c-slate-500);
  --chrome-footer: var(--c-slate-600);
  --chrome-footer-base: var(--c-slate-400);
  --chrome-strip: var(--c-strip);

  /* ---- Typography ------------------------------------------------------ */
  /* Lato is the original site's own face, kept. Source Serif 4 replaces
     Fraunces: a transitional serif with none of Fraunces' display contrast or
     "wonk", so headings read as considered rather than as art direction. */
  --font-display: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Clamp ranges are narrow on purpose. Wide clamps are how the previous
     scale reached 68px on a desktop without anyone choosing that number. */
  --fs-3xs: 0.6875rem;  /* 11px  eyebrows */
  --fs-2xs: 0.75rem;    /* 12px  meta */
  --fs-xs:  0.8125rem;  /* 13px  captions */
  --fs-sm:  0.875rem;   /* 14px  UI, nav, buttons — the 2016 value */
  --fs-base:0.9375rem;  /* 15px  body */
  --fs-md:  1rem;       /* 16px  intros */
  --fs-lg:  1.125rem;   /* 18px  card and teaser titles */
  --fs-xl:  clamp(1.25rem, 0.4vw + 1.15rem, 1.375rem);  /* 20 → 22px  h3 */
  --fs-2xl: clamp(1.375rem, 0.7vw + 1.2rem, 1.625rem);  /* 22 → 26px  h2 */
  --fs-3xl: clamp(1.625rem, 1vw + 1.375rem, 2rem);      /* 26 → 32px  h1 */

  --lh-tight: 1.2;
  --lh-snug: 1.32;
  --lh-normal: 1.55;
  --lh-relaxed: 1.65;

  --ls-eyebrow: 0.12em;
  --ls-tight: -0.005em;  /* Source Serif needs almost no negative tracking */

  /* ---- Space (4px base) ------------------------------------------------ */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;   --s-7: 2rem;     --s-8: 2.5rem;
  --s-9: 3rem;     --s-10: 3.75rem; --s-11: 4.5rem;  --s-12: 5.5rem;

  /* Vertical rhythm between full-width sections. Was 56→120px; a band then
     carried 240px of padding in a 900px viewport before any content. */
  --section-y: clamp(2.25rem, 3vw, 3.25rem);        /* 36 → 52px */
  --section-y-tight: clamp(1.5rem, 2vw, 2.25rem);   /* 24 → 36px */

  /* ---- Layout ---------------------------------------------------------- */
  /* 1170px is the Bootstrap 3 desktop container the 2016 site was built on,
     and the width its 2-column body (main + rail) was proportioned for. */
  --container: 73.125rem;  /* 1170px */
  --container-narrow: 44rem;
  --container-wide: 78rem;
  --gutter: clamp(1rem, 2.5vw, 1.875rem);  /* 16 → 30px, the Bootstrap gutter */
  --measure: 74ch;
  --rail: 19rem;

  /* ---- Form ------------------------------------------------------------ */
  /* Small radii. The previous 14px large radius is a 2020s marketing-site
     signature and reads nothing like the original. */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  /* Shadows are hairline-adjacent here: the original design separated things
     with rules and background changes, not with depth. */
  --shadow-sm: 0 1px 2px rgb(29 42 56 / 0.06);
  --shadow-md: 0 2px 8px -2px rgb(29 42 56 / 0.10), 0 1px 2px rgb(29 42 56 / 0.05);
  --shadow-lg: 0 8px 22px -8px rgb(29 42 56 / 0.16), 0 2px 6px rgb(29 42 56 / 0.05);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 380ms;

  --header-h: 4.5rem;          /* 72px — the 2016 masthead was 90px */
  --header-h-compact: 3.5rem;
  --nav-h: 2.875rem;           /* 46px — the primary-nav band under it */
  --z-header: 100;
  --z-menu: 90;
  --z-overlay: 200;
}

@media (max-width: 47.99em) {
  :root { --header-h: 3.75rem; --header-h-compact: 3.25rem; --nav-h: 0rem; }
}