/* ============================================================
   TYPOGRAPHY — Shubhi Portfolio 2026
   Two families: a neutral grotesque (display + body) and a mono
   used for labels, nav, meta, and "bracketed" UI voice.
   ============================================================ */
:root {
  /* --- Families --- */
  --font-sans: 'Geist', 'Onest', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, 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 */

  /* --- Fluid display sizes (hero + page titles) --- */
  --fs-display: clamp(3.25rem, 7vw, 6rem); /* @kind font */
  --fs-h1: clamp(2.75rem, 5.5vw, 4.5rem); /* @kind font */
  --fs-h2: clamp(2rem, 3.5vw, 3rem); /* @kind font */
  --fs-h3: 1.5rem; /* @kind font */
  --fs-title: 1.25rem; /* @kind font */

  /* --- Fixed text sizes --- */
  --fs-body-lg: 1.125rem; /* @kind font */
  --fs-body: 1rem; /* @kind font */
  --fs-body-sm: 0.9375rem; /* @kind font */
  --fs-caption: 0.8125rem; /* @kind font */
  --fs-label: 0.75rem; /* @kind font */

  /* --- Line heights --- */
  --lh-tight: 1.02; /* @kind font */
  --lh-snug: 1.12; /* @kind font */
  --lh-normal: 1.5; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* --- Letter spacing --- */
  --ls-display: -0.03em; /* @kind font */
  --ls-heading: -0.02em; /* @kind font */
  --ls-normal: 0; /* @kind font */
  --ls-label: 0.14em; /* @kind font */
  --ls-label-wide: 0.24em; /* @kind font */

  /* ============================================================
     SEMANTIC TYPE ROLES
     ============================================================ */
  --type-display: var(--fw-medium) var(--fs-display)/var(--lh-tight) var(--font-sans);
  --type-h1: var(--fw-medium) var(--fs-h1)/var(--lh-snug) var(--font-sans);
  --type-h2: var(--fw-medium) var(--fs-h2)/var(--lh-snug) var(--font-sans);
  --type-h3: var(--fw-medium) var(--fs-h3)/var(--lh-snug) var(--font-sans);
  --type-body: var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-sans);
  --type-body-lg: var(--fw-regular) var(--fs-body-lg)/var(--lh-relaxed) var(--font-sans);
  --type-label: var(--fw-regular) var(--fs-label)/1 var(--font-mono);
}