/* ds-pages.css — per-page, per-design-system refinements.
 *
 * The token cascade in tokens.css / landing.css does the heavy lifting: switching
 * data-ds re-colours every page automatically. This file is intentionally THIN —
 * it only adds page-specific polish where a particular design system clearly
 * benefits from a touch beyond the token swap.
 *
 * Conventions:
 *   - Body carries a stable page class: page-home, page-login, page-signup,
 *     page-faq, page-sponsorship, page-clinician, page-safety, page-blog,
 *     page-article, page-legal.
 *   - Selectors are scoped:  [data-ds="<key>"] body.page-<name> .target { … }
 *   - Organised by design system, then by page.
 *   - let-it-go (the default :root design system) needs no overrides here —
 *     it is the baseline the pages were authored against.
 */

/* ============================================================================
   MIDNIGHT — dark, cinematic. Deepen the homepage hero, dim long-form chrome,
   give auth cards more contrast.
   ============================================================================ */

/* Homepage hero: push the cinematic feel a little further. */
[data-ds="midnight"] body.page-home .hero h1 {
  letter-spacing: -0.015em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}
[data-ds="midnight"] body.page-home .hero-sub {
  color: rgb(from var(--gs-cream, #f4efe6) r g b / 0.86);
}
[data-ds="midnight"] body.page-home .hero-scrim {
  background: linear-gradient(
    180deg,
    rgba(6, 10, 20, 0) 0%,
    rgba(6, 10, 20, 0.42) 62%,
    rgba(6, 10, 20, 0.78) 100%
  );
}

/* Auth cards: lift the form panel off a dark background. */
[data-ds="midnight"] body.page-login .auth-form-wrap,
[data-ds="midnight"] body.page-signup .auth-form-wrap {
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
}

/* Long-form: calmer measure, slightly dimmer body text for night reading. */
[data-ds="midnight"] body.page-legal .legal-content,
[data-ds="midnight"] body.page-article .legal-content,
[data-ds="midnight"] body.page-faq main {
  max-width: 70ch;
}

/* ============================================================================
   EDITORIAL — typographic, magazine-like. Tighten headings, widen long-form
   measure for a comfortable reading column.
   ============================================================================ */

[data-ds="editorial"] body.page-home .hero h1 {
  letter-spacing: -0.02em;
  line-height: 1.02;
}
[data-ds="editorial"] body.page-legal .legal-content,
[data-ds="editorial"] body.page-article .legal-content {
  max-width: 68ch;
  font-size: 1.05rem;
  line-height: 1.7;
}
[data-ds="editorial"] body.page-article .legal-content h1,
[data-ds="editorial"] body.page-article .legal-content h2 {
  letter-spacing: -0.01em;
}

/* ============================================================================
   SOFT-MINIMAL — airy, low-contrast. More whitespace, lighter shadows.
   ============================================================================ */

[data-ds="soft-minimal"] body.page-login .auth-form-wrap,
[data-ds="soft-minimal"] body.page-signup .auth-form-wrap {
  box-shadow: 0 8px 30px rgba(20, 35, 59, 0.06);
}
[data-ds="soft-minimal"] body.page-legal .legal-content,
[data-ds="soft-minimal"] body.page-article .legal-content,
[data-ds="soft-minimal"] body.page-faq main {
  max-width: 66ch;
  line-height: 1.75;
}

/* ============================================================================
   CLINICAL — precise, trustworthy, slightly denser. Sharpen the auth card and
   keep long-form text crisp and readable.
   ============================================================================ */

[data-ds="clinical"] body.page-login .auth-form-wrap,
[data-ds="clinical"] body.page-signup .auth-form-wrap {
  border: 1px solid rgb(from var(--gs-ink, #14233b) r g b / 0.08);
  box-shadow: 0 10px 36px rgba(20, 35, 59, 0.1);
}
[data-ds="clinical"] body.page-legal .legal-content,
[data-ds="clinical"] body.page-article .legal-content {
  max-width: 72ch;
  line-height: 1.65;
}

/* ============================================================================
   WARM-ORGANIC — warm, rounded, soft. Soften the hero and round long-form
   media so the warmth reads through.
   ============================================================================ */

[data-ds="warm-organic"] body.page-home .hero h1 {
  letter-spacing: -0.005em;
}
[data-ds="warm-organic"] body.page-article .legal-content img,
[data-ds="warm-organic"] body.page-legal .legal-content img {
  border-radius: 18px;
}
[data-ds="warm-organic"] body.page-legal .legal-content,
[data-ds="warm-organic"] body.page-article .legal-content,
[data-ds="warm-organic"] body.page-faq main {
  max-width: 68ch;
  line-height: 1.72;
}

/* ============================================================================
   PUST — breathing, airy wellness (the marketing-site default). White pill
   cards on pale sky, soft diffuse shadows, Sora display. The token cascade
   recolors everything; this adds the pill-card character to shared chrome.
   ============================================================================ */

/* Sora ships only in 600/700 — keep display text at a loaded weight. */
[data-ds="pust"] h1,
[data-ds="pust"] h2,
[data-ds="pust"] h3,
[data-ds="pust"] .brand,
[data-ds="pust"] .foot-brand {
  font-weight: 700;
}

/* Auth cards: float like the concept's pill cards. */
[data-ds="pust"] body.page-login .auth-form-wrap,
[data-ds="pust"] body.page-signup .auth-form-wrap {
  border-radius: var(--gs-radius-2xl, 32px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 24px 55px -35px rgba(38, 50, 75, 0.4);
  /* Inset the form so its content doesn't touch the card border. */
  padding: clamp(var(--gs-space-6, 24px), 4vw, var(--gs-space-8, 40px));
}

/* Blog cards + article covers: extra-round, soft-lifted. */
[data-ds="pust"] body.page-blog .card {
  border-radius: var(--gs-radius-xl, 28px);
  border: 1px solid var(--gs-border);
  box-shadow: 0 18px 40px -28px rgba(38, 50, 75, 0.35);
}
[data-ds="pust"] body.page-blog .card img,
[data-ds="pust"] body.page-article .legal-content img {
  border-radius: var(--gs-radius-md, 20px);
}

/* Long-form: relaxed, airy reading column. */
[data-ds="pust"] body.page-legal .legal-content,
[data-ds="pust"] body.page-article .legal-content,
[data-ds="pust"] body.page-faq main {
  max-width: 66ch;
  line-height: 1.75;
}