/* DIRECTION: "Hearth" — Warm / trust / care.
 * Mood: a warm neighbourhood clinic, a family practice, a paediatric or dental
 * office — approachable, human, reassuring, NOT the cold Linear/Stripe SaaS
 * register that every other direction here lives in. This is the WARM-CONSUMER
 * archetype the library was missing (surfaced by the 明欣 clinic build: a warm
 * local business rendered in cold-premium tokens reads clinical, not caring).
 * Grounded in warm-healthcare / DTC-care references (Maven·Headspace-warm·Fraunces
 * opsz). Refuses: indigo, neon, glassmorphism, cold pure-grey neutrals.
 * Accent = honeyed amber-clay; primary = a warm, trustworthy forest (health/growth).
 * Neutrals carry a real warm (yellow-red) chroma tint — never pure grey.
 * Elevation = soft warm-tinted shadow. Type: perfect-fourth-ish, body 17px, warm
 * serif display (Fraunces) + humanist sans body. Pair with foundation.css.
 * Fonts free/Google: Fraunces + Inter. */
:root {
  --bg:        #faf5ec;   /* warm cream (yellow-red tint, not off-white) */
  --surface:   #fffdf8;   /* warmer-than-white card */
  --border:    #e7ddcb;   /* warm sand hairline */
  --muted:     #736a5b;   /* warm taupe — >=4.5 on cream as body copy */
  --text:      #3c372e;   /* warm dark brown */
  --ink:       #211d16;   /* near-black espresso */
  --primary:   #2f6b4e;   /* warm forest (trust/health), button fill */
  --primary-hover: #275a41;
  --on-primary:#fdfbf5;   /* warm off-white on the green */
  --accent:    #9a5a2c;   /* honeyed amber-clay — >=4.5 on cream as eyebrow text */
  --accent-soft: rgba(154,90,44,0.12);

  --grad-hero:  radial-gradient(900px circle at 82% -8%, rgba(154,90,44,0.10), transparent 60%);
  --shadow-1:   0 1px 2px rgba(60,45,25,0.05);
  --shadow-2:   0 18px 44px -22px rgba(60,45,25,0.30);   /* warm-tinted, soft */
  --radius-card: 18px;
  --sep-shadow: var(--shadow-2); --sep-border: none;   /* ONE separation primitive: soft warm shadow (components.css .cta .box) */

  --font-display: "Fraunces", Georgia, "Noto Serif TC", serif;
  --font-body:    "Inter", ui-sans-serif, "Noto Sans TC", system-ui, sans-serif;

  /* Type — warm editorial, body 17px, expressive top end */
  --fs-caption: 0.8125rem;  /* 13 */
  --fs-small:   0.875rem;   /* 14 */
  --fs-body:    1.0625rem;  /* 17 */
  --fs-lead:    1.3125rem;  /* 21 */
  --fs-h4:      1.5rem;     /* 24 */
  --fs-h3:      1.875rem;   /* 30 */
  --fs-h2:      clamp(2.25rem, 1.5rem + 3.4vw, 3rem);      /* 36 → 48 */
  --fs-h1:      clamp(2.75rem, 1.6rem + 5.4vw, 4.25rem);   /* 44 → 68 */
  --fs-display: clamp(3.25rem, 1.5rem + 8vw, 6rem);        /* 52 → 96 */
}
.dark {
  --bg:        #1a1712;   /* warm charcoal-brown, not pure black */
  --surface:   #221e18;
  --border:    rgba(255,246,230,0.10);
  --muted:     #a99e8c;
  --text:      #e7e0d3;
  --ink:       #f6f1e6;
  --primary:   #6bbf94;  --primary-hover:#7fcfa4; --on-primary:#10130f;
  --accent:    #d69a5f;
  --accent-soft: rgba(214,154,95,0.16);
  --shadow-1:  0 1px 2px rgba(0,0,0,0.35);
  --shadow-2:  0 20px 48px -22px rgba(0,0,0,0.60);
}