/* ==========================================================
   TYPOGRAPHY.CSS — BUZZ Agency Design System Type Tokens
   ========================================================== */

/* ── @font-face: Raleway ── */
@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-Regular.woff2') format('woff2'),
       url('../fonts/Raleway-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-Italic.woff2') format('woff2'),
       url('../fonts/Raleway-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-Bold.woff2') format('woff2'),
       url('../fonts/Raleway-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-BoldItalic.woff2') format('woff2'),
       url('../fonts/Raleway-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-Black.woff2') format('woff2'),
       url('../fonts/Raleway-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-BlackItalic.woff2') format('woff2'),
       url('../fonts/Raleway-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}


/* ── Type Scale ── */
:root {
  --font-family: 'Raleway', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Fluid type scale — mobile-first with clamp */
  --text-xs:    clamp(0.6875rem, 0.6rem + 0.25vw, 0.75rem);        /* ~11–12px */
  --text-sm:    clamp(0.8125rem, 0.75rem + 0.25vw, 0.875rem);       /* ~13–14px */
  --text-base:  clamp(1rem, 0.9rem + 0.35vw, 1.0625rem);              /* ~16–17px */
  --text-lg:    clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);         /* ~17–20px */
  --text-xl:    clamp(1.25rem, 1rem + 0.75vw, 1.5rem);              /* ~20–24px */
  --text-2xl:   clamp(1.5rem, 1.15rem + 1.2vw, 2rem);               /* ~24–32px */
  --text-3xl:   clamp(2rem, 1.5rem + 1.8vw, 2.75rem);               /* ~32–44px */
  --text-4xl:   clamp(2.5rem, 1.75rem + 2.5vw, 3.5rem);             /* ~40–56px */
  --text-5xl:   clamp(3rem, 2rem + 3.5vw, 5rem);                    /* ~48–80px */
  --text-hero:  clamp(3.5rem, 2.5rem + 4vw, 6.5rem);                /* ~56–104px */

  /* Tracking */
  --tracking-tight:    -0.03em;
  --tracking-snug:     -0.015em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.14em;

  /* Leading */
  --leading-none:      1;
  --leading-tight:     1.15;
  --leading-snug:      1.3;
  --leading-normal:    1.5;
  --leading-relaxed:   1.7;

  /* Font weights — shipped faces: 400 / 700 / 900 (+ italics) */
  --weight-thin:       100;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-bold:       700;
  --weight-semibold:   600;
  --weight-extrabold:  800;
  --weight-black:      900;
}