/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
  /* --- Letter-spacing scales --- */
  --letter-spacing-body: 0.04em;
  --letter-spacing-standalone: 0.06em;

  /* --- Spacing scale --- */
  --s-2: 0.125rem;
  --s-4: 0.25rem;
  --s-8: 0.5rem;
  --s-12: 0.75rem;
  --s-16: 1rem;
  --s-20: 1.25rem;
  --s-24: 1.5rem;
  --s-32: 2rem;
  --s-40: 2.5rem;
  --s-48: 3rem;
  --s-60: 3.75rem;
  --s-72: 4.5rem;
  --s-96: 6rem;
  --s-120: 7.5rem;
  --s-144: 9rem;

  /* --- Border radii --- */
  --border-radius: 2px;
  --border-radius-media: 3px;

  /* --- Tinted surfaces & dividers --- */
  --surface-soft: color-mix(
    in srgb,
    var(--wp--preset--color--warm-brown) 4%,
    var(--wp--preset--color--off-white)
  );
  --surface-placeholder: color-mix(
    in srgb,
    var(--wp--preset--color--warm-brown) 8%,
    var(--wp--preset--color--off-white)
  );
  --surface-placeholder-strong: color-mix(
    in srgb,
    var(--wp--preset--color--warm-brown) 20%,
    var(--wp--preset--color--off-white)
  );
  --surface-scrim: color-mix(in srgb, var(--wp--preset--color--off-white) 94%, transparent);
  --border-divider: color-mix(in srgb, var(--wp--preset--color--warm-brown) 14%, transparent);
  --border-divider-light: color-mix(in srgb, var(--wp--preset--color--off-white) 16%, transparent);
  --border-divider-light-strong: color-mix(
    in srgb,
    var(--wp--preset--color--off-white) 30%,
    transparent
  );

  /* --- Shadows (black-based; same elevation language site-wide) --- */
  --shadow-soft: 0 0.5rem 2rem color-mix(in srgb, black 8%, transparent);
  --shadow-medium: 0 1rem 2.5rem color-mix(in srgb, black 16%, transparent);

  /* --- Semantic colors not in theme.json palette (kept out of the
       editor color picker intentionally — these are state colors). --- */
  --color-danger: #b3261e;

  /* --- Layout foundations --- */
  --breakpoint-sm: 20rem; /* 320px */
  --breakpoint-md: 40rem; /* 640px */
  --breakpoint-lg: 64rem; /* 1024px */
  --breakpoint-xl: 90rem; /* 1440px */
  --breakpoint-max: 120rem; /* 1920px */

  /* --- Content max width --- */
  --content-max: var(--breakpoint-max);

  /* --- Max-width scale (mw) --- */
  --mw-xs: 24rem;
  --mw-sm: 32rem;
  --mw-md: 48rem;
  --mw-lg: 72rem;
  --mw-xl: 96rem;
  --mw-max: var(--content-max);
  --mw-full: none;
  --mw-text-xs: 24em;
  --mw-text-sm: 32em;
  --mw-text-md: 40em;
  --mw-text-lg: 48em;

  /* --- Type scale foundations --- */
  --body-font-size: 1rem; /* 16px */
  --type-ratio-avalon: 1.25;
  --type-ratio-bodoni: 1.22;

  /* --- Generic non-heading presets (relative to current font-size) --- */
  --font-size-xs: 0.75em; /* 12px from 16px */
  --font-size-sm: 0.875em; /* 14px from 16px */
  --font-size-base: 1em;
  --font-size-lg: 1.125em; /* 18px from 16px */

  /* --- Heading scales (h6 -> h1) --- */
  --type-step-avalon-0: 1em;
  --type-step-avalon-1: calc(var(--type-step-avalon-0) * 1.25);
  --type-step-avalon-2: calc(var(--type-step-avalon-1) * 1.25);
  --type-step-avalon-3: calc(var(--type-step-avalon-2) * 1.2);
  --type-step-avalon-4: calc(var(--type-step-avalon-3) * 1.2);
  --type-step-avalon-5: calc(var(--type-step-avalon-4) * 1.1);

  --type-step-bodoni-0: 1em;
  --type-step-bodoni-1: calc(var(--type-step-bodoni-0) * 1.2);
  --type-step-bodoni-2: calc(var(--type-step-bodoni-1) * 1.2);
  --type-step-bodoni-3: calc(var(--type-step-bodoni-2) * 1.1);
  --type-step-bodoni-4: calc(var(--type-step-bodoni-3) * 1.1);
  --type-step-bodoni-5: calc(var(--type-step-bodoni-4) * 1.1);

  --h1-font-size: var(--type-step-avalon-5);
  --h2-font-size: var(--type-step-avalon-4);
  --h3-font-size: var(--type-step-avalon-3);
  --h4-font-size: var(--type-step-avalon-2);
  --h5-font-size: var(--type-step-avalon-1);
  --h6-font-size: var(--type-step-avalon-0);

  /* --- Text measure --- */
  --max-ch-sm: 36ch;
  --max-ch: 48ch;
  --max-ch-lg: 64ch;

  /* --- Heading styles --- */
  --h1-font-family: var(--wp--preset--font-family--avalon);
  --h1-font-weight: 600;
  --h1-font-style: normal;
  --h1-letter-spacing: 0em;
  --h1-line-height: 1.2;

  --h1-bodoni-font-family: var(--wp--preset--font-family--bodoni-moda);
  --h1-bodoni-font-size: var(--type-step-bodoni-5);
  --h1-bodoni-font-weight: 400;
  --h1-bodoni-font-style: italic;
  --h1-bodoni-letter-spacing: -0.02em;
  --h1-bodoni-line-height: 1.1;

  --h2-font-family: var(--wp--preset--font-family--avalon);
  --h2-font-weight: 600;
  --h2-font-style: normal;
  --h2-letter-spacing: 0em;
  --h2-line-height: 1.3;

  --h2-bodoni-font-family: var(--wp--preset--font-family--bodoni-moda);
  --h2-bodoni-font-size: var(--type-step-bodoni-4);
  --h2-bodoni-font-weight: 400;
  --h2-bodoni-font-style: italic;
  --h2-bodoni-letter-spacing: -0.02em;
  --h2-bodoni-line-height: 1.25;

  --h3-font-family: var(--wp--preset--font-family--avalon);
  --h3-font-weight: 600;
  --h3-font-style: normal;
  --h3-letter-spacing: 0em;
  --h3-line-height: 1.3;

  --h3-bodoni-font-family: var(--wp--preset--font-family--bodoni-moda);
  --h3-bodoni-font-size: var(--type-step-bodoni-3);
  --h3-bodoni-font-weight: 400;
  --h3-bodoni-font-style: italic;
  --h3-bodoni-letter-spacing: -0.02em;
  --h3-bodoni-line-height: 1.25;

  --h4-font-family: var(--wp--preset--font-family--avalon);
  --h4-font-weight: 600;
  --h4-font-style: normal;
  --h4-letter-spacing: 0em;
  --h4-line-height: 1.4;

  --h4-bodoni-font-family: var(--wp--preset--font-family--bodoni-moda);
  --h4-bodoni-font-size: var(--type-step-bodoni-2);
  --h4-bodoni-font-weight: 400;
  --h4-bodoni-font-style: italic;
  --h4-bodoni-letter-spacing: -0.02em;
  --h4-bodoni-line-height: 1.35;

  --h5-font-family: var(--wp--preset--font-family--avalon);
  --h5-font-weight: 600;
  --h5-font-style: normal;
  --h5-letter-spacing: var(--letter-spacing-body);
  --h5-line-height: 1.4;

  --h5-bodoni-font-family: var(--wp--preset--font-family--bodoni-moda);
  --h5-bodoni-font-size: var(--type-step-bodoni-1);
  --h5-bodoni-font-weight: 400;
  --h5-bodoni-font-style: italic;
  --h5-bodoni-letter-spacing: 0em;
  --h5-bodoni-line-height: 1.35;

  --h6-font-family: var(--wp--preset--font-family--avalon);
  --h6-font-weight: 600;
  --h6-font-style: normal;
  --h6-letter-spacing: var(--letter-spacing-body);
  --h6-line-height: 1.5;

  --h6-bodoni-font-family: var(--wp--preset--font-family--bodoni-moda);
  --h6-bodoni-font-size: var(--type-step-bodoni-0);
  --h6-bodoni-font-weight: 400;
  --h6-bodoni-font-style: italic;
  --h6-bodoni-letter-spacing: 0em;
  --h6-bodoni-line-height: 1.45;

  /* --- Body styles --- */
  --body-font-family: var(--wp--preset--font-family--avalon);
  --body-font-weight: 400;
  --body-font-style: normal;
  --body-letter-spacing: var(--letter-spacing-body);
  --body-line-height: 1.5;

  --p-bodoni-font-family: var(--wp--preset--font-family--bodoni-moda);
  --p-bodoni-font-weight: 400;
  --p-bodoni-font-style: italic;
  --p-bodoni-letter-spacing: 0em;
  --p-bodoni-line-height: 1.4;
}

/* --- Heading downshift on <md (mobile) ---
   Drop h1–h5 one step on the avalon ratio chord so headlines don't
   overpower the small viewport. Bodoni variants follow in lockstep
   so dual-script pages stay coherent. h6 stays at step 0. */
@media (max-width: 39.99rem) {
  :root {
    --h1-font-size: var(--type-step-avalon-4);
    --h2-font-size: var(--type-step-avalon-3);
    --h3-font-size: var(--type-step-avalon-2);
    --h4-font-size: var(--type-step-avalon-1);
    --h5-font-size: var(--type-step-avalon-0);

    --h1-bodoni-font-size: var(--type-step-bodoni-4);
    --h2-bodoni-font-size: var(--type-step-bodoni-3);
    --h3-bodoni-font-size: var(--type-step-bodoni-2);
    --h4-bodoni-font-size: var(--type-step-bodoni-1);
    --h5-bodoni-font-size: var(--type-step-bodoni-0);
  }
}