/* ============================================================
   RARE GENETICS — TYPOGRAPHY TOKENS
   One typeface: Inter. Tight tracking on display sizes.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);

  /* —— Weights —— */
  --fw-regular: 400;   /* @kind font */
  --fw-medium: 500;    /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold: 700;      /* @kind font */
  --fw-black: 800;     /* @kind font */

  /* —— Type scale (px, from the design) —— */
  --fs-display: 36px;   /* hero / section heads — "That Five-Star Experience." */
  --fs-h2: 27px;        /* secondary headings */
  --fs-h3: 18px;        /* "MAKE-IT-RIGHT GUARANTEE" / product titles */
  --fs-body: 16.2px;    /* buttons, emphasis body */
  --fs-base: 14.4px;    /* default body / nav / pricing */
  --fs-sm: 13px;        /* meta labels: "INDICA • THCA", "In stock" */
  --fs-xs: 9px;         /* fine print / legal */

  /* —— Line heights —— */
  --lh-display: 1.1;    /* @kind font */
  --lh-tight: 1.2;      /* @kind font */
  --lh-snug: 1.3;       /* @kind font */
  --lh-body: 1.45;      /* @kind font */

  /* —— Letter spacing (negative tracking is a brand signature) —— */
  --ls-display: -1.08px;   /* @kind font */
  --ls-h3: -0.36px;        /* @kind font */
  --ls-button: -0.324px;   /* @kind font */
  --ls-tight: -0.2px;      /* @kind font */
  --ls-normal: 0;          /* @kind font */
  --ls-caps: 0.04em;       /* @kind font */
}

/* —— Reusable type classes (optional sugar) —— */
.rg-display {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text-primary);
}
.rg-h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: -0.81px;
}
.rg-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-h3);
}
.rg-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}
.rg-meta {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  line-height: 1.3;
  color: var(--text-muted);
}
.rg-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}