/* ============================================================
   Claudia Arias Escobar — Typography tokens
   Plus Jakarta Sans (primary) · Cormorant (editorial italic)
   · Outfit (UI / labels / data)
   ============================================================ */

:root {
  /* ── Families ── */
  --font-sans:   'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-serif:  'Cormorant', Georgia, 'Times New Roman', serif;
  --font-ui:     'Outfit', system-ui, sans-serif;

  /* ── Weights ── */
  --fw-light:    300; /* @kind other */ /* "Claudia" in wordmark, light display */
  --fw-regular:  400; /* @kind other */
  --fw-medium:   500; /* @kind other */
  --fw-semibold: 600; /* @kind other */ /* section headings, "Arias Escobar" */
  --fw-bold:     700; /* @kind other */ /* display titles, big numbers */

  /* ── Display / heading scale (Plus Jakarta Sans) ── */
  --text-display: 700 clamp(40px, 6vw, 72px)/1.05 var(--font-sans);  /* hero H1 */
  --text-h1:      700 clamp(32px, 5vw, 56px)/1.05 var(--font-sans);
  --text-h2:      600 clamp(28px, 4vw, 40px)/1.15 var(--font-sans);
  --text-h3:      600 22px/1.3 var(--font-sans);
  --text-h4:      600 18px/1.35 var(--font-sans);

  /* ── Body (Plus Jakarta Sans) ── */
  --text-lead:    400 19px/1.7 var(--font-sans);   /* intro paragraphs */
  --text-body:    400 16px/1.7 var(--font-sans);   /* default copy */
  --text-small:   400 14px/1.6 var(--font-sans);

  /* ── Editorial accent (Cormorant italic) ── */
  --text-quote:   italic 400 clamp(22px, 3vw, 32px)/1.4 var(--font-serif);
  --text-quote-lg:italic 400 clamp(32px, 5vw, 56px)/1.15 var(--font-serif);

  /* ── UI / labels / data (Outfit) ── */
  --text-eyebrow: 600 11px/1.4 var(--font-ui);     /* uppercase + tracking */
  --text-label:   500 13px/1.5 var(--font-ui);
  --text-caption: 300 11px/1.6 var(--font-ui);     /* uppercase meta */
  --text-data:    600 28px/1 var(--font-ui);       /* stat numbers (small) */

  /* ── Letter-spacing ── */
  --tracking-tight:   -0.5px;   /* large display */
  --tracking-normal:  0;
  --tracking-wide:    1px;
  --tracking-wider:   2px;      /* eyebrows / captions */
  --tracking-widest:  3px;      /* hero eyebrow, nav */
}
