/* ============================================================
   EBANX Hackathon 2026 — Typography tokens
   Display / titles  → Topol (bold, geometric, techno).
   Body / UI         → Inter (variable).
   Code / mono       → ui-monospace stack (vibe-coding accent).
   ============================================================ */

:root {
  /* ---- Families ---------------------------------------- */
  --font-display: "Topol", "Inter", system-ui, sans-serif;
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Weights (Inter range) --------------------------- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;
  /* Topol ships a single weight */
  --weight-display:  700;

  /* ---- Type scale (1.250 major-third, 16px base) -------- */
  --text-2xs:  0.694rem;   /* 11.1 */
  --text-xs:   0.8rem;     /* 12.8 */
  --text-sm:   0.875rem;   /* 14   */
  --text-base: 1rem;       /* 16   */
  --text-md:   1.125rem;   /* 18   */
  --text-lg:   1.25rem;    /* 20   */
  --text-xl:   1.563rem;   /* 25   */
  --text-2xl:  1.953rem;   /* 31.25 */
  --text-3xl:  2.441rem;   /* 39   */
  --text-4xl:  3.052rem;   /* 48.8 */
  --text-5xl:  3.815rem;   /* 61   */
  --text-6xl:  4.768rem;   /* 76.3 */
  --text-7xl:  5.96rem;    /* 95.4 */

  /* ---- Line heights ------------------------------------ */
  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---------------------------------- */
  /* Topol is geometric & techy — display sits tight, all-caps
     labels open up. */
  --tracking-display:  -0.02em;
  --tracking-tight:    -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-caps:     0.12em;   /* the KV's "VIBE CODING" lockup */

  /* ---- Semantic roles ---------------------------------- */
  --role-display-font:    var(--font-display);
  --role-display-weight:  var(--weight-display);
  --role-display-spacing: var(--tracking-display);

  --role-heading-font:    var(--font-display);
  --role-heading-weight:  var(--weight-display);

  --role-body-font:       var(--font-sans);
  --role-body-weight:     var(--weight-regular);
  --role-body-leading:    var(--leading-normal);

  --role-label-font:      var(--font-sans);
  --role-label-weight:    var(--weight-semibold);

  --role-eyebrow-font:    var(--font-mono);
  --role-eyebrow-spacing: var(--tracking-caps);

  --role-code-font:       var(--font-mono);
}