/* ============================================================
   JUICE — Typography tokens
   Display = Space Grotesk (italic / uppercase = the JUICE voice)
   Body/UI = Xenon Nue
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-display: "Space Grotesk", "Arial Narrow", system-ui, sans-serif;  /* stand-in for Neue Machina */
  --font-body:    "Xenon Nue", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Space Grotesk", ui-monospace, monospace;

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

  /* ---- The JUICE display voice (apply together) ---- */
  --display-style: italic;        /* @kind other */
  --display-transform: uppercase; /* @kind other */
  --display-weight: 700;          /* @kind font */
  --display-tracking: -0.02em;    /* @kind other */
  --display-leading: 0.94;        /* @kind other */

  /* ---- Fluid type scale ---- */
  --fs-hero:   clamp(46px, 7.4vw, 104px);  /* @kind font */
  --fs-h2:     clamp(34px, 4.6vw, 64px);   /* @kind font */
  --fs-h3:     clamp(24px, 2.4vw, 34px);   /* @kind font */
  --fs-card-h: 21px;                        /* @kind font */
  --fs-lead:   clamp(16px, 1.6vw, 19px);   /* @kind font */
  --fs-body:   16px;                        /* @kind font */
  --fs-sm:     14px;                        /* @kind font */
  --fs-kicker: 12px;                        /* @kind font */

  /* ---- Line heights ---- */
  --lh-display: 0.94;   /* @kind other */
  --lh-tight:   1.1;    /* @kind other */
  --lh-body:    1.6;    /* @kind other */

  /* ---- Letter spacing ---- */
  --ls-display: -0.02em;  /* @kind other */
  --ls-tight:   -0.01em;  /* @kind other */
  --ls-kicker:  0.18em;   /* @kind other */
  --ls-button:  0.02em;   /* @kind other */

  /* ---- Semantic aliases ---- */
  --text-display: var(--font-display);
  --text-ui: var(--font-body);
}