/* Synchronized raw palette from CindDesign/stablesense#390. Edit here only. */
:root {
  --brand-forest: #1B3F2E;
  --brand-olive-sage: #7A8A5B;
  --brand-oat: #F4EDE1;
  --brand-clay-beige: #D7C3A8;
  --brand-warm-clay: #B89272;
  --brand-moss: #5A6648;
  --brand-ink: #1F211B;
  --brand-text-secondary: #5E6058;
  --brand-text-muted: #8A8B84;
  --brand-surface: #FBF7F0;
  --brand-surface-muted: #EFE6D8;

  --marketing-background: var(--brand-surface);
  --marketing-section-alt: var(--brand-oat);
  --marketing-card: var(--brand-surface);
  --marketing-text-primary: var(--brand-ink);
  --marketing-text-secondary: var(--brand-text-secondary);
  --marketing-text-muted: var(--brand-text-muted);
  --marketing-cta-primary: var(--brand-forest);
  --marketing-cta-primary-hover: var(--brand-moss);
  --marketing-cta-secondary: var(--brand-oat);
  --marketing-cta-secondary-text: var(--brand-forest);
  --marketing-border: var(--brand-clay-beige);
  --marketing-hero-overlay: var(--brand-forest);
  --marketing-quote-accent: var(--brand-warm-clay);
  --marketing-logo-primary: var(--brand-forest);
  --marketing-logo-secondary: var(--brand-olive-sage);
  --marketing-on-dark: var(--brand-surface);
  --marketing-focus: var(--brand-moss);

  /* Existing page components keep these names while using semantic roles. */
  --bg: var(--marketing-background);
  --card: var(--marketing-card);
  --text: var(--marketing-text-primary);
  --muted: var(--marketing-text-secondary);
  --primary: var(--marketing-cta-primary);
  --primary-dark: var(--marketing-cta-primary-hover);
  --ring: color-mix(in srgb, var(--brand-forest) 18%, transparent);
  --radius: 20px;
  --shadow: 0 4px 16px color-mix(in srgb, var(--brand-ink) 7%, transparent);
}

@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url("/fonts/inter-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}