/*!
 * Self-hosted Font CDN
 * Optimized for Cloudflare delivery
 * Generated: July 15, 2025
 */

/* ==========================================================================
   INTER FONT FAMILY
   ========================================================================== */

/* Inter Variable - Most efficient option */
@font-face {
  font-family: 'Inter';
  src: url('https://fonts.astra.id/fonts/inter/InterVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  src: url('https://fonts.astra.id/fonts/inter/InterVariable-Italic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter Static Weights - Fallback for older browsers */
@font-face {
  font-family: 'Inter';
  src: url('https://fonts.astra.id/fonts/inter/Inter-Thin.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/Inter-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('https://fonts.astra.id/fonts/inter/Inter-ThinItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/Inter-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('https://fonts.astra.id/fonts/inter/Inter-ExtraLight.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/Inter-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('https://fonts.astra.id/fonts/inter/Inter-ExtraLightItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/Inter-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('https://fonts.astra.id/fonts/inter/Inter-Light.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/Inter-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('https://fonts.astra.id/fonts/inter/Inter-LightItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/Inter-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('https://fonts.astra.id/fonts/inter/Inter-Regular.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: 'Inter';
  src: url('https://fonts.astra.id/fonts/inter/Inter-Medium.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/Inter-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('https://fonts.astra.id/fonts/inter/Inter-MediumItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/Inter-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('https://fonts.astra.id/fonts/inter/Inter-SemiBold.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/Inter-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('https://fonts.astra.id/fonts/inter/Inter-SemiBoldItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/Inter-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

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

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

@font-face {
  font-family: 'Inter';
  src: url('https://fonts.astra.id/fonts/inter/Inter-ExtraBold.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/Inter-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('https://fonts.astra.id/fonts/inter/Inter-ExtraBoldItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/Inter-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

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

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

/* ==========================================================================
   INTER DISPLAY FONT FAMILY
   ========================================================================== */

@font-face {
  font-family: 'Inter Display';
  src: url('https://fonts.astra.id/fonts/inter/InterDisplay-Thin.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/InterDisplay-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Display';
  src: url('https://fonts.astra.id/fonts/inter/InterDisplay-ThinItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/InterDisplay-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Display';
  src: url('https://fonts.astra.id/fonts/inter/InterDisplay-ExtraLight.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/InterDisplay-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Display';
  src: url('https://fonts.astra.id/fonts/inter/InterDisplay-ExtraLightItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/InterDisplay-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Display';
  src: url('https://fonts.astra.id/fonts/inter/InterDisplay-Light.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/InterDisplay-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Display';
  src: url('https://fonts.astra.id/fonts/inter/InterDisplay-LightItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/InterDisplay-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Display';
  src: url('https://fonts.astra.id/fonts/inter/InterDisplay-Regular.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/InterDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Display';
  src: url('https://fonts.astra.id/fonts/inter/InterDisplay-Italic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/InterDisplay-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Display';
  src: url('https://fonts.astra.id/fonts/inter/InterDisplay-Medium.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/InterDisplay-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Display';
  src: url('https://fonts.astra.id/fonts/inter/InterDisplay-MediumItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/InterDisplay-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Display';
  src: url('https://fonts.astra.id/fonts/inter/InterDisplay-SemiBold.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/InterDisplay-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Display';
  src: url('https://fonts.astra.id/fonts/inter/InterDisplay-SemiBoldItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/InterDisplay-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Display';
  src: url('https://fonts.astra.id/fonts/inter/InterDisplay-Bold.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/InterDisplay-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Display';
  src: url('https://fonts.astra.id/fonts/inter/InterDisplay-BoldItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/InterDisplay-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Display';
  src: url('https://fonts.astra.id/fonts/inter/InterDisplay-ExtraBold.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/InterDisplay-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Display';
  src: url('https://fonts.astra.id/fonts/inter/InterDisplay-ExtraBoldItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/InterDisplay-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Display';
  src: url('https://fonts.astra.id/fonts/inter/InterDisplay-Black.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/InterDisplay-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Display';
  src: url('https://fonts.astra.id/fonts/inter/InterDisplay-BlackItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/inter/InterDisplay-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   ROBOTO FONT FAMILY
   ========================================================================== */

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.astra.id/fonts/roboto/Roboto-Thin.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/roboto/Roboto-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.astra.id/fonts/roboto/Roboto-ThinItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/roboto/Roboto-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.astra.id/fonts/roboto/Roboto-Light.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/roboto/Roboto-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.astra.id/fonts/roboto/Roboto-LightItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/roboto/Roboto-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.astra.id/fonts/roboto/Roboto-Regular.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/roboto/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.astra.id/fonts/roboto/Roboto-RegularItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/roboto/Roboto-RegularItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.astra.id/fonts/roboto/Roboto-Medium.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/roboto/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.astra.id/fonts/roboto/Roboto-MediumItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/roboto/Roboto-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

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

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

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

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

/* ==========================================================================
   WORK SANS FONT FAMILY
   ========================================================================== */

@font-face {
  font-family: 'Work Sans';
  src: url('https://fonts.astra.id/fonts/worksans/WorkSans-Thin.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/worksans/WorkSans-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('https://fonts.astra.id/fonts/worksans/WorkSans-ThinItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/worksans/WorkSans-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('https://fonts.astra.id/fonts/worksans/WorkSans-ExtraLight.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/worksans/WorkSans-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('https://fonts.astra.id/fonts/worksans/WorkSans-ExtraLightItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/worksans/WorkSans-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('https://fonts.astra.id/fonts/worksans/WorkSans-Light.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/worksans/WorkSans-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('https://fonts.astra.id/fonts/worksans/WorkSans-LightItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/worksans/WorkSans-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('https://fonts.astra.id/fonts/worksans/WorkSans-Regular.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/worksans/WorkSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('https://fonts.astra.id/fonts/worksans/WorkSans-Italic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/worksans/WorkSans-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('https://fonts.astra.id/fonts/worksans/WorkSans-Medium.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/worksans/WorkSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('https://fonts.astra.id/fonts/worksans/WorkSans-MediumItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/worksans/WorkSans-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('https://fonts.astra.id/fonts/worksans/WorkSans-SemiBold.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/worksans/WorkSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('https://fonts.astra.id/fonts/worksans/WorkSans-SemiBoldItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/worksans/WorkSans-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('https://fonts.astra.id/fonts/worksans/WorkSans-Bold.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/worksans/WorkSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('https://fonts.astra.id/fonts/worksans/WorkSans-BoldItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/worksans/WorkSans-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('https://fonts.astra.id/fonts/worksans/WorkSans-ExtraBold.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/worksans/WorkSans-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('https://fonts.astra.id/fonts/worksans/WorkSans-ExtraBoldItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/worksans/WorkSans-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('https://fonts.astra.id/fonts/worksans/WorkSans-Black.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/worksans/WorkSans-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('https://fonts.astra.id/fonts/worksans/WorkSans-BlackItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/worksans/WorkSans-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   POPPINS FONT FAMILY
   ========================================================================== */

@font-face {
  font-family: 'Poppins';
  src: url('https://fonts.astra.id/fonts/poppins/Poppins-Thin.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/poppins/Poppins-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('https://fonts.astra.id/fonts/poppins/Poppins-ThinItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/poppins/Poppins-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('https://fonts.astra.id/fonts/poppins/Poppins-ExtraLight.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/poppins/Poppins-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('https://fonts.astra.id/fonts/poppins/Poppins-ExtraLightItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/poppins/Poppins-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('https://fonts.astra.id/fonts/poppins/Poppins-Light.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/poppins/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('https://fonts.astra.id/fonts/poppins/Poppins-LightItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/poppins/Poppins-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('https://fonts.astra.id/fonts/poppins/Poppins-Regular.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: 'Poppins';
  src: url('https://fonts.astra.id/fonts/poppins/Poppins-Medium.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/poppins/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('https://fonts.astra.id/fonts/poppins/Poppins-MediumItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/poppins/Poppins-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('https://fonts.astra.id/fonts/poppins/Poppins-SemiBold.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('https://fonts.astra.id/fonts/poppins/Poppins-SemiBoldItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/poppins/Poppins-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

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

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

@font-face {
  font-family: 'Poppins';
  src: url('https://fonts.astra.id/fonts/poppins/Poppins-ExtraBold.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/poppins/Poppins-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('https://fonts.astra.id/fonts/poppins/Poppins-ExtraBoldItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/poppins/Poppins-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

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

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

/* ==========================================================================
   CASCADIA CODE FONT FAMILY
   ========================================================================== */

@font-face {
  font-family: 'Cascadia Code';
  src: url('https://fonts.astra.id/fonts/cascadiacode/CascadiaCode.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/cascadiacode/CascadiaCode.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cascadia Code';
  src: url('https://fonts.astra.id/fonts/cascadiacode/CascadiaCodeItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/cascadiacode/CascadiaCodeItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Cascadia Code NF';
  src: url('https://fonts.astra.id/fonts/cascadiacode/CascadiaCodeNF.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/cascadiacode/CascadiaCodeNF.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cascadia Code NF';
  src: url('https://fonts.astra.id/fonts/cascadiacode/CascadiaCodeNFItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/cascadiacode/CascadiaCodeNFItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Cascadia Code PL';
  src: url('https://fonts.astra.id/fonts/cascadiacode/CascadiaCodePL.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/cascadiacode/CascadiaCodePL.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cascadia Code PL';
  src: url('https://fonts.astra.id/fonts/cascadiacode/CascadiaCodePLItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/cascadiacode/CascadiaCodePLItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   CASCADIA MONO FONT FAMILY
   ========================================================================== */

@font-face {
  font-family: 'Cascadia Mono';
  src: url('https://fonts.astra.id/fonts/cascadiacode/CascadiaMono.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/cascadiacode/CascadiaMono.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cascadia Mono';
  src: url('https://fonts.astra.id/fonts/cascadiacode/CascadiaMonoItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/cascadiacode/CascadiaMonoItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Cascadia Mono NF';
  src: url('https://fonts.astra.id/fonts/cascadiacode/CascadiaMonoNF.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/cascadiacode/CascadiaMonoNF.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cascadia Mono NF';
  src: url('https://fonts.astra.id/fonts/cascadiacode/CascadiaMonoNFItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/cascadiacode/CascadiaMonoNFItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Cascadia Mono PL';
  src: url('https://fonts.astra.id/fonts/cascadiacode/CascadiaMonoPL.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/cascadiacode/CascadiaMonoPL.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cascadia Mono PL';
  src: url('https://fonts.astra.id/fonts/cascadiacode/CascadiaMonoPLItalic.woff2') format('woff2'),
       url('https://fonts.astra.id/fonts/cascadiacode/CascadiaMonoPLItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ========================================================================== */

:root {
  /* Font Family Variables */
  --font-inter: 'Inter';
  --font-inter-display: 'Inter Display';
  --font-roboto: 'Roboto';
  --font-work-sans: 'Work Sans';
  --font-poppins: 'Poppins';
  --font-cascadia-code: 'Cascadia Code';
  --font-cascadia-mono: 'Cascadia Mono';
  
  /* Font Stack Variables (No Fallbacks) */
  --font-stack-inter: var(--font-inter);
  --font-stack-inter-display: var(--font-inter-display);
  --font-stack-roboto: var(--font-roboto);
  --font-stack-work-sans: var(--font-work-sans);
  --font-stack-poppins: var(--font-poppins);
  --font-stack-cascadia-code: var(--font-cascadia-code);
  --font-stack-cascadia-mono: var(--font-cascadia-mono);
  
  /* Generic Font Variables (Astra naming) */
  --font-astra1: var(--font-stack-inter);
  --font-astra2: var(--font-stack-inter-display);
  --font-astra3: var(--font-stack-roboto);
  --font-astra4: var(--font-stack-work-sans);
  --font-astra5: var(--font-stack-poppins);
  --font-astra-mono: var(--font-cascadia-mono), var(--font-cascadia-code);
  
  /* Font Weight Variables */
  --font-weight-thin: 100;
  --font-weight-extra-light: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;
  --font-weight-black: 900;
}

/* ==========================================================================
   GENERIC UTILITY CLASSES
   ========================================================================== */

.font-astra1 {
  font-family: var(--font-astra1);
}

.font-astra2 {
  font-family: var(--font-astra2);
}

.font-astra3 {
  font-family: var(--font-astra3);
}

.font-astra4 {
  font-family: var(--font-astra4);
}

.font-astra5 {
  font-family: var(--font-astra5);
}

.font-astra-mono {
  font-family: var(--font-astra-mono);
}

/* ==========================================================================
   SPECIFIC UTILITY CLASSES
   ========================================================================== */

.font-inter {
  font-family: var(--font-stack-inter);
}

.font-inter-display {
  font-family: var(--font-stack-inter-display);
}

.font-roboto {
  font-family: var(--font-stack-roboto);
}

.font-work-sans {
  font-family: var(--font-stack-work-sans);
}

.font-poppins {
  font-family: var(--font-stack-poppins);
}

.font-cascadia-code {
  font-family: var(--font-stack-cascadia-code);
}

.font-cascadia-mono {
  font-family: var(--font-stack-cascadia-mono);
}

/* ==========================================================================
   FONT WEIGHT UTILITY CLASSES
   ========================================================================== */

.font-thin { font-weight: var(--font-weight-thin); }
.font-extra-light { font-weight: var(--font-weight-extra-light); }
.font-light { font-weight: var(--font-weight-light); }
.font-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semi-bold { font-weight: var(--font-weight-semi-bold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-extra-bold { font-weight: var(--font-weight-extra-bold); }
.font-black { font-weight: var(--font-weight-black); }

/* ==========================================================================
   PERFORMANCE OPTIMIZATIONS
   ========================================================================== */

/* Preload critical fonts for better performance */
/* Add these to your HTML <head> section:

<link rel="preload" href="./inter/InterVariable.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="./inter/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="./roboto/Roboto-Regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="./worksans/WorkSans-Regular.woff2" as="font" type="font/woff2" crossorigin>

*/

/* ==========================================================================
   USAGE EXAMPLES WITH CSS VARIABLES
   ========================================================================== */

/*
Example 1: Using CSS Variables in your own CSS

body {
  font-family: var(--font-astra1); // Uses Inter with fallbacks
  font-weight: var(--font-weight-regular);
}

h1, h2, h3 {
  font-family: var(--font-astra2); // Uses Inter Display with fallbacks
  font-weight: var(--font-weight-bold);
}

.custom-element {
  font-family: var(--font-roboto);
  font-weight: var(--font-weight-medium);
}

Example 2: Overriding font variables for theming

:root {
  --font-astra1: 'Custom Font', var(--font-inter), sans-serif;
  --font-weight-bold: 600; // Use semi-bold instead of bold
}

Example 3: Using utility classes

<div class="font-inter font-bold">Bold Inter text</div>
<div class="font-astra1 font-medium">Medium weight text using Astra1</div>
<div class="font-roboto font-light">Light Roboto text</div>

Example 4: Inter variable font with custom weights

.custom-weight {
  font-family: var(--font-inter);
  font-weight: 450; // Custom weight between regular and medium
  font-variation-settings: 'wght' 450;
}

Example 5: Responsive font families

@media (max-width: 768px) {
  :root {
    --font-astra1: var(--font-roboto); // Switch to Roboto on mobile
  }
}
*/