/* ==========================================================================
   Design tokens — Restorative Living™
   Palette hex values are a best-effort read of the moodboard; retune here.
   ========================================================================== */

:root {
  /* ---- Color: raw tones from the moodboard ---- */
  --color-cream:    #F5F1E8;
  --color-tan:      #E8DFCE;
  --color-olive:    #7C8265;
  --color-brown:    #9C6B47;
  --color-espresso: #2E2621;

  /* ---- Color: semantic aliases (components should use these, not raw tones) ---- */
  --color-bg-light: var(--color-cream);
  --color-bg-tan:   var(--color-tan);
  --color-bg-dark:  var(--color-espresso);

  --color-text-on-light: var(--color-espresso);
  --color-text-on-dark:  var(--color-cream);

  --color-accent:      var(--color-olive);
  --color-accent-warm: var(--color-brown);

  --color-border-subtle: rgba(46, 38, 33, 0.15);
  --color-border-subtle-on-dark: rgba(245, 241, 232, 0.2);

  /* ---- Typography ---- */
  --font-display: "Hello Paris Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Jost", -apple-system, "Helvetica Neue", Arial, sans-serif;

  --text-eyebrow: clamp(0.7rem, 0.65rem + 0.2vw, 0.8rem);
  --text-body:    clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --text-lead:    clamp(1.15rem, 1rem + 0.5vw, 1.375rem);
  --text-h3:      clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-h2:      clamp(2rem, 1.6rem + 2vw, 3rem);
  --text-hero:    clamp(2.75rem, 2rem + 4vw, 5.5rem);

  --tracking-eyebrow: 0.18em;
  --tracking-display: 0.01em;
  --leading-tight: 1.15;
  --leading-body: 1.65;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 9rem;

  /* ---- Layout ---- */
  --container-max: 1140px;
  --container-narrow: 720px;
  --container-pad-inline: clamp(1.25rem, 4vw, 3rem);
  --nav-height: 88px;

  /* ---- Motion ---- */
  --reveal-duration: 0.8s;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/*
  Breakpoints (documented here as reference since custom properties
  can't be used inside @media conditions):
  Mobile:  default, < 640px
  Tablet:  640px+
  Desktop: 1024px+
  Large:   1400px+ (container width cap only)
*/