/* =========================================================
   VILIANTE TYPOGRAPHY SYSTEM
   ========================================================= */

:root {

  /* =====================================================
     FONT FAMILIES
     ===================================================== */

  --font-base:
    Inter,
    Manrope,
    "Plus Jakarta Sans",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;

  --font-editorial:
    Manrope,
    Inter,
    system-ui,
    sans-serif;

  --font-handwritten:
    "Comic Sans MS",
    "Marker Felt",
    "Bradley Hand",
    "Segoe Print",
    cursive;


  /* =====================================================
     FONT WEIGHTS
     ===================================================== */

  --weight-bold: 700;
  --weight-heavy: 800;
  --weight-black: 900;
  --weight-ultra: 950;


  /* =====================================================
     LETTER SPACING
     ===================================================== */

  --tracking-tight: -0.03em;
  --tracking-editorial: -0.045em;
  --tracking-display: -0.065em;
  --tracking-kicker: 0.16em;


  /* =====================================================
     HERO TYPOGRAPHY
     ===================================================== */

  --hero-title-xl:
    clamp(84px, 6.8vw, 132px);

  --hero-title-lg:
    clamp(72px, 7.2vw, 122px);

  --hero-title-md:
    clamp(58px, 7vw, 92px);

  --hero-copy:
    clamp(20px, 1.45vw, 28px);


  /* =====================================================
     BODY TYPOGRAPHY
     ===================================================== */

  --body-lg:
    clamp(18px, 1.55vw, 23px);

  --body-md:
    1.08rem;

  --body-sm:
    0.98rem;


  /* =====================================================
     TRANSITIONS
     ===================================================== */

  --transition-fast: .18s ease;
  --transition-medium: .28s ease;
}