/* ============================================================
   Fonts for SpaceGrotesk Theme
   ============================================================ */

/* Font Faces */
@font-face {
    font-family: 'SpaceGrotesk';
    src: url('SpaceGrotesk-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SpaceGrotesk';
    src: url('SpaceGrotesk-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SpaceGrotesk';
    src: url('SpaceGrotesk-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SpaceGrotesk';
    src: url('SpaceGrotesk-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Base */
body {
    font-family: 'SpaceGrotesk', sans-serif;
}

/* ============================================================
   Typography — Desktop + Mobile (from table mapping)
   ============================================================ */

/* Desktop definitions (from your font.css) */
.Typography-1, .Typography-20 {font-weight: 500;font-size: 64px;line-height: 1;margin: 0;}
.Typography-2, .Typography-19, .Typography-22, .Typography-27 {font-weight: 700;font-size: 96px;line-height: 1;margin: 0;}
.Typography-3, .Typography-14, .Typography-28 {font-weight: 500;font-size: 20px;margin: 0;}
.Typography-4, .Typography-12, .Typography-15, .Typography-29 {font-weight: 400;font-size: 20px;margin: 0;}
.Typography-5, .Typography-8, .Typography-25 {font-weight: 500;font-size: 48px;line-height: 55px;margin: 0;}
.Typography-6, .Typography-31 {font-weight: 400;font-size: 14px;margin: 0;}
.Typography-7, .Typography-32 {font-weight: 400;font-size: 16px;margin: 0;}
.Typography-9, .Typography-18 {font-weight: 500;font-size: 24px;line-height: 1;margin: 0;}
.Typography-10, .Typography-11, .Typography-26 {font-weight: 500;font-size: 32px;line-height: 1;margin: 0;}
.Typography-13, .Typography-24 {font-weight: 500;font-size: 20px;line-height: 1;margin: 0;}
.Typography-16 {font-weight: 700;font-size: 38px;line-height: 1;margin: 0;}
.Typography-17 {font-weight: 700;font-size: 128px;line-height: 1;margin: 0;}
.Typography-21 {font-weight: 500;font-size: 40px;line-height: 1;margin: 0;}
.Typography-23 {font-weight: 700;font-size: 64px;line-height: 1;margin: 0;}
.Typography-30 {font-weight: 500;font-size: 16px;margin: 0;}
.Typography-33 {font-weight: 400;font-size: 24px;margin: 0;}
.Typography-34 {font-weight: 400;font-size: 20px;margin: 0;}
.Typography-35 {font-weight: 700;font-size: 156px;margin: 0;}
.Typography-36 {font-weight: 700;font-size: 72px;margin: 0;}
.Typography-37 {font-weight: 500;font-size: 28px;margin: 0;}




/* ============================================================
   Mobile overrides (from mapping)
   ============================================================ */

@media screen and (max-width: 600px) {
    .Typography-1, .Typography-8, .Typography-21, .Typography-26 {font-weight: 500;font-size: 32px;line-height: 1;} /* Heading-5 */
    .Typography-2, .Typography-23, .Typography-36 {font-weight: 700;font-size: 38px;line-height: 1;} /* Display-6 */
    .Typography-3, .Typography-18, .Typography-30 {font-weight: 500;font-size: 16px;} /* Body-3-Medium */
    .Typography-4, .Typography-31 {font-weight: 400;font-size: 14px;} /* Body-4 */
    .Typography-5 {font-weight: 500;font-size: 40px;line-height: 1;} /* Heading-4 */
    .Typography-6, .Typography-7 {font-weight: 400;font-size: 10px;} /* Body-6 */
    .Typography-9, .Typography-13 {font-weight: 500;font-size: 18px;line-height: 1.5;} /* Heading-8 */
    .Typography-10 {font-weight: 500;font-size: 18px;line-height: 1;} /* Heading-7 */
    .Typography-11, .Typography-25 {font-weight: 500;font-size: 20px;line-height: 1;} /* Heading-6 */
    .Typography-12, .Typography-16, .Typography-24, .Typography-28, .Typography-37 {font-weight: 500;font-size: 20px;} /* Body-2-Medium */
    .Typography-14 {font-weight: 500;font-size: 14px;} /* Body-4-Medium */
    .Typography-15, .Typography-32 {font-weight: 400!important;font-size: 12px;} /* Body-5 */
    .Typography-17, .Typography-22 {font-weight: 700;font-size: 64px;line-height: 1;} /* Display-4 */
    .Typography-19 {font-weight: 700;font-size: 48px;line-height: 1;} /* Display-5 */
    .Typography-20 {font-weight: 500;font-size: 48px;line-height: 1;} /* Heading-3 */
    .Typography-27 {font-weight: 700;font-size: 96px;line-height: 1;} /* Display-3 */
    .Typography-29 {font-weight: 400;font-size: 16px;} /* Body-3 */
    .Typography-33 {font-weight: 400;font-size: 24px;} /* Body-1 */
    .Typography-34 {font-weight: 400; font-size: 20px;} /* Body-2 */
    .Typography-35 {font-weight: 700; font-size: 96px;} /* Display-3 */
}