/* =============================================================
   Elgie Therapy — Colors + Type · semantic CSS
   Pairs with tokens.css. Import both.
   ============================================================= */
@import url('tokens.css');
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ---------- TYPE ROLES ---------- */

.t-display, h1.t-display {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-default);
  text-wrap: balance;
  font-optical-sizing: auto;
  margin: 0 0 var(--space-5);
}
.t-display em { font-style: italic; font-weight: var(--fw-medium); color: var(--accent-onCream); }

.t-h1, h1 {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--fg-default);
  text-wrap: balance;
  margin: 0 0 var(--space-4);
  font-optical-sizing: auto;
}
.t-h2, h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--fg-default);
  text-wrap: balance;
  margin: 0 0 var(--space-4);
  font-optical-sizing: auto;
}
.t-h3, h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: -0.005em;
  color: var(--fg-default);
  margin: 0 0 var(--space-3);
}
.t-h4, h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--fg-default);
  margin: 0 0 var(--space-2);
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--fg-muted);
  margin: 0 0 var(--space-3);
}

.t-lede {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--fg-muted);
  font-weight: var(--fw-regular);
  text-wrap: pretty;
  margin: 0 0 var(--space-6);
  max-width: 56ch;
}

p, .t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-default);
  text-wrap: pretty;
  margin: 0 0 var(--space-4);
}

.t-body-muted { color: var(--fg-muted); }
.t-body-sm    { font-size: var(--fs-body-sm); line-height: 1.55; }
.t-caption    { font-size: var(--fs-caption); color: var(--fg-muted); line-height: 1.45; }
.t-micro      { font-size: var(--fs-micro); color: var(--fg-muted); }

.t-pullquote {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.4;
  color: var(--fg-default);
  letter-spacing: -0.005em;
  text-wrap: balance;
  margin: 0;
}
.t-pullquote::before { content: "" "; color: var(--accent-onCream); }
.t-pullquote::after  { content: "\201D"; color: var(--accent-onCream); }

.t-italic-emphasis {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-medium);
  color: var(--accent-onCream);
}

/* ---------- LINKS ---------- */
.t-link {
  color: var(--accent-onCream);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: var(--fw-medium);
}
.t-link:hover { color: var(--accent-press); text-decoration-thickness: 1.5px; }

/* ---------- LIST ROLES ---------- */
.t-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.t-list > li {
  position: relative;
  padding-left: 26px;
  margin-bottom: var(--space-3);
  line-height: 1.55;
  color: var(--fg-default);
}
.t-list > li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.65em;
  width: 14px; height: 1px;
  background: var(--accent-onCream);
}

.t-list-check > li::before {
  content: "";
  width: 16px; height: 16px; left: 0; top: 0.25em;
  background: none;
  border: 1.5px solid var(--c-sage-700);
  border-top: none; border-right: none;
  transform: rotate(-45deg) translateY(-2px);
}

/* ---------- COLOR UTILITIES ---------- */
.fg-default { color: var(--fg-default); }
.fg-muted   { color: var(--fg-muted); }
.fg-accent  { color: var(--accent-onCream); }
.fg-onDark  { color: var(--fg-onDark); }

.bg-page    { background: var(--bg-page); }
.bg-surface { background: var(--bg-surface); }
.bg-raised  { background: var(--bg-raised); }
.bg-tint    { background: var(--bg-tint); }
.bg-blush   { background: var(--c-blush-300); }
.bg-sage    { background: var(--c-sage-100); }
.bg-ink     { background: var(--bg-inverse); color: var(--fg-onDark); }

/* ---------- DIVIDERS / RULES ---------- */
.rule {
  border: 0; height: 1px;
  background: var(--line-default);
  margin: var(--space-7) 0;
}
.rule-soft { background: var(--line-soft); }
.rule-accent {
  height: 2px; width: 48px; background: var(--accent);
  margin: var(--space-3) 0 var(--space-6);
  border-radius: 2px;
}