/* ============================================================
   TYPOGRAPHY — Unreal
   Display  : Saira          — futuristic geometric, echoes the logo
   Sans/UI  : Hanken Grotesk — premium neutral grotesque (body)
   Mono     : Space Mono     — editorial labels, credits, stats
   NOTE: the wordmark uses a custom face; Saira is the system
   substitute. See README "Typography".
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "Saira", "Hanken Grotesk", system-ui, sans-serif;       /* headlines — futuristic, echoes the wordmark */
  --font-sans:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; /* body / UI */
  --font-mono:    "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;      /* stats / credits / labels */
  /* Aliases used across components */
  --font-body:    var(--font-sans);     /* body copy */
  --font-eyebrow: var(--font-display);  /* tracked uppercase labels, buttons, kickers */

  /* ---- 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-extrabold: 800;  /* @kind font */
  --fw-black: 900;      /* @kind font */
  --w-regular: 400;     /* @kind font */
  --w-semi: 600;        /* @kind font */

  /* ---- Fluid type scale (clamp: min @360px → max @1440px) ----
     Display tiers are for editorial headlines / hero.            */
  --fs-display-1: clamp(3.5rem, 1.5rem + 8.9vw, 8rem);     /* @kind other */
  --fs-display-2: clamp(2.75rem, 1.4rem + 6vw, 5.5rem);    /* @kind other */
  --fs-display-3: clamp(2.25rem, 1.4rem + 3.8vw, 4rem);    /* @kind other */
  --fs-h1: clamp(2rem, 1.4rem + 2.7vw, 3rem);              /* @kind other */
  --fs-h2: clamp(1.625rem, 1.2rem + 1.9vw, 2.25rem);       /* @kind other */
  --fs-h3: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);        /* @kind other */
  --fs-h4: 1.25rem;        /* @kind other */
  --fs-title: 1.0625rem;   /* @kind other */
  --fs-body-lg: 1.125rem;  /* @kind other */
  --fs-body: 1rem;         /* @kind other */
  --fs-body-sm: 0.9375rem; /* @kind other */
  --fs-caption: 0.8125rem; /* @kind other */
  --fs-eyebrow: 0.75rem;   /* @kind other */
  --fs-micro: 0.6875rem;   /* @kind other */

  /* ---- Line heights ---- */
  --lh-tight: 0.95;     /* @kind other */
  --lh-display: 1.02;   /* @kind other */
  --lh-heading: 1.08;   /* @kind other */
  --lh-snug: 1.25;      /* @kind other */
  --lh-body: 1.55;      /* @kind other */
  --lh-relaxed: 1.7;    /* @kind other */

  /* ---- Letter spacing ---- */
  --ls-mega: -0.03em;    /* @kind other */
  --ls-tight: -0.02em;   /* @kind other */
  --ls-snug: -0.01em;    /* @kind other */
  --ls-normal: 0em;      /* @kind other */
  --ls-wide: 0.04em;     /* @kind other */
  --ls-eyebrow: 0.22em;  /* @kind other */
  --ls-mono: 0.16em;     /* @kind other */
}

/* ---- Reusable type classes ---- */
.u-display-1 { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-display-1); line-height: var(--lh-tight); letter-spacing: var(--ls-mega); text-transform: uppercase; }
.u-display-2 { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-display-2); line-height: var(--lh-display); letter-spacing: var(--ls-mega); text-transform: uppercase; }
.u-display-3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-display-3); line-height: var(--lh-display); letter-spacing: var(--ls-tight); text-transform: uppercase; }
.u-h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); }
.u-h2 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-snug); }
.u-h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); }
.u-h4 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); }
.u-title { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-title); line-height: var(--lh-snug); }
.u-body-lg { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.u-body { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); }
.u-body-sm { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.u-caption { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-caption); line-height: var(--lh-snug); color: var(--text-tertiary); }
.u-eyebrow { font-family: var(--font-mono); font-weight: var(--fw-regular); font-size: var(--fs-eyebrow); line-height: 1; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--text-secondary); }
.u-kicker { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-eyebrow); line-height: 1; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.u-mono { font-family: var(--font-mono); font-weight: var(--fw-regular); font-size: var(--fs-caption); letter-spacing: 0.02em; }