/* ===========================================================================
   ReachStream Help Center — design tokens
   Extracted verbatim from Figma "Help Center RS 2026" (file Q6C3E4KVkhmMrbbexTzMYh)
   via the published variable definitions. These are the designer's values,
   not sampled approximations.

   NOTE: this palette differs from the one currently live. The site today uses
   navy #093D54 / teal #077A84 (sampled from the logo). The Figma system uses
   dark-teal #003443 / teal-blue #0F658A. Adopting this file is a deliberate
   rebrand of the support site, not a tweak.
   =========================================================================== */
:root {
  /* ---- colour ---------------------------------------------------------- */
  --rs-brand-dark-teal: #003443;  /* brand/dark-teal, text/primary */
  --rs-brand-teal-blue: #0F658A;  /* brand/teal-blue, text/link   */

  --rs-text-primary:    #003443;
  --rs-text-secondary:  #4D6A73;
  --rs-text-muted:      #7F959C;
  --rs-text-link:       #0F658A;
  --rs-text-inverse:    #FFFFFF;

  --rs-bg-white:        #FFFFFF;
  --rs-bg-page:         #F9F9FB;
  --rs-bg-teal-tint:    #EAF4F8;

  --rs-stroke-default:  #E5EBEE;
  --rs-stroke-strong:   #D2DCE0;

  --rs-accent-blue:     #B4C5FC;
  --rs-accent-green:    #D5F8DE;
  --rs-accent-primrose: #F9EF86;

  /* ---- type families ---------------------------------------------------
     Wix Madefor Display / Text — matches reachstream.com and the brand kit. */
  --rs-font-display: 'Wix Madefor Display', 'Segoe UI', system-ui, sans-serif;
  --rs-font-text:    'Wix Madefor Text', 'Segoe UI', system-ui, sans-serif;
}

/* ---- type scale --------------------------------------------------------
   Each class reproduces one Figma text style exactly (size / line-height /
   weight / letter-spacing). Letter-spacing values in Figma are px.          */

.rs-display-xl {
  font-family: var(--rs-font-display);
  font-weight: 800; font-size: 64px; line-height: 68px; letter-spacing: -3px;
}
.rs-h2 {
  font-family: var(--rs-font-display);
  font-weight: 700; font-size: 32px; line-height: 40px; letter-spacing: -1.5px;
}
.rs-h3 {
  font-family: var(--rs-font-display);
  font-weight: 700; font-size: 24px; line-height: 32px; letter-spacing: -1px;
}
.rs-h4 {
  font-family: var(--rs-font-display);
  font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: -0.5px;
}

.rs-body-l   { font-family: var(--rs-font-text); font-weight: 400; font-size: 18px; line-height: 28px; }
.rs-body-m   { font-family: var(--rs-font-text); font-weight: 400; font-size: 16px; line-height: 26px; }
.rs-body-s   { font-family: var(--rs-font-text); font-weight: 400; font-size: 14px; line-height: 22px; }
.rs-title-s  { font-family: var(--rs-font-text); font-weight: 600; font-size: 15px; line-height: 22px; }
.rs-label-m  { font-family: var(--rs-font-text); font-weight: 500; font-size: 15px; line-height: 20px; }
.rs-label-s  { font-family: var(--rs-font-text); font-weight: 500; font-size: 13px; line-height: 18px; }
.rs-caption  { font-family: var(--rs-font-text); font-weight: 400; font-size: 13px; line-height: 18px; }
.rs-overline {
  font-family: var(--rs-font-text); font-weight: 700; font-size: 12px;
  line-height: 16px; letter-spacing: 12px; text-transform: uppercase;
}

/* Display/XL is 64px, which overflows small screens. The design is a 1440px
   desktop frame with no mobile artboards, so this step-down is my decision,
   not the designer's — confirm the intended mobile scale. */
@media (max-width: 760px) {
  .rs-display-xl { font-size: 40px; line-height: 44px; letter-spacing: -1.5px; }
  .rs-h2 { font-size: 26px; line-height: 34px; letter-spacing: -1px; }
  .rs-overline { letter-spacing: 6px; }
}