/* =============================================================================
   Typography — Willowbound Child Theme

   Fonts:   Playfair Display (headings) · Merriweather (body) · Allura (accent)
   Scale:   Fluid clamp() for display/2xl/xl/lg · Fixed rem for md and below
   Loaded:  Google Fonts via functions.php (display=swap + preconnect hints)
   ============================================================================= */


/* ---------------------------------------------------------------------------
   Fallback font metrics
   Approximate Google Fonts with locally available Georgia to minimise
   cumulative layout shift (CLS) while web fonts load.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Playfair Display Fallback';
  src: local('Georgia');
  size-adjust:       96%;
  ascent-override:   93%;
  descent-override:  25%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Merriweather Fallback';
  src: local('Georgia');
  size-adjust:       105%;
  ascent-override:   86%;
  descent-override:  24%;
  line-gap-override: 0%;
}


/* ---------------------------------------------------------------------------
   Design tokens — typography
   --------------------------------------------------------------------------- */

:root {

  /* Font stacks */
  --font-display: 'Playfair Display', 'Playfair Display Fallback', Georgia, serif;
  --font-body:    Merriweather, 'Merriweather Fallback', Georgia, serif;
  --font-accent:  Allura, cursive;
  /* RULE: --font-accent for ≤6 word taglines and pull quotes ONLY.
     Never use for body copy, navigation, form labels, or captions. */

  /* Type scale
     Fluid (clamp) for display/heading sizes — smooth scaling across viewports.
     Fixed (rem) for body and UI — respects browser zoom, stays predictable. */
  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-md:      1.125rem;
  --text-lg:      clamp(1.375rem, 2vw + 0.75rem, 2rem);
  --text-xl:      clamp(1.75rem, 3.5vw + 0.875rem, 3rem);
  --text-2xl:     clamp(2.25rem, 5vw + 1rem, 4rem);
  --text-display: clamp(3.5rem, 9vw + 1rem, 8rem);
  --text-accent:  clamp(1.25rem, 2vw + 0.75rem, 1.875rem);

  /* Line heights */
  --leading-display: 1.0;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;
  --leading-loose:   1.8;
  --leading-accent:  1.3;

  /* Letter spacing */
  --tracking-display: -0.03em;
  --tracking-heading: -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:     0.06em;
  --tracking-wider:    0.1em;
  /* RULE: Never apply letter-spacing to Allura or any script/cursive font. */

  /* Weights — only what we load (each weight = a separate font request) */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-semi:    600;
  --weight-bold:    700;

  /* Measure (max line length) */
  --measure-body:   65ch;
  --measure-lead:   52ch;
  --measure-narrow: 42ch;

  /* Motion */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --duration-base:  250ms;
  --duration-slow:  500ms;
  --duration-enter: 700ms;
  --tagline-fade:   700ms;

}


/* ---------------------------------------------------------------------------
   Base element styles
   --------------------------------------------------------------------------- */

body {
  font-family:             var(--font-body);
  font-size:               var(--text-base);
  font-weight:             var(--weight-regular);
  line-height:             var(--leading-relaxed);
  letter-spacing:          var(--tracking-normal);
  font-kerning:            normal;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--color-near-black);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin-block: 0;
}

h1 { font-size: var(--text-2xl);  letter-spacing: var(--tracking-heading); }
h2 { font-size: var(--text-xl);   letter-spacing: var(--tracking-heading); line-height: var(--leading-snug); }
h3 { font-size: var(--text-lg);   letter-spacing: var(--tracking-normal);  line-height: var(--leading-snug); }
h4 { font-size: var(--text-md);   letter-spacing: var(--tracking-normal);  line-height: var(--leading-normal); }

h5, h6 {
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height:    var(--leading-normal);
}

p {
  margin-block: 0;
  max-width: var(--measure-body);
}

p + p { margin-top: 1em; }

strong, b { font-weight: var(--weight-bold); }
em, i     { font-style: italic; }

img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}


/* Dark + willow sections: light text on dark backgrounds needs more breathing room */
.section--dark p,  .section--dark li,
.section--willow p, .section--willow li {
  line-height: var(--leading-loose);
}

.section--dark   h1, .section--dark   h2, .section--dark   h3,
.section--willow h1, .section--willow h2, .section--willow h3 {
  line-height: var(--leading-snug);
}