/* Shopana — Typography
   Roboto is the primary UI family across the product (headings, body, prices,
   labels, nav). Arial remains documented as the legacy/system fallback.
   Roboto loads from Google Fonts. */

:root {
  /* Families */
  --font-ui:   "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-alt:  "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-bold:    700; /* @kind font */

  /* Type scale (px) — matches the Figma size set */
  --fs-10:  10px;   /* micro labels */
  --fs-11:  10.5px; /* nav labels (Roboto) */
  --fs-12:  12px;   /* captions, category labels, chips */
  --fs-13:  13px;   /* meta / location */
  --fs-14:  14px;   /* body, buttons */
  --fs-16:  16px;   /* emphasised body / price */
  --fs-18:  18px;   /* section titles */
  --fs-20:  20px;   /* screen titles */
  --fs-21:  21px;   /* shop name header */
  --fs-32:  32px;   /* display (credits count) */

  /* Line heights */
  --lh-tight:   1.15; /* @kind other */
  --lh-snug:    1.3; /* @kind other */
  --lh-normal:  1.5; /* @kind other */

  /* Letter spacing — the brand sets tight tracking on dense labels */
  --ls-tight:   -1px;     /* @kind other */
  --ls-normal:  0; /* @kind other */
  --ls-loose:   0.3px; /* @kind other */
}

/* ---- Type role helpers (optional utility classes) ---- */
.t-display   { font-family: var(--font-ui); font-weight: var(--fw-bold); font-size: var(--fs-32); line-height: var(--lh-tight); color: var(--text-primary); }
.t-title     { font-family: var(--font-ui); font-weight: var(--fw-bold); font-size: var(--fs-20); line-height: var(--lh-snug); color: var(--text-primary); }
.t-section   { font-family: var(--font-ui); font-weight: var(--fw-bold); font-size: var(--fs-18); line-height: var(--lh-snug); color: var(--text-primary); }
.t-price     { font-family: var(--font-ui); font-weight: var(--fw-bold); font-size: var(--fs-16); line-height: var(--lh-snug); color: var(--text-primary); }
.t-body      { font-family: var(--font-ui); font-weight: var(--fw-regular); font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--text-primary); }
.t-label     { font-family: var(--font-ui); font-weight: var(--fw-bold); font-size: var(--fs-12); line-height: var(--lh-snug); color: var(--text-primary); }
.t-meta      { font-family: var(--font-ui); font-weight: var(--fw-regular); font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--text-secondary); }
.t-nav       { font-family: var(--font-alt); font-weight: var(--fw-regular); font-size: var(--fs-11); line-height: var(--lh-snug); }