/* ===========================================================================
   roastynote — Typography tokens
   ---------------------------------------------------------------------------
   Grotesk workhorse + Newsreader editorial accent + mono for metadata.
   Display sizes are large and quiet; tracking opens up on small uppercase
   labels (the architectural "spec label" motif). Sizes in px for portability.
   =========================================================================== */

:root {
  /* ---- Families -------------------------------------------------------- */
  --font-grotesk:   "Hanken Grotesk", "Europa-Grotesk", system-ui, sans-serif;
  --font-editorial: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono:      "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Semantic family aliases */
  --font-display:   var(--font-grotesk);
  --font-body:      var(--font-grotesk);
  --font-ui:        var(--font-grotesk);
  --font-quote:     var(--font-editorial);
  --font-label:     var(--font-mono);

  /* ---- Type scale (px) ------------------------------------------------- */
  --text-11:  11px;   /* micro labels */
  --text-12:  12px;
  --text-14:  14px;
  --text-16:  16px;   /* body base */
  --text-20:  20px;
  --text-24:  24px;
  --text-32:  32px;
  --text-40:  40px;
  --text-48:  48px;
  --text-64:  64px;
  --text-80:  80px;
  --text-112: 112px;  /* hero display */

  /* ---- Weights --------------------------------------------------------- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* ---- Line heights ---------------------------------------------------- */
  --leading-none:    1;
  --leading-display: 1.02;   /* large headlines */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-body:    1.55;   /* paragraphs */
  --leading-relaxed: 1.7;

  /* ---- Tracking -------------------------------------------------------- */
  --tracking-tight:  -0.02em;  /* display */
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-label:  0.16em;   /* uppercase spec labels */

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

  /* Display — grotesk, tight tracking, near-solid leading */
  --type-display-size:    var(--text-112);
  --type-display-weight:  var(--weight-medium);
  --type-display-leading: var(--leading-display);
  --type-display-track:   var(--tracking-tight);

  /* Headings */
  --type-h1-size: var(--text-64);
  --type-h2-size: var(--text-48);
  --type-h3-size: var(--text-32);
  --type-h4-size: var(--text-24);

  /* Body */
  --type-body-size:    var(--text-16);
  --type-body-leading: var(--leading-body);
  --type-lead-size:    var(--text-20);

  /* Editorial quote — Newsreader italic */
  --type-quote-size:    var(--text-40);
  --type-quote-weight:  var(--weight-regular);
  --type-quote-leading: var(--leading-snug);

  /* Spec label — mono, uppercase, tracked */
  --type-label-size:   var(--text-12);
  --type-label-weight: var(--weight-medium);
  --type-label-track:  var(--tracking-label);
}