/* Harmony Brand Tokens — Brand Guidelines 2026 palette */
:root {
  /* Official palette */
  --deep-teal: #016161;
  --dark-teal: #064948;
  --charcoal: #292927;
  --golden-ochre: #cd8a22;
  --dusty-sage: #698c85;
  --warm-sand: #bda988;
  --ivory: #faf8f4;
  --white: #ffffff;

  /* Semantic roles */
  --bg: var(--ivory);
  --bg-sand: color-mix(in srgb, var(--warm-sand) 28%, var(--ivory));
  --bg-teal: var(--deep-teal);
  --bg-teal-deep: var(--dark-teal);
  --bg-footer: var(--charcoal);

  --text: var(--charcoal);
  --text-muted: color-mix(in srgb, var(--charcoal) 58%, var(--dusty-sage));
  --text-on-dark: var(--ivory);
  --text-on-teal: var(--ivory);

  --accent: var(--golden-ochre);
  --accent-soft: var(--dusty-sage);
  --action: var(--deep-teal);
  --action-hover: var(--dark-teal);

  --border: color-mix(in srgb, var(--warm-sand) 55%, transparent);
  --border-strong: color-mix(in srgb, var(--dusty-sage) 35%, transparent);
  --glass: color-mix(in srgb, var(--white) 18%, transparent);
  --glass-border: color-mix(in srgb, var(--white) 55%, transparent);

  /* Typography — Brand Guidelines */
  --font-display: "Butler", Georgia, "Times New Roman", serif;
  --font-body: "Karla", "Helvetica Neue", Arial, sans-serif;

  /* Body = base reference (Karla Regular) */
  --fs-body: 1.125rem; /* 18px */
  --lh-body: 1.3; /* 120–130% */
  --ls-body: -0.02em;

  /* Labels / captions — Karla Medium, 0.85× body */
  --fs-label: 0.95625rem;
  --lh-label: 1.25;
  --ls-label: -0.02em;

  /* Subhead — Butler Medium, 1.4–1.6× body */
  --fs-subhead: clamp(1.575rem, 2.2vw, 1.8rem);
  --lh-subhead: 1.12;
  --ls-subhead: -0.01em;

  /* Headline — Butler, ≥5× body */
  --fs-headline: clamp(2.75rem, 7vw, 5.625rem);
  --lh-headline: 1.05;
  --ls-headline: -0.02em;

  --fw-body: 400;
  --fw-label: 500;
  --fw-display: 500; /* Butler Medium per brand */
  --fw-display-strong: 500; /* One step under Bold — Medium for large titles */

  /* Layout */
  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 10vw, 7.5rem);
  --radius: 1.25rem;
  --radius-sm: 0.75rem;
  --header-h: 5rem;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.55s;
}