/* Approved values: Figma qHohIH7O2p6YfnzmoNHGBv, Foundations 1:2,
 * Components 1:3. Full provenance and unresolved items: docs/design-system.md.
 * theme.json is the canonical palette and editor preset source.
 * Semantic aliases consume those exact WordPress variables on frontend/editor. */
:root {
  --color-testimonial-mark: var(--wp--preset--color--testimonial-mark);
  --color-testimonial-dot: var(--wp--preset--color--testimonial-dot);
  --color-booking-eyebrow: var(--wp--preset--color--booking-eyebrow);
  --color-booking-emphasis: var(--wp--preset--color--booking-emphasis);
  --color-hours-value: var(--wp--preset--color--hours-value);

  --color-text-dark-heading: var(--wp--preset--color--text-dark-heading);
  --color-text-footer-muted: var(--wp--preset--color--text-footer-muted);
  --color-background-primary: var(--wp--preset--color--background-primary); /* #FFFDF8 */
  --color-background-secondary: var(--wp--preset--color--background-secondary); /* #F7F3EA */
  --color-background-dark: var(--wp--preset--color--background-dark); /* #344B3D */
  --color-background-footer: var(--wp--preset--color--background-footer); /* #24352B */
  --color-background-testimonial: var(--wp--preset--color--background-testimonial); /* #755568 */
  --color-text-primary: var(--wp--preset--color--text-primary); /* #344B3D */
  --color-text-secondary: var(--wp--preset--color--text-secondary); /* #292B29 */
  --color-text-inverse: var(--wp--preset--color--text-inverse); /* #FFFDF8 */
  --color-accent-plum: var(--wp--preset--color--accent-plum); /* #755568 */
  --color-action-primary: var(--wp--preset--color--action-primary); /* #344B3D */
  --color-action-hover: var(--wp--preset--color--action-hover); /* #26392D */
  --color-action-text: var(--wp--preset--color--action-text); /* #FFFFFF */
  --color-focus: var(--wp--preset--color--focus); /* #755568 */
  --color-focus-inverse: var(--wp--preset--color--focus-inverse); /* #FFFFFF */
  --color-border-subtle: var(--wp--preset--color--border-subtle); /* #A9B5A1 */
  --color-background-tint: var(--wp--preset--color--background-tint); /* #E4E8DF */
  --color-background-treatments: var(--wp--preset--color--background-treatments); /* #EFECE2 */

  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --weight-heading: 500;
  --weight-heading-regular: 400;
  --weight-heading-semibold: 600;
  --font-size-body: 1rem; /* TEMP: global Inter body size not defined in Foundations. */
  --line-height-body: 1.6; /* TEMP: global Inter body leading not defined. */
  --font-size-h1: 6.5rem;
  --font-size-h2: 4.25rem;
  --font-size-h3: 1.8125rem;
  --line-height-h1: 0.88;
  --line-height-h2: 0.96;
  --tracking-h1: -0.045em;
  --tracking-h2: -0.035em;
  --font-size-lead: 1.25rem;
  --font-size-editorial: 1.125rem;
  --font-size-approach: 1.1875rem;
  --font-size-supporting: 1rem;
  --font-size-eyebrow: 0.625rem;
  --font-size-button: 0.6875rem;
  --font-size-navigation: 0.75rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1.25rem;
  --space-5: 1.5rem;
  --space-6: 1.875rem;
  --space-7: 3rem;
  --space-8: 4.6875rem;

  --layout-content: 75rem;
  --layout-wide: 80rem;
  --layout-lead: 36.875rem;
  --page-gutter: 8vw;
  --page-gutter-mobile: 1.5rem;
  --section-space: 7.5rem;
  --section-space-large: 8.125rem;
  --section-space-mobile: 5.3125rem;
  --component-gap: 1.875rem;
  --layout-column-gap: 10vw;
  --radius-control: 0;
  --border-width: 1px;
  --button-height: 3.125rem;
  --button-padding-inline: 1.625rem;
  --button-padding-block: 1.125rem;
  --focus-width: 3px; /* Preserved foundation visibility; Figma requires at least 2px. */
  --focus-offset: 3px; /* TEMP: offset distance is not specified in Figma. */
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-background-primary);
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  overflow-wrap: anywhere;
}
h1, h2, h3, h4, h5, h6 {
  margin-block: 0 var(--space-5);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  color: var(--color-text-primary);
  line-height: normal;
}
h1 { font-size: var(--font-size-h1); line-height: var(--line-height-h1); letter-spacing: var(--tracking-h1); }
h2 { font-size: var(--font-size-h2); line-height: var(--line-height-h2); letter-spacing: var(--tracking-h2); }
h3 { font-size: var(--font-size-h3); letter-spacing: 0; }
/* TEMP: H4–H6 absent from the approved type styles; retain a modest fallback. */
h4 { font-size: 1.25rem; }
h5, h6 { font-size: 1rem; }
:is(h1, h2, h3, h4, h5, h6) :is(em, i) { font-weight: 500; font-style: italic; color: var(--color-accent-plum); }
:is(h1, h2, h3, h4, h5, h6) :is(strong, b) { font-weight: 600; }
p, ul, ol, dl { margin-block: 0 var(--space-5); }
ul, ol { padding-inline-start: var(--space-6); }
li > ul, li > ol { margin-block-end: 0; }
.lead { font-family: var(--font-heading); font-size: var(--font-size-lead); font-weight: 400; line-height: 1.5; letter-spacing: 0; color: var(--color-text-primary); max-width: var(--layout-lead); }
.body-editorial, .body-approach, .supporting { font-family: var(--font-heading); font-weight: 400; letter-spacing: 0; }
.body-editorial { font-size: var(--font-size-editorial); line-height: 1.6; }
.body-approach { font-size: var(--font-size-approach); line-height: 1.6; }
.supporting { font-size: var(--font-size-supporting); line-height: 1.5; }
.eyebrow { font-family: var(--font-body); font-size: var(--font-size-eyebrow); font-weight: 700; line-height: normal; letter-spacing: 0.19em; text-transform: uppercase; color: var(--color-accent-plum); }
.type-navigation { font-family: var(--font-body); font-size: var(--font-size-navigation); font-weight: 400; line-height: normal; letter-spacing: 0; }
a { color: var(--color-action-primary); text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; }
a:visited { color: var(--color-text-secondary); }
a:hover, a:active { text-decoration-thickness: 0.15em; }
:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.on-dark { --color-focus: var(--color-focus-inverse); color: var(--color-text-inverse); }
img, video { display: block; max-width: 100%; height: auto; }
figure { margin: 0 0 var(--space-5); }
button, input, select, textarea { font: inherit; max-width: 100%; }
input, select, textarea {
  color: var(--color-text-secondary);
  background: var(--color-background-primary);
  /* Use existing action role for functional boundaries: Sage fails 3:1 on Paper. */
  border: var(--border-width) solid var(--color-action-primary);
  border-radius: var(--radius-control);
  padding: var(--space-2) var(--space-3);
}
textarea { min-height: 8rem; resize: vertical; } /* TEMP: form sizing deferred. */
label { display: block; margin-block-end: var(--space-2); }
fieldset { min-width: 0; margin: 0 0 var(--space-5); padding: var(--space-5); border: var(--border-width) solid var(--color-action-primary); }
legend { padding-inline: var(--space-2); }
:disabled { cursor: not-allowed; }