/* ============================================================================
   TYPOGRAPHY — DM Sans type scale
   The signature O@W move: headings are set in MEDIUM (500), NOT bold, with
   tight -0.03em tracking and line-height 1.0 at the largest sizes. This is
   what gives the brand its calm, modern, non-shouty feel.
   ========================================================================== */
:root {
  /* Family & weights */
  --font--primary-family: 'DM Sans', sans-serif;
  --font--primary-regular: 400;
  --font--primary-medium: 500;       /* headings use this — never bold */
  --font--primary-semi-bold: 600;

  /* Letter spacing */
  --letter-spacing--tight: -0.03em;  /* headings */
  --letter-spacing--0: 0em;

  /* Line heights */
  --line-height--1: 1;
  --line-height--1-1: 1.1;
  --line-height--1-3: 1.3;
  --line-height--1-5: 1.5;

  /* Type scale — font sizes */
  --display--font-size: var(--size--7rem);       /* 112px hero display */
  --h1--font-size: var(--size--5rem);            /* 80px  */
  --h2--font-size: var(--size--4rem);            /* 64px  */
  --h3--font-size: var(--size--3rem);            /* 48px  */
  --h4--font-size: var(--size--2rem);            /* 32px  */
  --h5--font-size: var(--size--1-5rem);          /* 24px  */
  --h6--font-size: var(--size--1rem);            /* 16px  */
  --text-large--font-size: var(--size--1-25rem); /* 20px  */
  --text-main--font-size: var(--size--1rem);     /* 16px  */
  --text-small--font-size: 0.875rem;             /* 14px  */

  /* Heading shared properties */
  --heading--font-family: var(--font--primary-family);
  --heading--font-weight: var(--font--primary-medium);   /* MEDIUM, not bold */
  --heading--letter-spacing: var(--letter-spacing--tight);
}

/* Responsive type — Webflow breakpoints (991 tablet, 767 mobile-land, 479 mobile) */
@media (max-width: 991px) {
  :root {
    --display--font-size: var(--size--5rem);
    --h1--font-size: var(--size--4rem);
    --h2--font-size: var(--size--3rem);
    --h3--font-size: var(--size--2-5rem);
  }
}
@media (max-width: 767px) {
  :root {
    --display--font-size: var(--size--3-5rem);
    --h1--font-size: var(--size--3rem);
    --h2--font-size: var(--size--2-5rem);
    --h3--font-size: var(--size--2rem);
  }
}
@media (max-width: 479px) {
  :root {
    --display--font-size: var(--size--2-5rem);
    --h1--font-size: var(--size--2-5rem);
    --h2--font-size: var(--size--2rem);
  }
}