/*
 * UPLIFY design system v2 — centralized display typography and rhythm.
 *
 * This file is loaded for every Jinja-rendered public page.  It intentionally
 * contains only shared tokens/primitives and mappings from legacy page classes
 * to those primitives.  Page-specific CSS may describe layout/content modules,
 * but must not create another palette, font stack, type scale or spacing scale.
 *
 * The stylesheet currently loads before site.css from layouts/_head.html.
 * Root selectors therefore carry one extra :root specificity; legacy rules that
 * use !important are overridden only where the shared contract also requires it.
 */

html.theme-expressive:root,
html.theme-os:root,
html.theme-editorial:root {
  --ds-font-display: "Space Grotesk", "Onest", "Space Grotesk Fallback", system-ui, sans-serif;
  --ds-font-body: "Space Grotesk", "Onest", "Space Grotesk Fallback", system-ui, sans-serif;
  --ds-font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, monospace;

  --ds-title-display: clamp(3rem, 7.2vw, 6.5rem);       /* 48 → 104px */
  --ds-title-section: clamp(2.25rem, 4.8vw, 4.5rem);   /* 36 → 72px */
  --ds-title-card: clamp(1.625rem, 2.8vw, 2.5rem);     /* 26 → 40px */
  --ds-title-compact: clamp(1.875rem, 3.4vw, 3rem);    /* 30 → 48px */
  --ds-title-article: clamp(1.5rem, 2.8vw, 2.25rem);   /* 24 → 36px */

  --ds-title-display-lh: 0.94;
  --ds-title-section-lh: 0.98;
  --ds-title-card-lh: 1.06;
  --ds-title-display-ls: -0.045em;
  --ds-title-section-ls: -0.04em;
  --ds-title-card-ls: -0.03em;
  --ds-title-display-measure: 16ch;
  --ds-title-section-measure: 20ch;

  --ds-space-section: clamp(4rem, 7.5vw, 6.5rem);      /* 64 → 104px */
  --ds-space-section-compact: clamp(3rem, 5.5vw, 5rem);/* 48 → 80px */
  --ds-space-head: clamp(1.75rem, 3vw, 3rem);          /* 28 → 48px */

  /* Existing components already read these canonical variables. */
  --font-display: var(--ds-font-display);
  --font-body: var(--ds-font-body);
  --font-sans: var(--ds-font-body);
  --t-display: var(--ds-title-display);
  --t-section: var(--ds-title-section);
  --t-h3: var(--ds-title-card);
  --fs-h1: var(--ds-title-display);
  --fs-h2: var(--ds-title-section);
  --fs-h3: var(--ds-title-card);
  --sp-section: var(--ds-space-section);

  /* Stable aliases for isolated modules while they are migrated. */
  --ds-bg: var(--bg);
  --ds-panel: var(--bg-1);
  --ds-panel-raised: var(--bg-2);
  --ds-text: var(--fg);
  --ds-text-muted: var(--fg-2);
  --ds-text-dim: var(--fg-3);
  --ds-line: var(--line);
  --ds-accent: var(--accent);
}

/* Canonical primitives for all new work. */
.ds-display-title,
.ds-section-title,
.ds-card-title {
  font-family: var(--ds-font-display);
  font-weight: 500;
  text-wrap: balance;
}

.ds-display-title {
  max-width: var(--ds-title-display-measure);
  font-size: var(--ds-title-display);
  line-height: var(--ds-title-display-lh);
  letter-spacing: var(--ds-title-display-ls);
}

.ds-display-title--narrow { max-width: 14ch; }

.ds-section-title {
  max-width: var(--ds-title-section-measure);
  font-size: var(--ds-title-section);
  line-height: var(--ds-title-section-lh);
  letter-spacing: var(--ds-title-section-ls);
}

.ds-card-title {
  font-size: var(--ds-title-card);
  line-height: var(--ds-title-card-lh);
  letter-spacing: var(--ds-title-card-ls);
}

.ds-section { padding-block: var(--ds-space-section); }
.ds-section--compact { padding-block: var(--ds-space-section-compact); }

