/* ============================================================
   4 You Design — Typography Tokens
   NOTE: Montserrat + Open Sans are Google Fonts substitutions.
   The original logo uses custom typefaces. Please supply
   original font files to replace these approximations.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700;1,800&family=Open+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ── Font Families ── */
  --font-display: 'Montserrat', sans-serif;   /* Headings, wordmark-style */
  --font-sans:    'Open Sans', sans-serif;    /* Body, UI text */
  --font-mono:    'Courier New', Courier, monospace;

  /* ── Font Sizes ── */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  48px;
  --text-6xl:  60px;
  --text-7xl:  72px;

  /* ── Font Weights ── */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* ── Line Heights ── */
  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* ── Letter Spacing ── */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.15em;
}