/* ============================================================
   NEXHA HAIRTECH — TYPOGRAPHY TOKENS
   Heavy engineered grotesque for display; quiet sans for body;
   mono for data. Display is UPPERCASE and tightly tracked.
   ============================================================ */

:root {
  /* --- Families --- */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-text:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, 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-extra:    800; /* @kind font */
  --fw-black:    900; /* @kind font */

  /* --- Type scale (display sizes assume large surfaces) --- */
  --fs-3xs: 0.6875rem;  /* 11px — micro labels */
  --fs-2xs: 0.75rem;    /* 12px — eyebrow / tags */
  --fs-xs:  0.8125rem;  /* 13px */
  --fs-sm:  0.875rem;   /* 14px */
  --fs-md:  1rem;       /* 16px — body */
  --fs-lg:  1.125rem;   /* 18px */
  --fs-xl:  1.375rem;   /* 22px */
  --fs-2xl: 1.75rem;    /* 28px */
  --fs-3xl: 2.375rem;   /* 38px */
  --fs-4xl: 3.25rem;    /* 52px */
  --fs-5xl: 4.5rem;     /* 72px */
  --fs-6xl: 6rem;       /* 96px — hero */

  /* --- Line heights --- */
  --lh-solid:   1; /* @kind font */
  --lh-tight:   1.08; /* @kind font */
  --lh-snug:    1.22; /* @kind font */
  --lh-normal:  1.5; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* --- Letter spacing --- */
  --ls-tightest: -0.03em; /* @kind font */
  --ls-tight:    -0.015em; /* @kind font */
  --ls-normal:   0em; /* @kind font */
  --ls-wide:     0.08em; /* @kind font */
  --ls-wider:    0.16em;  /* @kind font */
  --ls-widest:   0.26em;  /* @kind font */

  /* --- Semantic roles --- */
  --type-hero-size:    var(--fs-6xl);
  --type-hero-weight:  var(--fw-extra); /* @kind font */
  --type-hero-ls:      var(--ls-tightest); /* @kind font */

  --type-display-size: var(--fs-4xl);
  --type-display-weight: var(--fw-extra); /* @kind font */
  --type-display-ls:   var(--ls-tight); /* @kind font */

  --type-title-size:   var(--fs-2xl);
  --type-title-weight: var(--fw-bold); /* @kind font */

  --type-eyebrow-size: var(--fs-2xs);
  --type-eyebrow-weight: var(--fw-semibold); /* @kind font */
  --type-eyebrow-ls:   var(--ls-wider); /* @kind font */

  --type-body-size:    var(--fs-md);
  --type-body-weight:  var(--fw-regular); /* @kind font */
  --type-body-lh:      var(--lh-relaxed); /* @kind font */

  --type-mono-size:    var(--fs-sm);
  --type-mono-ls:      0.02em; /* @kind font */
}