/* ============================================================
   Smarterix — Typography tokens
   Quicksand for display voice (echoes the airy, wide-tracked
   wordmark). Montserrat for body & UI.
   ============================================================ */
:root {
  /* --- Families ----------------------------------------------------- */
  --font-display: 'Quicksand', 'Trebuchet MS', sans-serif;
  --font-body:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* --- 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 (1.250 major-third, 16px base) ------------------- */
  --text-2xs: 0.6875rem;  /* 11px — micro labels                       */
  --text-xs:  0.75rem;    /* 12px                                      */
  --text-sm:  0.875rem;   /* 14px                                      */
  --text-base:1rem;       /* 16px — body                               */
  --text-md:  1.125rem;   /* 18px — lead body                          */
  --text-lg:  1.375rem;   /* 22px                                      */
  --text-xl:  1.75rem;    /* 28px                                      */
  --text-2xl: 2.25rem;    /* 36px                                      */
  --text-3xl: 3rem;       /* 48px                                      */
  --text-4xl: 4rem;       /* 64px — hero                               */
  --text-5xl: 5.25rem;    /* 84px — display hero                       */

  /* --- Line heights ------------------------------------------------- */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  /* --- Letter spacing ----------------------------------------------- */
  --tracking-wordmark: 0.34em;  /* the airy logo spacing                */
  --tracking-wide:     0.12em;  /* eyebrows / overlines                 */
  --tracking-label:    0.06em;
  --tracking-normal:   0;
  --tracking-tight:   -0.01em;
}

/* --- Heading defaults: Quicksand, light & wide ---------------------- */
.sx-display {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.sx-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-primary);
}