/* ==========================================================================
   DESIGN TOKENS — single source of truth for the look of the site.
   Switching specialty / brand = edit this file only (components never hardcode values).
   Palette extracted from the printed mockup: apple red, logo graphite, white page.
   Added: warm cream surfaces + a leaf green support colour for a calm, natural feel.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-var.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* @palette:start (rewritten by tools/new-site.php) */
  /* Brand */
  --color-brand:         #B3202F;   /* apple red — buttons, links, key accents (AA on cream/white) */
  --color-brand-strong:  #8F1824;   /* hover / pressed */
  --color-brand-bright:  #E01E26;   /* the mockup's pure red: decorative rules, frames, seal only */
  --color-brand-soft:    #F8E3E4;   /* tinted backgrounds */

  /* Neutrals (logo graphite) */
  --color-ink:           #2E2A29;   /* body text */
  --color-ink-soft:      #5E5855;   /* secondary text (≥ 5:1 on cream) */
  --color-graphite:      #6B6B6B;   /* logo grey: decorative only */
  --color-line:          #E6DDD2;

  /* Surfaces */
  --color-bg:            #FFFCF8;   /* page */
  --color-surface:       #FFFFFF;   /* cards */
  --color-tint:          #F7EFE5;   /* alternate sections */

  /* Support: leaf green */
  --color-leaf:          #3F6B4A;
  --color-leaf-soft:     #E5EEE3;

  /* @palette:end */

  --color-focus:         #1F4FD1;   /* focus ring: distinct from brand red */

  /* Typography */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-xs:   clamp(0.80rem, 0.78rem + 0.1vw, 0.85rem);
  --text-sm:   clamp(0.88rem, 0.86rem + 0.1vw, 0.94rem);
  --text-base: clamp(1.00rem, 0.97rem + 0.2vw, 1.10rem);
  --text-lead: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  --text-h3:   clamp(1.20rem, 1.10rem + 0.5vw, 1.45rem);
  --text-h2:   clamp(1.75rem, 1.35rem + 1.8vw, 2.60rem);
  --text-h1:   clamp(2.10rem, 1.50rem + 3.0vw, 3.60rem);

  --leading-tight: 1.15;
  --leading-body:  1.65;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: clamp(3.5rem, 2.5rem + 5vw, 6.5rem);   /* section padding */

  /* Shape & depth */
  --radius-sm:   0.5rem;
  --radius-md:   1rem;
  --radius-lg:   1.75rem;
  --radius-pill: 999px;
  --border-frame: 3px;                               /* the thick red outline of the mockup */

  --shadow-sm: 0 1px 2px rgb(60 30 20 / 8%);
  --shadow-md: 0 8px 24px -8px rgb(90 30 30 / 18%);

  /* Layout */
  --container:        80rem;
  --container-narrow: 46rem;
  --gutter:           1.25rem;
  --header-h:         4.25rem;
}

/* Large monitors: use the space (text columns stay narrow for readability). */
@media (min-width: 90rem) {
  :root {
    --container: 94rem;
    --gutter: 2.5rem;
    --text-base: 1.15rem;
    --text-lead: 1.5rem;
    --text-h2: 3.1rem;
    --text-h1: 4.4rem;
    --header-h: 4.75rem;
  }
}
@media (min-width: 120rem) {
  :root { --container: 106rem; --text-h1: 5rem; }
}