/* ============================================================
   ER-TYPOGRAPHY — Per-breakpoint typography ladder
   ============================================================

   Single source of truth for the type scale every site reads. All
   `--site-*` typography tokens are defined in `src/lib/themeContract.ts`
   and emitted onto the ThemeProvider wrapper at runtime; this file
   provides:

     1. `:root` fallback values so renderer CSS works even if the
        ThemeProvider is bypassed (legacy preview surfaces, builder
        canvas iframes that don't wrap children).
     2. The active-token swap — the breakpoint-suffixed variants
        (heading1Mobile / heading1Tablet / heading1Desktop, etc.) are
        editable per-site from the design panel; the active tokens
        (`--site-heading-1`, `--site-body-size`, etc.) re-resolve to
        the correct breakpoint variant via @media queries below.

   Element renderers should read the active token (e.g.
   `font-size: var(--site-heading-2)` for an H2) instead of declaring
   their own `font-size: clamp(...)` ladder. See SKILL.md § Typography
   Ladder Contract for the full override hierarchy.

   Project-wide breakpoint standards (mirrors site-components.css for
   cards / er-layout.css for section padding):
     - Mobile  : ≤ 768px
     - Tablet  : 769-1024px
     - Desktop : ≥ 1025px
   ============================================================ */

:root {
  /* Per-breakpoint defaults — superuser-editable via the design panel
     (Typography group). Kept here as fallbacks if ThemeProvider is
     bypassed. Values mirror SITE_TOKEN_DEFAULTS in themeContract.ts. */
  --site-heading-1-mobile:  2.25rem;
  --site-heading-1-tablet:  2.75rem;
  --site-heading-1-desktop: 3.5rem;
  --site-heading-2-mobile:  1.75rem;
  --site-heading-2-tablet:  2.25rem;
  --site-heading-2-desktop: 2.75rem;
  --site-heading-3-mobile:  1.375rem;
  --site-heading-3-tablet:  1.625rem;
  --site-heading-3-desktop: 1.875rem;
  --site-heading-4-mobile:  1.125rem;
  --site-heading-4-tablet:  1.25rem;
  --site-heading-4-desktop: 1.375rem;
  --site-heading-5-mobile:  1rem;
  --site-heading-5-tablet:  1.0625rem;
  --site-heading-5-desktop: 1.125rem;

  --site-body-size-mobile:  1rem;
  --site-body-size-tablet:  1rem;
  --site-body-size-desktop: 1.0625rem;
  --site-lede-size-mobile:  1.0625rem;
  --site-lede-size-tablet:  1.125rem;
  --site-lede-size-desktop: 1.1875rem;
  --site-small-size-mobile:  0.875rem;
  --site-small-size-tablet:  0.875rem;
  --site-small-size-desktop: 0.9375rem;

  --site-eyebrow-size:      0.875rem;
  --site-eyebrow-spacing:   0.08em;
  --site-eyebrow-transform: uppercase;

  --site-lh-tight:          1.15;
  --site-lh-base:           1.5;
  --site-lh-loose:          1.7;

  --site-fw-regular:        400;
  --site-fw-medium:         500;
  --site-fw-semibold:       600;
  --site-fw-bold:           700;
  --site-fw-extrabold:      800;

  /* ─── Focus ring contract ─────────────────────────────────────────
     Universal focus-ring tokens read by every interactive element on a
     tenant site (`.site-btn`, `.el-back-to-top`, navbar links, form
     inputs, accordion triggers, etc.). One token swap in the design
     panel retints every focus ring on the site. Component CSS reads
     `var(--site-focus-ring-*)` and falls back to `--site-accent`. */
  --site-focus-ring-color:  var(--site-accent);
  --site-focus-ring-width:  2px;
  --site-focus-ring-offset: 2px;

  /* ─── Accent text on light surfaces ────────────────────────────────
     `--site-accent` is tuned for use as a fill (chips, buttons, card
     borders) where contrast against text is the contract, not contrast
     against a light page background. Many "label as accent text" cases
     (eyebrow, timeline date, floorplan stat label) rendered the raw
     accent on white — which fails WCAG 4.5:1 for popular gold/yellow
     accents (e.g. Momentum #c9a84c → 2.17 on #f8f9fb).

     `--site-accent-on-light` darkens the accent by ~45% in oklab so
     the same hue still reads as "accent" but passes contrast. Authors
     can override per-site if their accent is already dark. */
  --site-accent-on-light: color-mix(in oklab, var(--site-accent, currentColor) 55%, black);

  /* Active tokens default to the desktop variant. Media queries below
     swap them onto the tablet/mobile variants at the project breakpoints
     (1024 / 768) so every renderer that reads `var(--site-heading-2)`
     tracks the same ladder. */
  --site-heading-1: var(--site-heading-1-desktop);
  --site-heading-2: var(--site-heading-2-desktop);
  --site-heading-3: var(--site-heading-3-desktop);
  --site-heading-4: var(--site-heading-4-desktop);
  --site-heading-5: var(--site-heading-5-desktop);
  --site-body-size: var(--site-body-size-desktop);
  --site-lede-size: var(--site-lede-size-desktop);
  --site-small-size: var(--site-small-size-desktop);
}

