/* Primary variable font definition - Modern approach */
@font-face {
  font-family: 'Roboto Flex';
  src: url('fonts/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf') format('truetype-variations');
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-style: oblique -10deg 0deg;
  font-display: swap;
}

/* Individual font-family names for compatibility with static font workflows */
@font-face {
  font-family: 'RobotoFlex-Thin';
  src: url('fonts/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'RobotoFlex-ThinItalic';
  src: url('fonts/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-variation-settings: 'slnt' -10;
  font-display: swap;
}

@font-face {
  font-family: 'RobotoFlex-Light';
  src: url('fonts/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'RobotoFlex-LightItalic';
  src: url('fonts/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-variation-settings: 'slnt' -10;
  font-display: swap;
}

@font-face {
  font-family: 'RobotoFlex-Regular';
  src: url('fonts/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'RobotoFlex-Italic';
  src: url('fonts/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-variation-settings: 'slnt' -10;
  font-display: swap;
}

@font-face {
  font-family: 'RobotoFlex-Medium';
  src: url('fonts/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'RobotoFlex-MediumItalic';
  src: url('fonts/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-variation-settings: 'slnt' -10;
  font-display: swap;
}

@font-face {
  font-family: 'RobotoFlex-SemiBold';
  src: url('fonts/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'RobotoFlex-SemiBoldItalic';
  src: url('fonts/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-variation-settings: 'slnt' -10;
  font-display: swap;
}

@font-face {
  font-family: 'RobotoFlex-Bold';
  src: url('fonts/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'RobotoFlex-BoldItalic';
  src: url('fonts/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-variation-settings: 'slnt' -10;
  font-display: swap;
}

@font-face {
  font-family: 'RobotoFlex-ExtraBold';
  src: url('fonts/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'RobotoFlex-ExtraBoldItalic';
  src: url('fonts/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
  font-variation-settings: 'slnt' -10;
  font-display: swap;
}

@font-face {
  font-family: 'RobotoFlex-Black';
  src: url('fonts/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'RobotoFlex-BlackItalic';
  src: url('fonts/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-variation-settings: 'slnt' -10;
  font-display: swap;
}

/* Utility classes - Modern variable font approach */
.rf-thin { font-family: 'Roboto Flex'; font-weight: 100; }
.rf-light { font-family: 'Roboto Flex'; font-weight: 300; }
.rf-regular { font-family: 'Roboto Flex'; font-weight: 400; }
.rf-medium { font-family: 'Roboto Flex'; font-weight: 500; }
.rf-semibold { font-family: 'Roboto Flex'; font-weight: 600; }
.rf-bold { font-family: 'Roboto Flex'; font-weight: 700; }
.rf-extrabold { font-family: 'Roboto Flex'; font-weight: 800; }
.rf-black { font-family: 'Roboto Flex'; font-weight: 900; }

/* Individual font-family utility classes - Compatibility approach */
.rf-thin-individual { font-family: 'RobotoFlex-Thin'; }
.rf-thin-italic-individual { font-family: 'RobotoFlex-ThinItalic'; }
.rf-light-individual { font-family: 'RobotoFlex-Light'; }
.rf-light-italic-individual { font-family: 'RobotoFlex-LightItalic'; }
.rf-regular-individual { font-family: 'RobotoFlex-Regular'; }
.rf-italic-individual { font-family: 'RobotoFlex-Italic'; }
.rf-medium-individual { font-family: 'RobotoFlex-Medium'; }
.rf-medium-italic-individual { font-family: 'RobotoFlex-MediumItalic'; }
.rf-semibold-individual { font-family: 'RobotoFlex-SemiBold'; }
.rf-semibold-italic-individual { font-family: 'RobotoFlex-SemiBoldItalic'; }
.rf-bold-individual { font-family: 'RobotoFlex-Bold'; }
.rf-bold-italic-individual { font-family: 'RobotoFlex-BoldItalic'; }
.rf-extrabold-individual { font-family: 'RobotoFlex-ExtraBold'; }
.rf-extrabold-italic-individual { font-family: 'RobotoFlex-ExtraBoldItalic'; }
.rf-black-individual { font-family: 'RobotoFlex-Black'; }
.rf-black-italic-individual { font-family: 'RobotoFlex-BlackItalic'; }

/* Variable font axis utilities (only work with 'Roboto Flex' family) */
.rf-condensed { font-family: 'Roboto Flex'; font-stretch: 75%; }
.rf-normal { font-family: 'Roboto Flex'; font-stretch: 100%; }
.rf-expanded { font-family: 'Roboto Flex'; font-stretch: 125%; }
.rf-slanted { 
  font-family: 'Roboto Flex'; 
  font-variation-settings: 'slnt' -10;
  font-style: oblique;
}