/* ============================================================
   brito.ai — Typography tokens
   Inter Tight (UI / display, tight tracking) · JetBrains Mono
   (data, code, timestamps, tracked uppercase labels).
   No serif — the editorial/cosmic feel comes from dark space,
   scale, and restraint.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-sans:    'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Inter Tight', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- Weights ---- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Type scale (px) ---- */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  15px;
  --text-lg:  18px;
  --text-xl:  22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-5xl: 64px;
  --text-6xl: 84px;
  --text-7xl: 112px;

  /* ---- Line heights ---- */
  --leading-tight:   1.04;
  --leading-snug:    1.16;
  --leading-normal:  1.4;
  --leading-relaxed: 1.6;

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.035em;
  --tracking-tight:   -0.02em;   /* display / headings */
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-label:   0.14em;    /* mono uppercase labels */
  --tracking-wider:   0.2em;

  /* =========================================================
     SEMANTIC TYPE ROLES
     ========================================================= */

  /* Display (Inter Tight, 600, tight) */
  --display-font:     var(--font-display);
  --display-weight:   var(--weight-semibold);
  --display-tracking: var(--tracking-tight);
  --display-leading:  var(--leading-tight);

  /* Headings */
  --heading-font:    var(--font-display);
  --heading-weight:  var(--weight-semibold);
  --heading-leading: var(--leading-snug);

  /* Body */
  --body-font:    var(--font-sans);
  --body-weight:  var(--weight-regular);
  --body-leading: var(--leading-relaxed);

  /* Eyebrow / label (mono, tracked caps) */
  --label-font:     var(--font-mono);
  --label-weight:   var(--weight-medium);
  --label-size:     var(--text-xs);
  --label-tracking: var(--tracking-label);
}