/*
  Typography — Website Refresh 2026 1e (Figma), Component page,
  "Typography" frame (Heading Text, Body Text, Paragraph, List Item,
  Unordered List).
  Source: https://www.figma.com/design/2W6CyIAW3cKDEqdv26CeE2/Website-Refresh-2026-1e?node-id=20-25

  Requires tokens.css to be loaded first (spacing + colour custom
  properties).

  Three tiers: Desktop (base rules below, unconditional), Tablet
  (@media max-width: 1200px) and Mobile (@media max-width: 768px).
  Tablet sizes are pulled from Figma's Tablet/Header and Tablet/Body
  styles (node 20:52, added 2026-09) — same source of truth as
  Desktop/Mobile, not a guess.
*/

:root {
  --font-heading: "Space Grotesk", sans-serif;
  --font-body: "Atkinson Hyperlegible Next", sans-serif;
}

/* ---------- Heading Text ---------- */
/* Space Grotesk, Bold. Bottom margin is a fixed --space-16 across
   every size (confirmed against both the largest and smallest
   heading instances in Figma, so treated as a constant, not a
   per-size value). */

.rs-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-neutral-900);
  margin: 0 0 var(--space-16) 0;
}

.rs-heading--hero {
  font-size: 72px;
  line-height: 1.05;
  letter-spacing: -2px;
}

h1.rs-heading.rs-heading,
h2.rs-heading.rs-heading,
h3.rs-heading.rs-heading {
  font-weight: 700;
  margin: 0 0 var(--space-16) 0;
}

h1.rs-heading--h1.rs-heading--h1,
h2.rs-heading--h1.rs-heading--h1,
h3.rs-heading--h1.rs-heading--h1 {
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -1px;
}

.rs-heading--h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -1px;
}

.rs-heading--h3 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.rs-heading--h4 {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.rs-heading--h5 {
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.25px;
}

/* ---------- Body Text ---------- */
/* Atkinson Hyperlegible Next, Regular. Bottom margin scales with
   size: XLarge/Large/Default use --space-20, Small/XSmall use
   --space-16 (confirmed per-size against Figma, unlike headings).
   Mobile sizes are set in the shared media query below the Heading
   Text rules — line-height and margin-bottom stay the same as
   Desktop for each size, only font-size changes. */

.rs-body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-neutral-900);
  margin: 0 0 var(--space-20) 0;
}

.rs-body--xlarge {
  font-size: 26px;
  line-height: 1.4;
}

.rs-body--large {
  font-size: 22px;
  line-height: 1.4;
}

.rs-body--default {
  font-size: 20px;
  line-height: 1.4;
}

.rs-body--small {
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: var(--space-16);
}

.rs-body--xsmall {
  font-size: 14px;
  line-height: 1.3;
  margin-bottom: var(--space-16);
}

/* ---------- Paragraph ---------- */
/* Same visual spec as Body/Default — kept as its own class (rather
   than folded into .rs-body--default) so markup can target <p>
   elements semantically, matching Figma's separate "Paragraph"
   component. Paragraph is now a Desktop/Mobile variant component
   too, same as Body Text: Mobile drops to Mobile/Body/Default
   (16px), same line-height/margin — set in the shared media query
   directly below (it has to come after every base rule it overrides,
   Heading/Body/Paragraph alike, or the base rule's equal-specificity
   declaration wins the cascade regardless of viewport width — that
   was the actual bug when this didn't visibly resize). */

.rs-paragraph {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: var(--color-neutral-900);
  margin: 0 0 var(--space-20) 0;
}

/* Pulled from Figma's actual Tablet/Header and Tablet/Body styles
   (node 20:52, "Typography" frame, 2026-09) — replaces an earlier
   first-pass guess that was noticeably off for Hero/H1 in particular
   (guessed 56/40, real values are 36/32). Letter-spacing values are
   the resolved absolute px Figma reports (not re-derived from a
   percentage), matching how Desktop/Mobile are already recorded
   here. */
