/* ============================================================
   GroupApp 2.0 — Typography tokens
   Inter drives the product UI (14px is the workhorse size).
   DM Sans is used for larger display / marketing headings.
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-alt: "Plus Jakarta Sans", "Inter", sans-serif; /* occasional marketing headings */

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

  /* ---- Sizes (px, exact from source) ---- */
  --text-2xs: 10px;
  --text-xs: 12px;
  --text-sm-alt: 13px;
  --text-sm: 14px;   /* default body / UI */
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 36px;
  --text-5xl: 48px;
  --text-6xl: 60px;
  --text-hero: 80px;

  /* ---- Line heights ---- */
  --lh-tight: 100%; /* @kind font */
  --lh-snug: 1.2; /* @kind font */
  --lh-normal: 1.4; /* @kind font */
  --lh-relaxed: 1.5; /* @kind font */

  /* ---- Letter spacing ---- */
  --tracking-tight: -0.02em; /* @kind font */
  --tracking-normal: 0; /* @kind font */
}

/* Convenience text classes — semantic specimens */
.gp-display-1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-6xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.gp-display-2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-5xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.gp-heading-1 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-3xl); line-height: var(--lh-snug); color: var(--text-primary); }
.gp-heading-2 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-2xl); line-height: var(--lh-snug); color: var(--text-primary); }
.gp-title     { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--text-base); line-height: var(--lh-snug); color: var(--text-primary); }
.gp-body      { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-primary); }
.gp-body-strong { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-primary); }
.gp-label     { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--text-sm); line-height: var(--lh-tight); color: var(--text-primary); }
.gp-caption   { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--text-xs); line-height: var(--lh-tight); color: var(--text-muted); }
.gp-overline  { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--text-2xs); line-height: var(--lh-tight); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }