/* ── ritter & bader · Typography ─────────────────────────────────────
   One typeface — Open Sans — carries the whole system. Headings are
   Bold/SemiBold and set tight; body is Regular at a generous 150%
   line-height. Captions & CTAs are UPPERCASE with wide tracking.
   Sizes transcribed from the brand's spec sheet. */

:root {
  /* Weights */
  --fw-light:     300; /* @kind font */
  --fw-regular:   400; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* Type scale (px) */
  --fs-display:  48px;   /* H1 · Open Sans Bold — hero headline           */
  --fs-h1:       48px;
  --fs-h2:       34px;   /* Section titles                                */
  --fs-h3:       24px;   /* Sub-headings / card titles · SemiBold         */
  --fs-lead:     18px;   /* Intro / lead paragraph                        */
  --fs-body:     16px;   /* Body · Regular · 150%                         */
  --fs-small:    14px;   /* Small text, form fields, nav                  */
  --fs-caption:  13px;   /* Caption · SemiBold · UPPERCASE · +2px         */
  --fs-micro:    11px;   /* Fine print                                    */

  /* Line-heights */
  --lh-tight:    1.0;    /* @kind font */
  --lh-heading:  1.15;   /* @kind font */
  --lh-body:     1.5;    /* @kind font */

  /* Letter-spacing */
  --ls-caption:  2px;    /* Eyebrow / caption uppercase                   */
  --ls-cta:      1.5px;  /* Buttons, #KEEPCOOL, product labels            */
  --ls-badge:    1px;    /* Stand / Datum badges                          */

  /* Composite text roles */
  --text-display: var(--fw-bold) var(--fs-display)/var(--lh-heading) var(--font-sans);
  --text-h2:      var(--fw-bold) var(--fs-h2)/var(--lh-heading) var(--font-sans);
  --text-h3:      var(--fw-semibold) var(--fs-h3)/var(--lh-tight) var(--font-sans);
  --text-body-r:  var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
}