:root {
  --bg-linen: #FBF9F5;
  --bg-linen-warm: #F4EFE6;
  --ink-charcoal: #1C2522;
  --ink-muted: #4A5853;
  --brand-accent: #3D6B5B;
  --brand-accent-hover: #2E5245;
  --brand-accent-soft: #EBF3F0;
  --terracotta: #C87D55;
  --terracotta-soft: #F9EFEA;
  --pine-dark: #13221D;
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-linen);
  color: var(--ink-charcoal);
  font-family: var(--font-sans);
  overflow-x: clip;
}

body {
  background-color: var(--bg-linen);
  color: var(--ink-charcoal);
  font-family: var(--font-sans);
  margin: 0;
  padding: 0;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

.font-serif-editorial {
  font-family: var(--font-serif);
  font-variation-settings: "SOFT" 50, "WONK" 0;
}

.bg-brand {
  background-color: var(--brand-accent);
}
.bg-brand:hover {
  background-color: var(--brand-accent-hover);
}
.bg-brand-soft {
  background-color: var(--brand-accent-soft);
}
.text-brand {
  color: var(--brand-accent);
}
.border-brand {
  border-color: var(--brand-accent);
}

/* Native <details> Accordion Reset & Animation */
details > summary {
  list-style: none;
  cursor: pointer;
}
details > summary::-webkit-details-marker {
  display: none;
}
details[open] > summary .accordion-icon {
  transform: rotate(180deg);
}
.accordion-icon {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Focus accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

/* Subtle organic grain/editorial card elevation */
.editorial-card {
  background: #FFFFFF;
  border: 1px solid rgba(28, 37, 34, 0.08);
  box-shadow: 0 10px 30px -12px rgba(28, 37, 34, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.editorial-card:hover {
  border-color: rgba(61, 107, 91, 0.28);
  box-shadow: 0 18px 40px -15px rgba(28, 37, 34, 0.09);
}

/* Modality Matcher active tab */
.matcher-tab-btn[aria-selected="true"],
.matcher-tab-btn.active {
  background-color: var(--brand-accent);
  color: #FFFFFF;
  border-color: var(--brand-accent);
  box-shadow: 0 6px 18px -4px rgba(61, 107, 91, 0.35);
}
