/* ============================================================
   CHAMELEON SPACE — TYPE
   Display shouts in Anton, ALL CAPS, packed tight.
   Body speaks in Space Grotesk. Labels & data run in Space Mono.
   ============================================================ */

:root {
  /* ---- families ---- */
  --font-display: "Anton", "Arial Narrow", system-ui, sans-serif;
  --font-text:    "Space Grotesk", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- weights ---- */
  --w-light:   300; /* @kind font */
  --w-regular: 400; /* @kind font */
  --w-medium:  500; /* @kind font */
  --w-bold:    700; /* @kind font */

  /* ---- type scale (fluid-ish, fixed px for specimen clarity) ---- */
  --t-mega:   112px;  /* poster / hero display */
  --t-display:72px;
  --t-h1:     52px;
  --t-h2:     38px;
  --t-h3:     27px;
  --t-h4:     20px;
  --t-body-lg:19px;
  --t-body:   16px;
  --t-small:  14px;
  --t-micro:  12px;

  /* ---- line height ---- */
  --lh-tight:  0.92;  /* @kind font */
  --lh-snug:   1.1;   /* @kind font */
  --lh-normal: 1.5;   /* @kind font */
  --lh-loose:  1.65;  /* @kind font */

  /* ---- tracking ---- */
  --track-display: -0.01em;
  --track-tight:   -0.01em;
  --track-normal:   0;        /* @kind font */
  --track-label:    0.14em;   /* mono eyebrow / button */
  --track-wide:     0.22em;
}

/* ---- helper classes (optional; tokens are the contract) ---- */
.cs-display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
}
.cs-eyebrow {
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
}
.cs-body {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-normal);
}
.cs-mono {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  letter-spacing: 0;
}