/* ============================================================
   WildPath — Shared Design Tokens
   Source of truth: Notion "Design Tokens - WP" (2026-06-19)
   ============================================================ */

@font-face {
  font-family: "MADE Mountain";
  src: url("../assets/fonts/MADEMountain-Regular.woff2") format("woff2"),
       url("../assets/fonts/MADEMountain-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Color (warm paper system) --- */
  --paper:  #FBF7EE; /* Yellow White — dominant ground */
  --ink:    #21201D; /* Ink — type, wordmark, rare dark panels */
  --cream:  #F3E0B2; /* Cream Sand — warm bands, backplates */
  --taupe:  #655D56; /* Trail Taupe — secondary text, captions */
  --ochre:  #C9AE6B; /* Gold Ochre — the accent */
  --clay:   #E7A99E; /* Clay Pink — one warm human moment per view */

  /* derived */
  --ink-90: rgba(33, 32, 29, 0.90);
  --ink-65: rgba(33, 32, 29, 0.65);
  --paper-soft: #F6EFDF;

  /* --- Type --- */
  --display: "MADE Mountain", Georgia, serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --script: "Caveat", "Hanken Grotesk", cursive;

  /* --- Rhythm --- */
  --page-x: clamp(1.25rem, 5vw, 6rem);
  --maxw: 1280px;

  /* --- Type scale (brand-tuned) --- */
  --text-micro:   0.72rem;     /* smallest tracked caps: figcaptions, credentials, chips, meta */
  --text-eyebrow: 0.78rem;     /* the wayfinding voice: eyebrows, nav links, button labels */
  --text-caption: 0.8125rem;   /* 13px */
  --text-body:    1.0625rem;   /* 17px body copy */
  --text-lead:    1.1875rem;   /* 19px lead / sub */
  --text-script:  1.5rem;      /* the single Caveat accent size */
  --text-h3:      clamp(1.4rem, 2.2vw, 1.75rem);
  --text-h2:      clamp(1.9rem, 3.2vw, 2.6rem);
  --text-display: clamp(2.4rem, 5.2vw, 4.4rem);  /* hero — max fits "Physical therapy," on one line */
  --leading-display: 0.92;

  /* --- Spacing scale (4px rhythm) --- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;  --space-4: 1rem;
  --space-5: 1.25rem;  --space-6: 1.5rem;   --space-8: 2rem;     --space-10: 2.5rem;
  --space-12: 3rem;    --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  font-size: var(--text-body);
}

img { display: block; max-width: 100%; }
a { color: inherit; }

/* MADE Mountain is lowercase by signature — never force-uppercase it */
.wordmark { font-family: var(--display); text-transform: lowercase; letter-spacing: 0.01em; }
.display  { font-family: var(--display); line-height: 0.95; }
.script   { font-family: var(--script); }

/* small tracked label (Hanken) */
.eyebrow {
  font-family: var(--body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--text-eyebrow);
  color: var(--taupe);
}

/* Shared concept-switcher bar (mockup-only chrome) */
.concept-switch {
  position: fixed; z-index: 99; top: 0; left: 0; right: 0;
  display: flex; gap: 0; align-items: stretch;
  background: var(--ink); color: var(--paper);
  font-family: var(--body); font-size: 0.74rem;
  letter-spacing: 0.04em;
}
.concept-switch a {
  flex: 1; text-align: center; text-decoration: none;
  padding: 0.5rem 0.4rem; color: rgba(251,247,238,0.55);
  border-right: 1px solid rgba(251,247,238,0.12);
  transition: color .2s, background .2s;
}
.concept-switch a:last-child { border-right: 0; }
.concept-switch a:hover { color: var(--paper); }
.concept-switch a[aria-current="true"] { color: var(--ink); background: var(--ochre); font-weight: 700; }
.concept-switch .cs-label { opacity: .5; padding: 0.5rem 0.9rem; letter-spacing: .14em; text-transform: uppercase; font-size: .64rem; }

/* mockup section caption tag (so you know which section you're looking at) */
.sec-tag {
  position: absolute; top: 0; left: 0;
  font-family: var(--body); font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--taupe);
  background: rgba(251,247,238,.7); padding: .35rem .6rem;
  border-bottom-right-radius: 4px; z-index: 5;
}