@media (max-width: 1200px) {
  .rs-heading--hero {
    font-size: 36px;
    line-height: 1.05;
    letter-spacing: -0.72px;
  }

  /* Repeated class — see the base-tier rule above for why. */
h1.rs-heading--h1.rs-heading--h1,
h2.rs-heading--h1.rs-heading--h1,
h3.rs-heading--h1.rs-heading--h1 {
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.25px;
}

  .rs-heading--h2 {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -1px;
  }

  .rs-heading--h3 {
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.5px;
  }

  .rs-heading--h4 {
    font-size: 21px;
    line-height: 1.2;
    letter-spacing: -0.5px;
  }

  .rs-heading--h5 {
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: -0.25px;
  }

  .rs-body--xlarge {
    font-size: 24px;
  }

  .rs-body--large {
    font-size: 20px;
  }

  .rs-body--default {
    font-size: 18px;
  }

  .rs-body--small {
    font-size: 15px;
  }

  .rs-body--xsmall {
    font-size: 13px;
  }

  .rs-paragraph {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .rs-heading--hero {
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -2px;
  }

h1.rs-heading--h1.rs-heading--h1,
h2.rs-heading--h1.rs-heading--h1,
h3.rs-heading--h1.rs-heading--h1 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.25px;

  .rs-heading--h2 {
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -1px;
  }

  .rs-heading--h3 {
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.5px;
  }

  .rs-heading--h4 {
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.5px;
  }

  .rs-heading--h5 {
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.25px;
  }

  /* Recalibrated in Figma (2026-09): XLarge/Large/Default all step
     down one size from where they first shipped here (24/20/18) to
     20/18/16 — Small/XSmall are unchanged. This was a deliberate
     revision made directly against the Mobile/Body text styles
     themselves, not a guess never checked against a real mobile
     screen (the original values were exactly that, by your own
     admission) — Paragraph/List Item/Icon List Item all reference
     Mobile/Body/Default too, so their mobile sizes move with it
     below rather than needing their own separate updates. */
  .rs-body--xlarge {
    font-size: 20px;
  }

  .rs-body--large {
    font-size: 18px;
  }

  .rs-body--default {
    font-size: 16px;
  }

  .rs-body--small {
    font-size: 14px;
  }

  .rs-body--xsmall {
    font-size: 12px;
  }

  .rs-paragraph {
    font-size: 16px;
  }
}

/* ---------- List Item / Unordered List ---------- */
/* Figma's List Item is a purple square bullet (no corner radius) +
   Body/Default text, laid out as a flex row. Built here on <ul>/<li>
   with a ::before bullet instead of Figma's extra bullet <div>,
   since native list markup is more semantic for the legacy HTML
   target — visual output is the same.

   List Item is now a Desktop/Mobile variant component in Figma: the
   Mobile variant shrinks the bullet (12px -> 8px), tightens the
   bullet-to-text gap (--space-16 -> --space-12), and switches the
   text to Mobile/Body/Default (16px). The bullet's mobile top offset
   (9px) is a literal value in Figma, not tied to a --space-* token,
   so it's kept literal here too rather than forced onto the scale.
   Unordered List's own gap/padding stay the same at both sizes. */

.rs-unordered-list {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-24) var(--space-24) var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.rs-list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: var(--color-neutral-900);
}

.rs-list-item::before {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: var(--space-8);
  background-color: var(--color-purple-700);
}

@media (max-width: 1200px) {
  .rs-list-item {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .rs-list-item {
    gap: var(--space-12);
    font-size: 16px;
  }

  .rs-list-item::before {
    width: 8px;
    height: 8px;
    margin-top: 9px;
  }
}

/* ---------- Icon List / Icon List Item ---------- */
/* A light circular badge (Brand/Neutral/200) containing a Lucide
   icon glyph (currently "check" — see css/icons.css for how the
   sprite works), next to Body/Default text. The badge and its icon
   are separate elements (unlike List Item's single-colour bullet)
   because the icon needs its own colour independent of the badge
   background. Markup: an <svg class="rs-icon rs-icon-list-item__icon">
   with a <use> pointing at the sprite. */

.rs-icon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.rs-icon-list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  max-width: 880px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: var(--color-neutral-900);
}

.rs-icon-list-item__badge {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background-color: var(--color-neutral-200);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rs-icon-list-item__icon {
  width: 16px;
  height: 16px;
  color: var(--color-neutral-900);
  /* stroke-width left at the .rs-icon default (2px) — flag if this
     should be tuned to match the original Figma checkmark's
     relatively bolder weight. */
}

@media (max-width: 1200px) {
  .rs-icon-list-item {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .rs-icon-list-item {
    font-size: 16px;
  }

  .rs-icon-list-item__badge {
    width: 16px;
    height: 16px;
    margin-top: var(--space-4);
  }

  .rs-icon-list-item__icon {
    width: 12.8px;
    height: 12.8px;
  }
}

/* ---------- Text Link ---------- */
/* Moved into the Typography frame from the Button frame in Figma —
   confirmed as its own component (not a Button variant) back when
   Button was first reviewed. Atkinson Hyperlegible Next, underlined.
   No Mobile screen variants exist for this one in Figma, so it's
   the same at every viewport width.

   Colour (Purple/Dark) and Size (Default/Small) are independent
   modifier classes here, combinable with the base class and the
   optional icon — Figma only shows specific example instances (e.g.
   no Dark + Icon, no Right Icon + Small), but the underlying values
   compose cleanly, so the CSS doesn't hard-restrict combinations
   Figma didn't happen to instantiate. */

.rs-text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  text-decoration: underline;
  text-decoration-skip-ink: auto;
  white-space: nowrap;
  color: var(--color-purple-700);
}

.rs-text-link:hover {
  color: var(--color-purple-900);
}

.rs-text-link--dark {
  color: var(--color-transparency-dark-80);
}

.rs-text-link--dark:hover {
  color: var(--color-neutral-900);
}

.rs-text-link--small {
  gap: 3px;
  font-size: 14px;
}

.rs-text-link__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  /* colour comes from currentColor via .rs-icon in icons.css, so it
     automatically tracks the link's colour/hover state — no
     separate hover rule needed here. */
}

.rs-text-link--small .rs-text-link__icon {
  width: 16px;
  height: 16px;
}