/* ============================================================
   Founding Self, PLLC — Design Tokens
   Primitives → Semantic → Component-facing custom properties.
   Palette source: client-provided reference ("Inspired by nature.
   Rooted in peace.") — hex values kept exact.
   ============================================================ */

:root {
  /* ---- Primitives: palette ---- */
  --oat-milk: #f2ede2;
  --blush-petal: #e7b9b2;
  --terracotta: #c47a5c;
  --terracotta-deep: #8c5033; /* darkened from #a4603f — needed 4.5:1 for eyebrow/link text on Oat Milk (was 4.16:1) */
  --sage: #a7b59c;
  --sage-deep: #7e8c73;
  --misty-sky: #b7c6d6;
  --olive: #6e775c;
  --olive-deep: #565d47;
  --ink: #2a2620;       /* warm near-black — not in the source palette, added for AA body text */
  --ink-soft: #5c5648;  /* muted warm gray, for secondary text on neutral (Oat Milk/white) backgrounds only */
  --ink-on-accent: #423d32; /* darker than ink-soft — needed for secondary text sitting on Blush/Sage/Misty accent backgrounds */
  --white: #ffffff;

  /* ---- Primitives: type ---- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-tight: 1.12;
  --leading-snug: 1.32;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.01em;
  --tracking-normal: 0em;
  --tracking-wide: 0.03em;
  --tracking-eyebrow: 0.14em;

  /* Fluid type scale — clamp(min, preferred, max), no breakpoint-specific overrides needed */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);
  --text-xl: clamp(1.375rem, 1.3rem + 0.4vw, 1.625rem);
  --text-2xl: clamp(1.75rem, 1.6rem + 0.75vw, 2.25rem);
  --text-3xl: clamp(2.125rem, 1.9rem + 1.15vw, 2.75rem);
  --text-4xl: clamp(2.5rem, 2.1rem + 2vw, 3.5rem);
  --text-5xl: clamp(3rem, 2.4rem + 3vw, 4.5rem);
  --text-6xl: clamp(3.5rem, 2.6rem + 4.5vw, 5.75rem);

  /* ---- Primitives: space (4px rhythm) ---- */
  --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: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Primitives: radius / shadow / motion ---- */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.75rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(42, 38, 32, 0.07);
  --shadow-md: 0 12px 28px -8px rgba(42, 38, 32, 0.16);
  --shadow-lg: 0 28px 56px -16px rgba(42, 38, 32, 0.22);

  --duration-fast: 150ms;
  --duration-base: 280ms;
  --duration-slow: 420ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  --container-max: 72rem;
  --container-narrow: 44rem;

  --z-nav: 100;
  --z-overlay: 500;
  --z-modal: 1000;

  /* ---- Semantic layer: what components actually reference ---- */
  --bg-page: var(--oat-milk);
  --bg-surface: var(--white);
  --bg-accent-warm: var(--blush-petal);
  --bg-accent-cool: var(--misty-sky);
  --bg-accent-earth: var(--sage);
  --bg-deep: var(--olive-deep); /* darker than --olive — needed 4.5:1 for Oat Milk body text (was 4.04:1) */
  --bg-deep-text: var(--oat-milk);

  --text-primary: var(--ink);
  --text-secondary: var(--ink-soft);
  --text-inverse: var(--oat-milk);
  --text-on-accent: var(--ink-on-accent);

  --border-subtle: rgba(42, 38, 32, 0.12);
  --border-on-deep: rgba(242, 237, 226, 0.22);

  /* Button bg/hover use dedicated shades (not --terracotta/--terracotta-deep) so the
     dark --cta-text stays >=4.5:1 in both states — hover lightens rather than darkens,
     since darkening broke contrast with dark text. */
  --cta-bg: #c88268;
  --cta-bg-hover: #d19079;
  --cta-text: var(--ink);

  --cta-ghost-border: var(--ink);
  --cta-ghost-text: var(--ink);

  --link-color: var(--terracotta-deep);
  --link-color-on-deep: var(--blush-petal);

  --focus-ring: var(--ink);

  --eyebrow-color: var(--terracotta-deep);
  --eyebrow-color-on-deep: var(--blush-petal);
}