/* ===========================================================================
   Peaceful Paws NY — "Quiet Meadow" design tokens
   ---------------------------------------------------------------------------
   The calm, reverent design language: a soft sage + cream meadow palette,
   Fraunces (light, optical) for headings, Inter for body. Everything else in
   base.css / app.css derives from these custom properties.

   Contrast note (WCAG AA, verified): sage at its primary value (#8AA893) is a
   decorative/surface colour only — it FAILS as text on cream. For sage-coloured
   TEXT use --sage-text (#4A6350, 6.1:1 on cream). Buttons use --sage-deep with
   WHITE text (4.7:1). The clay accent as text uses --clay-deep (4.6:1).
   =========================================================================== */

/* --- Self-hosted variable fonts (copied from the clinic) ------------------ */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin-var.woff2') format('woff2-variations'),
       url('../fonts/fraunces-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
  /* Latin + common punctuation; lets the browser skip the download for
     out-of-range text and reduces invisible-text time. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2191-2193;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-var.woff2') format('woff2-variations'),
       url('../fonts/inter-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2191-2193;
}

:root {
  /* ---- Core palette ----------------------------------------------------- */
  --sage:        #8AA893;  /* primary — surfaces, motifs, decorative fills    */
  --sage-deep:   #5F7A66;  /* button fills (with white text), strong accents  */
  --sage-text:   #4A6350;  /* sage as TEXT on light (AA on cream)             */
  --sage-soft:   #B7CABD;  /* hairlines, gentle borders                       */
  --sage-mist:   #E7EFE8;  /* tinted section backgrounds                      */
  --sage-mist-2: #DCE8DE;  /* slightly deeper tinted band                     */

  --cream:       #FAF6EF;  /* page background                                 */
  --cream-deep:  #F3ECE0;  /* alternating section background                  */
  --sand:        #D9CFC0;  /* support / warm neutral borders                  */
  --sand-soft:   #EAE2D6;  /* soft sand tint                                  */

  --clay:        #C98B6B;  /* gentle accent — decorative, sparing             */
  --clay-deep:   #A45F3E;  /* clay as TEXT / small accents (AA on cream)      */
  --clay-mist:   #F3E4DA;  /* faint clay wash                                 */

  --ink:         #3A3F3A;  /* primary text                                    */
  --ink-soft:    #5C625C;  /* secondary text (AA on cream)                    */

  --white:       #FFFFFF;

  /* ---- Semantic aliases ------------------------------------------------- */
  --bg:            var(--cream);
  --bg-alt:        var(--cream-deep);
  --surface:       var(--white);
  --text:          var(--ink);
  --text-soft:     var(--ink-soft);
  --heading:       var(--ink);
  --accent:        var(--sage-text);
  --accent-strong: var(--sage-deep);
  --border:        #E6DED2;          /* warm hairline on cream               */
  --border-strong: var(--sand);
  --focus:         #2F5A48;          /* high-contrast focus ring             */

  /* ---- Typography ------------------------------------------------------- */
  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale — gentle, generous. clamp(min, fluid, max). */
  --fs-display: clamp(2.6rem, 1.7rem + 4.2vw, 4.5rem);
  --fs-h1:      clamp(2.1rem, 1.5rem + 2.6vw, 3.2rem);
  --fs-h2:      clamp(1.7rem, 1.3rem + 1.7vw, 2.4rem);
  --fs-h3:      clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  --fs-lead:    clamp(1.18rem, 1.05rem + 0.6vw, 1.4rem);
  --fs-body:    1.0625rem;   /* 17px base — easy reading                     */
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;

  --lh-tight:   1.18;
  --lh-snug:    1.35;
  --lh-body:    1.75;        /* airy, unhurried                              */

  --tracking-eyebrow: 0.22em;
  --tracking-wide:    0.04em;

  /* ---- Spacing scale (rem) --------------------------------------------- */
  --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;

  /* Vertical rhythm for full-bleed sections — generous, calm whitespace. */
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 7rem);

  /* ---- Radii — soft, rounded ------------------------------------------- */
  --radius-sm:  10px;
  --radius:     16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --radius-pill: 999px;

  /* ---- Shadows — soft, low, diffuse ------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(58, 63, 58, 0.05);
  --shadow-sm: 0 4px 14px rgba(74, 99, 80, 0.07);
  --shadow:    0 14px 40px rgba(74, 99, 80, 0.10);
  --shadow-lg: 0 30px 70px rgba(74, 99, 80, 0.14);
  --shadow-soft-clay: 0 18px 50px rgba(164, 95, 62, 0.12);

  /* ---- Layout ----------------------------------------------------------- */
  --container:      1140px;
  --container-wide: 1280px;
  --container-text: 720px;   /* comfortable measure for prose                */
  --gutter: clamp(1.25rem, 0.8rem + 2.2vw, 2.5rem);

  /* ---- Motion — gentle, unhurried -------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 620ms;

  --header-h: 76px;
}