/* Design tokens for Beauséjour Hydrotherapy.
 *
 * Every value is taken from the approved Claude Design canvas
 * ("Beausejour Site v3", design/canvas-v3), not chosen here. Fidelity mode:
 * if a value looks wrong, change it on the canvas, then here.
 *
 * Rule: style with tokens, never hard-coded values. If a value appears twice,
 * it wants a token.
 */

/* Self-hosted families (SIL Open Font License). Both files are the Latin
   subset of the variable fonts Google Fonts serves, so one file covers every
   weight the canvas uses. */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin-var.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin-var.woff2") format("woff2");
}

:root {
  /* Color. Semantic names; the hex values are the canvas's. */
  --surface: #f4f1e8;          /* cream page background */
  --surface-raised: #fdfcf8;   /* pricing card */
  --surface-pressed: #ece7da;  /* cream button, active */
  --surface-cool: #e7eff3;     /* "The experience" band */
  --ink: #22303c;              /* body text, dark image fallback */
  --ink-strong: #193b53;       /* section headings */
  --navy: #263b51;             /* links, footer, cream-button text */
  --hero: #3a5578;             /* hero fallback behind the photo */
  --accent: #7193cc;           /* primary buttons, icons, sage card */
  --accent-hover: #5f82be;
  --accent-active: #5677b3;
  --eyebrow: #2f5490;          /* small uppercase labels */
  --gold: #f8b516;             /* rules, pills, footer labels, focus ring */
  --promo: #c15846;            /* launch promo bar */
  --hero-title: #fbf6e6;
  --line: #e6e1d3;
  --muted: #bdccd4;            /* "As seen on" */
  --offer-eyebrow: #9db6e0;
  --footer-link: #a9c1e6;
  --footer-fine: #b9c6d3;
  --white: #ffffff;

  /* Type. Display and price faces come from the Adobe Fonts kit the canvas
     uses (see docs/field-log.md, 2026-10-20); the two Source families are
     self-hosted above. */
  --font-display: "lemonde-journal", serif;
  --font-body: "Source Sans 3", sans-serif;
  --font-lead: "Source Serif 4", serif;
  --font-price: "neue-haas-grotesk-display", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Recurring sizes from the canvas. */
  --text-body: clamp(17px, 1vw, 19px);
  --text-nav: clamp(16px, 0.92vw, 17.5px);
  --text-eyebrow: clamp(12px, 0.75vw, 14px);
  --text-h2: clamp(40px, 2.75vw, 53px);
  --text-h3: clamp(34px, 2.3vw, 44px);
  --text-card: clamp(28px, 1.95vw, 36px);
  --text-lead: clamp(23px, 1.5vw, 29px);
  --text-button: clamp(19px, 1.05vw, 20px);

  /* Layout */
  --container: 1400px;
  --container-header: 1660px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: clamp(56px, 4.7vw, 90px);

  /* Shape */
  --radius-card: 14px;
  --radius-panel: 16px;
  --radius-pill: 99px;

  /* Motion */
  --button-transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}