/* ============================================================
   Konpo, Typography tokens
   One typeface (Neue Haas Grotesk Display) carries everything.
   Display sizes are enormous; body stays calm and grotesque.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "Neue Haas Grotesk Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Neue Haas Grotesk Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Weights ---- */
  --fw-light:  300;  /* @kind font */
  --fw-regular:400;  /* @kind font */
  --fw-medium: 500;  /* @kind font */
  --fw-bold:   700;  /* @kind font */
  --fw-black:  900;  /* @kind font */

  /* ---- Display scale (hero / section headers) ---------------
     Konpo sets headlines HUGE and tight. Fluid where it matters. */
  --text-display-xl: clamp(3.5rem, 9vw, 8rem);   /* "World-class design at studio speed." */
  --text-display-l:  clamp(2.75rem, 6.5vw, 5.5rem); /* "Design Systems" */
  --text-display-m:  clamp(2rem, 4vw, 3.5rem);
  --text-display-s:  clamp(1.6rem, 2.6vw, 2.25rem);

  /* ---- Heading / body scale ---- */
  --text-h1: 2.5rem;
  --text-h2: 2rem;
  --text-h3: 1.5rem;
  --text-title: 1.75rem;   /* large supporting copy, e.g. service blurbs */
  --text-lg:   1.25rem;
  --text-body: 1.0625rem;  /* 17px base reading size */
  --text-sm:   0.9375rem;  /* 15px */
  --text-xs:   0.8125rem;  /* 13px meta / labels */
  --text-2xs:  0.6875rem;  /* 11px superscript tags (the "AI" on surge) */

  /* ---- Line heights ---- */
  --leading-display: 0.98;  /* huge headlines run nearly solid */
  --leading-tight:   1.08;
  --leading-snug:    1.22;
  --leading-normal:  1.45;
  --leading-relaxed: 1.6;

  /* ---- Letter spacing ---- */
  --tracking-display: -0.02em;  /* big type tightens up */
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-label:   0.04em;   /* small caps-y meta labels */
  --tracking-caps:    0.08em;   /* eyebrow / partner logos */
}