/* Tablet range — the boundary between desktop and tablet is 1024px.
   ≤ 1024px collapses every heading/body/lede/small onto the tablet
   ladder. Eyebrow stays a single token across breakpoints. */
@container site style(--site-bp: mobile) or style(--site-bp: tablet) {
  :root {
    --site-heading-1: var(--site-heading-1-tablet);
    --site-heading-2: var(--site-heading-2-tablet);
    --site-heading-3: var(--site-heading-3-tablet);
    --site-heading-4: var(--site-heading-4-tablet);
    --site-heading-5: var(--site-heading-5-tablet);
    --site-body-size: var(--site-body-size-tablet);
    --site-lede-size: var(--site-lede-size-tablet);
    --site-small-size: var(--site-small-size-tablet);
  }
}
@media (max-width: 1024px) {
  :root {
    --site-heading-1: var(--site-heading-1-tablet);
    --site-heading-2: var(--site-heading-2-tablet);
    --site-heading-3: var(--site-heading-3-tablet);
    --site-heading-4: var(--site-heading-4-tablet);
    --site-heading-5: var(--site-heading-5-tablet);
    --site-body-size: var(--site-body-size-tablet);
    --site-lede-size: var(--site-lede-size-tablet);
    --site-small-size: var(--site-small-size-tablet);
  }
}

/* Mobile range — project-wide single-column threshold is 768px. */
@container site style(--site-bp: mobile) {
  :root {
    --site-heading-1: var(--site-heading-1-mobile);
    --site-heading-2: var(--site-heading-2-mobile);
    --site-heading-3: var(--site-heading-3-mobile);
    --site-heading-4: var(--site-heading-4-mobile);
    --site-heading-5: var(--site-heading-5-mobile);
    --site-body-size: var(--site-body-size-mobile);
    --site-lede-size: var(--site-lede-size-mobile);
    --site-small-size: var(--site-small-size-mobile);
  }
}
@media (max-width: 768px) {
  :root {
    --site-heading-1: var(--site-heading-1-mobile);
    --site-heading-2: var(--site-heading-2-mobile);
    --site-heading-3: var(--site-heading-3-mobile);
    --site-heading-4: var(--site-heading-4-mobile);
    --site-heading-5: var(--site-heading-5-mobile);
    --site-body-size: var(--site-body-size-mobile);
    --site-lede-size: var(--site-lede-size-mobile);
    --site-small-size: var(--site-small-size-mobile);
  }
}

/* ──────────────────────────────────────────────────────────────────────
 * Global heading wrap contract — never break mid-character.
 *
 * `word-break: keep-all` keeps each word intact rather than slicing it
 * (which produced the "Apartmen / ts" defect on Anchorage hero text).
 * `overflow-wrap: break-word` is the safety net for words that genuinely
 * exceed the container width. `hyphens: auto` lets the renderer insert
 * a soft hyphen at a syllable boundary on long words instead of a
 * mid-character break, when the language profile (lang attr) supports it.
 *
 * NOTE: We target the ACTUAL heading nodes (h1-h6 + __text/__heading
 * inner spans) instead of wrapper divs like `.el-heading`. Wrapper divs
 * inherited the rule down to every nested paragraph (overflow-wrap is an
 * inheritable property), forcing body copy into mid-word breaks at narrow
 * viewports. Restricting to leaf heading elements stops that leak.
 *
 * `break-word` (instead of the previous `anywhere`) is the AGENTS.md
 * responsive contract: only break truly unbreakable tokens, never slice
 * normal words mid-character.
 * ────────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.site-heading-1, .site-heading-2, .site-heading-3, .site-heading-4, .site-heading-5,
.el-heading__text, .el-eyebrow, .el-hero__headline, .el-hero__title,
.el-marquee-editorial__heading, .el-editorial-marquee__heading,
.el-cta-band__heading,
.el-section__heading, .el-region__heading, .el-property__heading,
.site-eyebrow {
  word-break: keep-all;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}