/* Ontos Wellness — design tokens
 *
 * Source of truth: branding/Brand Guidelines/ONTOS Brand Guidelines.pdf
 * These SUPERSEDE brief §3, whose values were sampled from a PDF pending
 * confirmation against source files. There is no amber in this brand.
 *
 * Guidelines: "Only use approved colour versions. No guessing or close
 * enough shades." Do not invent tints or shades — derive hover states from
 * opacity or from another palette colour.
 */

:root {
  /* ---- Palette: six colours, no others ---------------------------- */
  --ivory: #eaead6;      /* Warm Ivory */
  --olive: #80816d;      /* Warm Olive */
  --mist: #c8d6d9;       /* Mist Blue  */
  --slate: #475a5f;      /* Deep Slate */
  --black: #000000;
  --off-white: #fcfbf8;

  /* ---- Semantic roles ---------------------------------------------
   * Assigned around the palette's contrast ceiling. See below —
   * these are not arbitrary preferences.
   */
  --ground: var(--ivory);        /* page background */
  --surface: var(--off-white);   /* cards, raised panels */
  --text: var(--slate);          /* body copy — 5.95:1 on ivory, 7.01:1 on off-white */
  --text-strong: var(--black);   /* headings where more weight is needed */
  --text-muted: var(--olive);    /* LARGE TEXT ONLY — see the warning below */
  --panel: var(--slate);         /* filled statement panels */
  --on-panel: var(--ivory);      /* 5.95:1 on slate */
  --accent: var(--mist);         /* decorative rules, marks */
  --border: color-mix(in srgb, var(--slate) 15%, transparent);

  /* ---- WCAG 2.2 AA — measured, not estimated ----------------------
   *
   * BODY TEXT (needs 4.5:1) — only these pass:
   *   Deep Slate on Warm Ivory ....... 5.95  ✓
   *   Deep Slate on Off White ........ 7.01  ✓
   *   Deep Slate on Mist Blue ........ 4.86  ✓
   *   Black on any light ground ...... 14–20 ✓
   *   Warm Ivory / Mist / Off White on Deep Slate .. 4.86–7.01 ✓
   *   Warm Olive on Black ............ 5.28  ✓
   *
   * ⚠ WARM OLIVE IS NOT A BODY-TEXT COLOUR ON LIGHT GROUNDS:
   *   Warm Olive on Warm Ivory ....... 3.27  ✗ large text only (≥3:1)
   *   Warm Olive on Off White ........ 3.84  ✗ large text only
   *
   * ⚠ NEVER PAIR — fails even at large sizes:
   *   Warm Olive + Mist Blue ......... 2.67  ✗
   *   Deep Slate + Black ............. 2.90  ✗
   *
   * ⚠ The brief's statement card ("olive fill, cream text") is 3.27:1 and
   *   CANNOT carry body copy. Use --panel (slate) or keep olive panels to
   *   display-size type only. Risk R4.
   */

  /* ---- Typography --------------------------------------------------
   * Playfair Display (display) over Source Serif 4 (body) — the approved
   * design-comp faces (client preference, 3 Sep 2026), superseding the
   * delivered Averia/Figtree pairing. ⚠ Raise with the client: this
   * diverges from branding/Fonts — needs recording in the brand file.
   *
   * Self-hosted subset woff2 — NEVER call Google Fonts at runtime
   * (third-party round trip + NDPR). One weight per family plus italic;
   * emphasis still comes from size, colour and space, and font-synthesis
   * stays off so the browser never fakes a weight we did not ship.
   */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --weight-light: 400;   /* Source Serif 4 regular reads as the body weight */
  --weight-regular: 400;
  --weight-medium: 500;  /* Playfair display weight */

  /* Fluid scale — brief §3 */
  --size-h1: clamp(2.75rem, 6vw, 4.5rem);
  --size-h2: clamp(2rem, 4vw, 3rem);
  --size-h3: clamp(1.375rem, 2.5vw, 1.75rem);
  --size-body: clamp(1.125rem, 1.25vw, 1.25rem);
  --size-small: 0.9375rem;
  --size-eyebrow: 0.8125rem;
  /* Display numerals hung from the line — the typographic signature. */
  --size-numeral: clamp(4rem, 9vw, 7.5rem);

  --leading-display: 1.1;
  --leading-body: 1.65;

  /* ---- Layout ------------------------------------------------------ */
  --container: 1200px;
  --measure: 720px;   /* 62–72 characters. Never full-bleed paragraphs. */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --radius-card: 12px;
  --radius-button: 8px;
  --radius-pill: 999px;

  /* ---- Motion — restrained (brief §3, comp: fade-and-rise ~200ms) --- */
  --motion-distance: 12px;
  --motion-duration: 200ms;
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-distance: 0px;
    --motion-duration: 0.01ms;
  }
}

/* Self-hosted fonts — latin subsets, woff2 only. */
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-display-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-display-500-italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/source-serif-4-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/source-serif-4-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}