/* S2 Spa — design tokens and base typography of the reference (theme settings + theme.css base),
   scoped with :where() so every section rule of the reference still wins. */
:root {
  --color-white: #ffffff;
  --color-black: #1f1a17;
  --color-gray: #6c746e;
  --color-gray-light: #efeae1;
  --color-gray-dark: #3e4842;
  --color-paragraph: #4b554e;
  --color-primary: #8E4C35;
  --color-primary-hover: #6D3825;
  --color-secondary: #C5A059;
  --color-surface: #faf7f2;
  --color-surface-container: #efeae1;
  --color-surface-container-low: #fffdf9;
  --color-outline-variant: #e2d9cc;
  --bg-body: #f5f2ec;
  --bg-footer: #1f1a17;
  --border-color: #d9ded7;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;
  --font-family-heading: 'EB Garamond', serif;
  --font-family-body: 'DM Sans', sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.08;
  --line-height-base: 1.6;
  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-base: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;
  --font-2xl: 1.5rem;
  --font-3xl: 1.875rem;
  --font-4xl: 2.125rem;
  --bed-gutter: clamp(0.875rem, 2.2vw, 2rem);
  --container-max: 90rem;
  --header-height: 4.5rem;
  --bed-deep: var(--color-primary);
  --bed-mint: #C5A059;
  --bed-mint-soft: #ebece4;
  --bed-ivory: #fffdf9;
  --bed-text: #1f1a17;
  --bed-muted: #6c746e;
  --bed-line: #e2d9cc;
  /* index.css tokens (.spa-home in the reference), shared by every page here */
  --spa-bg-body: #FAF7F2;
  --spa-bg-surface: #FFFDF9;
  --spa-bg-sand: #EFEAE1;
  --spa-bg-sand-dark: #E4DCD0;
  --spa-bg-dark: #1F1A17;
  --spa-bg-olive: #232A22;
  --spa-text-primary: #1F1A17;
  --spa-text-secondary: #8E4C35;
  --spa-text-gold: #B89568;
  --spa-text-muted: #6B625B;
  --spa-border: rgba(226, 217, 204, 0.6);
  --spa-border-gold: rgba(184, 149, 104, 0.25);
  --spa-radius-card: 16px;
  --spa-radius-pill: 9999px;
  --spa-radius-arch: 200px 200px 16px 16px;
  --spa-shadow-soft: 0 20px 40px -15px rgba(31, 26, 23, 0.05);
  --spa-shadow-hover: 0 30px 60px -15px rgba(31, 26, 23, 0.1);
}
@media (max-width: 767px) {
  :root { --bed-gutter: 0.875rem; }
}

html { background-color: var(--bg-body); }
body.s2-site {
  font-family: var(--font-family-body);
  color: var(--color-black);
  background-color: var(--bg-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.s2-site #wrapper, body.s2-site #main { background-color: var(--bg-body); }

/* theme.css reset + base typography, only inside the page content and the footer block */
:where(#content, .s2-footer) *, :where(#content, .s2-footer) *::before, :where(#content, .s2-footer) *::after { box-sizing: border-box; }
:where(#content, .s2-footer) :is(blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, ol, p, pre, ul) { margin: 0; }
:where(#content, .s2-footer) :is(ol, ul) { padding: 0; list-style: none; }
:where(#content, .s2-footer) :is(a) { color: inherit; text-decoration: inherit; }
:where(#content, .s2-footer) :is(img) { display: block; max-width: 100%; height: auto; }
:where(#content, .s2-footer) :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-family-heading, serif);
  font-weight: var(--font-weight-bold, 700);
  line-height: var(--line-height-tight, 1.08);
  margin-bottom: 1rem;
  color: inherit;
  width: auto;
  text-rendering: auto;
  letter-spacing: normal;
}
:where(#content, .s2-footer) :is(h1) { font-size: var(--font-2xl); }
:where(#content, .s2-footer) :is(h2) { font-size: var(--font-xl); }
:where(#content, .s2-footer) :is(h3) { font-size: var(--font-lg); }
:where(#content, .s2-footer) :is(h4) { font-size: var(--font-base); }
:where(#content, .s2-footer) :is(p) {
  font-family: var(--font-family-body, sans-serif);
  font-weight: var(--font-weight-normal, 400);
  font-size: var(--font-sm, 0.875rem);
  line-height: var(--line-height-base, 1.6);
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  :where(#content, .s2-footer) :is(h1) { font-size: var(--font-3xl); }
  :where(#content, .s2-footer) :is(h2) { font-size: var(--font-2xl); }
  :where(#content, .s2-footer) :is(h3) { font-size: var(--font-xl); }
  :where(#content, .s2-footer) :is(h4) { font-size: var(--font-lg); }
  :where(#content, .s2-footer) :is(p) { font-size: var(--font-base); }
}
@media (min-width: 1024px) {
  :where(#content, .s2-footer) :is(h1) { font-size: var(--font-4xl); }
  :where(#content, .s2-footer) :is(h2) { font-size: var(--font-3xl); }
  :where(#content, .s2-footer) :is(h3) { font-size: var(--font-2xl); }
  :where(#content, .s2-footer) :is(h4) { font-size: var(--font-xl); }
}
body.s2-site, body.s2-site #wrapper, body.s2-site #main { background-color: #FFFDF9; }