/*
 * Path: css/core/typography.css
 * Purpose: Font faces and typographic roles (copy rhythm, headings, links)
 * Boundaries: No layout primitives (those live in core/layout.css). No components.
 * Source of truth: Brand Style Guide v1.4
 * Dependencies: css/core/tokens.css
 * Principles: SRP, DRY, KISS.
 * Version: 0.9.0 (pre-1.0)
 */

/* =========================================
   FONT FACES (subset used by the site)
   Notes:
   - Use "swap" to avoid FOIT.
   - WOFF2 first, WOFF fallback.
   - Keep weights aligned with token weights.
   ========================================= */
@font-face{
  font-family: "Delight";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/delight-extrabold.woff2") format("woff2"),
       url("/fonts/delight-extrabold.woff")  format("woff");
}
@font-face{
  font-family: "Delight";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/delight-semibold.woff2") format("woff2"),
       url("/fonts/delight-semibold.woff")  format("woff");
}
@font-face{
  font-family: "Delight";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/delight-regular.woff2") format("woff2"),
       url("/fonts/delight-regular.woff")  format("woff");
}
@font-face{
  font-family: "Delight";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/delight-light.woff2") format("woff2"),
       url("/fonts/delight-light.woff")  format("woff");
}

/* =========================================
   BASE TEXT ROLES
   ========================================= */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  color: var(--text-primary);
  font-family: var(--ec-font-sans);
  font-size: var(--ec-fs-14);
  font-weight: var(--ec-w-regular);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-style: none;
  font-synthesis-weight: none;
}

/* Links: visuals live here; structure/focus in core/layout.css */
a{
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}
a:hover{
  text-decoration-thickness: 2px;
}

/* =========================================
   HEADINGS (H1–H4)
   Keep spacing predictable and tone-driven.
   ========================================= */
h1, .h1{
  color: var(--heading-color);
  font-size: var(--ec-fs-36);
  font-weight: var(--ec-w-extrabold);
  letter-spacing: -.01em;
  line-height: 1.22;
  margin: .6em 0 .4em;
}
h2, .h2{
  color: var(--heading-color);
  font-size: var(--ec-fs-28);
  font-weight: var(--ec-w-semibold);
  letter-spacing: -.005em;
  line-height: 1.25;
  margin: .8em 0 .45em;
}
h3, .h3{
  color: var(--heading-color);
  font-size: var(--ec-fs-22);
  font-weight: var(--ec-w-semibold);
  line-height: 1.3;
  margin: 1em 0 .5em;
}
h4, .h4{
  color: var(--heading-color);
  font-size: var(--ec-fs-16);
  font-weight: var(--ec-w-semibold);
  line-height: 1.35;
  margin: 1.1em 0 .55em;
}

/* =========================================
   TEXT ELEMENTS
   ========================================= */
p{ margin: 0 0 1em; }

ul, ol{
  margin: 0 0 1em;
  padding-inline-start: 1.25rem;
}
li + li{ margin-top: .3em; }

blockquote{
  background: var(--surface-muted);
  border-left: 4px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  padding: .5rem 1rem;
  margin: 0 0 1em;
}

code, kbd, samp{
  background: #f6f8fa;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .95em;
  padding: .15em .35em;
}

strong{ font-weight: var(--ec-w-semibold); }
em{ font-style: italic; }

/* =========================================
   TYPOGRAPHIC UTILITIES
   ========================================= */
.ec-measure{ max-width: var(--ec-line-measure); }

.ec-lead{
  font-size: var(--ec-fs-16);
  color: var(--text-secondary);
}

.ec-muted{ color: var(--text-secondary); }

.ec-eyebrow,
.ec-section-eyebrow{
  color: var(--text-secondary);
  font-size: var(--ec-fs-12);
  font-weight: var(--ec-w-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Small/caption text */
.small, small{
  color: var(--text-secondary);
  font-size: var(--ec-fs-12);
  line-height: 1.45;
}
.caption{
  color: var(--text-secondary);
  font-size: var(--ec-fs-10);
  line-height: 1.4;
}

/* Weight helpers */
.text-extrabold{ font-weight: var(--ec-w-extrabold); }
.text-semibold{  font-weight: var(--ec-w-semibold);  }
.text-regular{   font-weight: var(--ec-w-regular);   }
.text-light{     font-weight: var(--ec-w-light);     }

/* =========================================
   ACCESSIBILITY & PREFS
   ========================================= */
::selection{
  background: color-mix(in srgb, var(--ec-teal-500) 18%, var(--surface));
}
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
}

/* =========================================
   DARK TONE POLISH
   ========================================= */
body[data-theme-tone="dark"] blockquote{
  background: var(--surface-muted);
  border-left-color: var(--border);
}