/* Train With Ty — design system retrofit overlay
 *
 * Applied to legacy blog posts and service pages (corrective-exercise.html,
 * functional-health-coaching.html, online-coaching.html, root-cause-health-coaching.html,
 * blog/index.html, blog/<post>.html) to bring them in line with the new design system
 * shipped on the homepage in April 2026.
 *
 * Approach: import the new tokens, then redefine the legacy CSS variables to map
 * onto the new palette + force the typography to Fraunces / Inter. The legacy
 * inline styles continue to reference --cream, --terracotta, etc. — they just
 * resolve to the new values now.
 *
 * Load AFTER the legacy <style> block so this overrides.
 */

@import url('/assets/css/tokens.css');
@import url('/assets/css/palette.css');

:root {
  /* Map legacy palette → new tokens */
  --cream: var(--tw-cream);
  --warm-white: var(--bg-elevated);
  --forest: var(--tw-forest);
  --sage: #7A8B7E;            /* Slightly muted accent — used sparingly in legacy */
  --terracotta: var(--tw-terra);
  --sand: var(--sand);
  --dark: var(--ink);
  --text: var(--ink);
  --muted: var(--stone);
}

/* ----- Typography overrides ----- */

body {
  font-family: var(--font-body) !important;
  background: var(--tw-cream) !important;
  color: var(--ink) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em !important;
  color: var(--ink) !important;
  text-wrap: balance;
}

/* Italic emphasis stays terracotta — same brand move */
em, h1 em, h2 em, h3 em, h4 em {
  font-style: italic;
  color: var(--tw-terra) !important;
  font-weight: 400 !important;
}

p, li, td, th, label, span, div, a {
  /* Inherit body font; legacy uses Jost which we override above */
}

/* Pills / badges / tags */
.pill, .badge, .tag, .category, .stat-label {
  font-family: var(--font-body) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
}

/* Mono if used */
code, pre, .mono {
  font-family: var(--font-mono) !important;
}

/* ----- Layout adjustments ----- */

/* Buttons — hard-edge, no rounded pills */
.btn-primary, .btn, button, .button, [class*="btn-"], a[class*="btn"] {
  border-radius: 0 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
  font-weight: 500 !important;
}

/* Anti-pill — kill any oval buttons from old framework */
.btn-primary, .btn-light, .btn-cta {
  border-radius: 0 !important;
}

/* Cards — sharper edges */
.card, .post-card, .blog-card, .service-card, .feature-card, .testimonial-card {
  border-radius: 0 !important;
}

/* Hero section — looks more editorial with new fonts */
.hero, .page-hero, .blog-hero, .service-hero {
  background: var(--tw-cream) !important;
  color: var(--ink) !important;
}
.hero h1, .page-hero h1 {
  font-weight: 400 !important;
}

/* Forest/dark sections — keep their dark feel */
[class*="dark"], .footer, footer, [style*="background"][style*="forest"] {
  background-color: var(--tw-forest) !important;
}

/* Links */
a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms, color 200ms;
}
a:hover {
  color: var(--tw-terra);
}

/* Footer specifically — make the dark theme work with new tokens */
footer, .footer {
  background: var(--ink) !important;
  color: rgba(241,234,219,0.72) !important;
}
footer a, .footer a {
  color: rgba(241,234,219,0.82) !important;
  border: 0 !important;
}
footer a:hover, .footer a:hover {
  color: var(--tw-terra) !important;
}

/* Eyebrow text (small uppercase headers) */
.eyebrow, .section-label, .pre-title {
  color: var(--tw-terra) !important;
  letter-spacing: 0.22em !important;
  font-family: var(--font-body) !important;
}