/* ============================================================
   PSYONARA — Typography tokens
   Type as structural data. Clash Display headlines, IBM Plex Sans body,
   JetBrains Mono labels/readouts. Headlines are UPPERCASE + tight.
   Labels are UPPERCASE + tracked-out (serial-number feel).
   ============================================================ */

:root {
  /* ── Families ────────────────────────────────────────────── */
  --font-headline: 'Clash Display', sans-serif;
  --font-display: 'Clash Display', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-label: 'JetBrains Mono', monospace;
  --font-mono: 'JetBrains Mono', monospace;

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

  /* ── Type ramp (role → size/line/tracking) ───────────────── */
  /* headline-lg  — hero display */
  --type-headline-lg-size: 48px;
  --type-headline-lg-line: 1.1;
  --type-headline-lg-track: -0.04em;
  --type-headline-lg-weight: 700;

  /* headline-lg-mobile */
  --type-headline-lg-mobile-size: 32px;

  /* headline-md — section titles */
  --type-headline-md-size: 24px;
  --type-headline-md-line: 1.2;
  --type-headline-md-track: -0.02em;
  --type-headline-md-weight: 600;

  /* body-md — paragraph copy */
  --type-body-md-size: 16px;
  --type-body-md-line: 1.6;
  --type-body-md-track: 0em;
  --type-body-md-weight: 400;

  /* label-sm — uppercase mono labels / metadata */
  --type-label-sm-size: 12px;
  --type-label-sm-line: 1.4;
  --type-label-sm-track: 0.08em;
  --type-label-sm-weight: 500;

  /* data-display — numeric readouts, prices, timers */
  --type-data-size: 14px;
  --type-data-line: 1.2;
  --type-data-track: 0.02em;
  --type-data-weight: 700;
}

/* ── Optional ready-made type classes (handy in specimen cards) ── */
.psy-headline-lg {
  font-family: var(--font-headline);
  font-weight: var(--type-headline-lg-weight);
  font-size: var(--type-headline-lg-size);
  line-height: var(--type-headline-lg-line);
  letter-spacing: var(--type-headline-lg-track);
  text-transform: uppercase;
}
.psy-headline-md {
  font-family: var(--font-headline);
  font-weight: var(--type-headline-md-weight);
  font-size: var(--type-headline-md-size);
  line-height: var(--type-headline-md-line);
  letter-spacing: var(--type-headline-md-track);
  text-transform: uppercase;
}
.psy-body {
  font-family: var(--font-body);
  font-weight: var(--type-body-md-weight);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
}
.psy-label {
  font-family: var(--font-label);
  font-weight: var(--type-label-sm-weight);
  font-size: var(--type-label-sm-size);
  line-height: var(--type-label-sm-line);
  letter-spacing: var(--type-label-sm-track);
  text-transform: uppercase;
}
.psy-data {
  font-family: var(--font-mono);
  font-weight: var(--type-data-weight);
  font-size: var(--type-data-size);
  line-height: var(--type-data-line);
  letter-spacing: var(--type-data-track);
}