/* Binaura type scale — derived from the source file's observed sizes.
   Font sizes are literal px transcriptions (never snapped to a grid).
   Line-heights in the UI are almost always 100% (tight); body copy loosens. */
:root {
  --text-hero: 120px;      /* Red Hat Display Bold — paywall / splash hero */
  --text-display: 64px;    /* SF Pro Display Bold — big offer numbers ("30% Off") */
  --text-h1: 48px;         /* Black / Medium — screen hero */
  --text-h2: 32px;         /* section super-title */
  --text-h3: 24px;         /* card title / Bold */
  --text-title: 20px;      /* Button large, section headers ("Discover") */
  --text-lg: 18px;
  --text-body: 16px;       /* default body / Button */
  --text-sm: 14px;
  --text-caption: 12px;    /* labels, tags, chips */
  --text-micro: 10px;      /* dense meta */

  --leading-tight: 100%;
  --leading-snug: 120%;
  --leading-body: 140%;

  --tracking-label: 0.04em; /* uppercase-ish mood labels ("Focus", "Relax") */
  --tracking-normal: 0;
}

/* Text-style helper classes — apply the brand's typographic roles directly. */
.bnr-hero { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-hero); line-height: var(--leading-tight); color: var(--text-primary); }
.bnr-display { font-family: var(--font-ui); font-weight: var(--weight-bold); font-size: var(--text-display); line-height: var(--leading-tight); color: var(--text-primary); }
.bnr-h1 { font-family: var(--font-ui); font-weight: var(--weight-black); font-size: var(--text-h1); line-height: var(--leading-snug); color: var(--text-primary); }
.bnr-h2 { font-family: var(--font-ui); font-weight: var(--weight-bold); font-size: var(--text-h2); line-height: var(--leading-snug); color: var(--text-primary); }
.bnr-h3 { font-family: var(--font-ui); font-weight: var(--weight-bold); font-size: var(--text-h3); line-height: var(--leading-snug); color: var(--text-primary); }
.bnr-title { font-family: var(--font-ui); font-weight: var(--weight-bold); font-size: var(--text-title); line-height: var(--leading-tight); color: var(--text-primary); }
.bnr-body { font-family: var(--font-ui); font-weight: var(--weight-regular); font-size: var(--text-body); line-height: var(--leading-body); color: var(--text-secondary); }
.bnr-label { font-family: var(--font-label); font-weight: var(--weight-semibold); font-size: var(--text-caption); line-height: var(--leading-tight); letter-spacing: var(--tracking-label); color: var(--text-primary); }
.bnr-caption { font-family: var(--font-ui); font-weight: var(--weight-regular); font-size: var(--text-caption); line-height: var(--leading-snug); color: var(--text-tertiary); }