/* Legacy hero families mapped to the canonical display primitive. */
html.theme-expressive body :is(
  h1.mega,
  h1.ch2-title,
  h1.geo-title,
  h1.mt-title,
  h1.gs-title,
  h1.tt-title,
  h1.tg-title,
  h1.hs-title,
  h1.blog-hero-title,
  h1.ch-title,
  h1.art-title,
  .cases-hero h1,
  .solutions-hub__head h1
),
html.theme-os body :is(
  h1.mega,
  h1.ch2-title,
  h1.geo-title,
  h1.mt-title,
  h1.gs-title,
  h1.tt-title,
  h1.tg-title,
  h1.hs-title,
  h1.blog-hero-title,
  h1.ch-title,
  h1.art-title,
  .cases-hero h1,
  .solutions-hub__head h1
) {
  max-width: var(--ds-title-display-measure) !important;
  font-family: var(--ds-font-display) !important;
  font-size: var(--ds-title-display) !important;
  font-weight: 500 !important;
  line-height: var(--ds-title-display-lh) !important;
  letter-spacing: var(--ds-title-display-ls) !important;
  text-wrap: balance;
}

/* Legacy section-title families mapped to the canonical section primitive. */
html.theme-expressive body :is(
  .s-head h2,
  h2.geo-h2,
  h2.gs-h2,
  h2.mt-h2,
  h2.tt-h2,
  h2.tg-h2,
  h2.hs-h2,
  h2.glossary-h2,
  h2.gs-trust-h2,
  h2.ma-trust-h2,
  h2.tt-trust-h2,
  h2.tg-trust-h2,
  h2.hs-trust-h2,
  .geo-proof-h2,
  .cch-head h2,
  .cr-head h2,
  .ca-head h2,
  .case-related h2,
  .case-tldr-wrap h2,
  section.faq > .wrap > h2,
  .zr-section h2,
  .case-section-h
),
html.theme-os body :is(
  .s-head h2,
  h2.geo-h2,
  h2.gs-h2,
  h2.mt-h2,
  h2.tt-h2,
  h2.tg-h2,
  h2.hs-h2,
  h2.glossary-h2,
  h2.gs-trust-h2,
  h2.ma-trust-h2,
  h2.tt-trust-h2,
  h2.tg-trust-h2,
  h2.hs-trust-h2,
  .geo-proof-h2,
  .cch-head h2,
  .cr-head h2,
  .ca-head h2,
  .case-related h2,
  .case-tldr-wrap h2,
  section.faq > .wrap > h2,
  .zr-section h2,
  .case-section-h
) {
  max-width: var(--ds-title-section-measure) !important;
  font-family: var(--ds-font-display) !important;
  font-size: var(--ds-title-section) !important;
  font-weight: 500 !important;
  line-height: var(--ds-title-section-lh) !important;
  letter-spacing: var(--ds-title-section-ls) !important;
  text-wrap: balance;
}

/* Keep headings close to their explanatory copy; the old 64px header gap made
   otherwise compact pages feel oversized even when the type itself was sound. */
html.theme-expressive body .s-head,
html.theme-os body .s-head {
  margin-bottom: var(--ds-space-head) !important;
}

/* Supporting text gets a modest lift, not a second display scale. */
html.theme-expressive body :is(
  .hero-lede,
  .hero-intro-text,
  .section-lede,
  .gs-lede,
  .geo-lede,
  .mt-lede,
  .tt-lede,
  .tg-lede,
  .hs-lede,
  .blog-hero-lede
),
html.theme-os body :is(
  .hero-lede,
  .hero-intro-text,
  .section-lede,
  .gs-lede,
  .geo-lede,
  .mt-lede,
  .tt-lede,
  .tg-lede,
  .hs-lede,
  .blog-hero-lede
) {
  max-width: 68ch;
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.55;
}

@media (max-width: 700px) {
  html.theme-expressive:root,
  html.theme-os:root,
  html.theme-editorial:root {
    --ds-title-display: clamp(2.75rem, 13vw, 4.5rem);
    --ds-title-section: clamp(2.125rem, 9vw, 3.5rem);
    --ds-title-card: clamp(1.5rem, 6.5vw, 2.125rem);
    --ds-title-display-lh: 0.97;
    --ds-title-section-lh: 1;
    --ds-title-display-measure: 17ch;
    --ds-space-section: clamp(3.5rem, 13vw, 4.75rem);
    --ds-space-head: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-display-title,
  .ds-section-title,
  .ds-card-title { transition: none !important; }
}