/* ============================================================
   OPALUS — Typography tokens
   Display / headings: Parkinsans (geometric, friendly-premium)
   UI / body:          Lexend Deca (calm, legible, fintech-grade)
   Alt / utility:      Archivo (links, fine print)
   All three are on Google Fonts — see @font-face note in readme.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@300;400;500;600;700;800&family=Lexend+Deca:wght@300;400;500;600;700&family=Archivo:wght@400;500;600;700&display=swap');

:root {
  /* families */
  --font-display: 'Parkinsans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-alt:     'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* weights */
  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */

  /* type scale (px) — tuned to the product UI */
  --fs-display: 64px;  /* marketing hero */
  --fs-h1:      40px;
  --fs-h2:      30px;
  --fs-h3:      24px;
  --fs-h4:      20px;
  --fs-lg:      18px;
  --fs-body:    16px;
  --fs-sm:      14px;  /* dominant UI size */
  --fs-xs:      13px;
  --fs-2xs:     12px;
  --fs-micro:   11px;  /* eyebrow / overline */

  /* line-heights */
  --lh-tight:   1.1;  /* @kind other */
  --lh-snug:    1.25; /* @kind other */
  --lh-normal:  1.5;  /* @kind other */
  --lh-relaxed: 1.7;  /* @kind other */

  /* letter-spacing */
  --ls-tight:   -0.02em; /* @kind other */
  --ls-normal:  0;       /* @kind other */
  --ls-wide:    0.04em;  /* @kind other */
  --ls-eyebrow: 0.14em;  /* @kind other */
}