/* =============================================================
   Leadity — Typography tokens + webfonts
   Families: Roboto (UI text) · Montserrat (display)
   Source of truth: tailwind.config.ts + Figma library
   ============================================================= */

/* Montserrat Bold (self-hosted) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
}

/* Roboto 100 (Thin) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('../fonts/roboto-v30-latin-100.woff2') format('woff2'),
       url('../fonts/roboto-v30-latin-100.woff') format('woff'),
       url('../fonts/roboto-v30-latin-100.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url('../fonts/roboto-v30-latin-100italic.woff2') format('woff2'),
       url('../fonts/roboto-v30-latin-100italic.woff') format('woff'),
       url('../fonts/roboto-v30-latin-100italic.ttf') format('truetype');
}

/* Roboto 300 (Light) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/roboto-v30-latin-300.woff2') format('woff2'),
       url('../fonts/roboto-v30-latin-300.woff') format('woff'),
       url('../fonts/roboto-v30-latin-300.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/roboto-v30-latin-300italic.woff2') format('woff2'),
       url('../fonts/roboto-v30-latin-300italic.woff') format('woff'),
       url('../fonts/roboto-v30-latin-300italic.ttf') format('truetype');
}

/* Roboto 400 (Regular) — mapped from 500 files since no 400 provided */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-v30-latin-500.woff2') format('woff2'),
       url('../fonts/roboto-v30-latin-500.woff') format('woff'),
       url('../fonts/roboto-v30-latin-500.ttf') format('truetype');
}

/* Roboto 500 (Medium) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/roboto-v30-latin-500.woff2') format('woff2'),
       url('../fonts/roboto-v30-latin-500.woff') format('woff'),
       url('../fonts/roboto-v30-latin-500.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/roboto-v30-latin-500italic.woff2') format('woff2'),
       url('../fonts/roboto-v30-latin-500italic.woff') format('woff'),
       url('../fonts/roboto-v30-latin-500italic.ttf') format('truetype');
}

/* Roboto 600 (Semibold) — mapped from 700 since no 600 provided */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/roboto-v30-latin-700.woff') format('woff'),
       url('../fonts/roboto-v30-latin-700.ttf') format('truetype');
}

/* Roboto 700 (Bold) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/roboto-v30-latin-700.woff') format('woff'),
       url('../fonts/roboto-v30-latin-700.ttf') format('truetype');
}

:root {
  /* ---------- Type families ---------- */
  --font-title:   'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Montserrat', 'Roboto', sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* ---------- Type scale (Tailwind tokens) ---------- */
  /* display-lg  30 / 130% / 700  — Montserrat */
  --text-display-lg-size:        1.875rem;
  --text-display-lg-line:        130%;
  --text-display-lg-weight:      700;
  --text-display-lg-tracking:    0.1px;

  /* display-md  25 / 130% / 700  — Montserrat */
  --text-display-md-size:        1.5625rem;
  --text-display-md-line:        130%;
  --text-display-md-weight:      700;
  --text-display-md-tracking:    0.1px;

  /* display-sm  21 / 130% / 700  — Montserrat */
  --text-display-sm-size:        1.3125rem;
  --text-display-sm-line:        130%;
  --text-display-sm-weight:      700;
  --text-display-sm-tracking:    0.1px;

  /* title-lg    21 / 150% / 600  — Roboto */
  --text-title-lg-size:          1.3125rem;
  --text-title-lg-line:          150%;
  --text-title-lg-weight:        600;
  --text-title-lg-tracking:      0.105px;

  /* title-md    18 / 150% / 600  — Roboto */
  --text-title-md-size:          1.125rem;
  --text-title-md-line:          150%;
  --text-title-md-weight:        600;
  --text-title-md-tracking:      0.09px;

  /* title-sm    16 / 130% / 600  — Roboto */
  --text-title-sm-size:          1rem;
  --text-title-sm-line:          130%;
  --text-title-sm-weight:        600;
  --text-title-sm-tracking:      0.08px;

  /* label       16 / 20 / 600   — Roboto */
  --text-label-size:             1rem;
  --text-label-line:             1.25rem;
  --text-label-weight:           600;

  /* body        16 / 24 / 400   — Roboto */
  --text-body-size:              1rem;
  --text-body-line:              1.5rem;
  --text-body-weight:            400;

  /* body-sm     14 / 20 / 400   — Roboto */
  --text-body-sm-size:           0.875rem;
  --text-body-sm-line:           1.25rem;
  --text-body-sm-weight:         400;
}