@font-face {
    font-family: "Inter-Lighter";
    src: url('fonts/Inter-ExtraLight.ttf') format('truetype');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter-Light";
    src: url('fonts/Inter-Light.ttf') format('truetype');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter-Normal";
    src: url('fonts/Inter-Regular.ttf') format('truetype');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter-Bold";
    src: url('fonts/Inter-Bold.ttf') format('truetype');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter-Bolder";
    src: url('fonts/Inter-ExtraBold.ttf') format('truetype');
    font-weight: normal;
    font-display: swap;
}

/* One "Inter" family with real weights, used by Fluent components (they ask for 400 / 600 / 700) */
@font-face {
    font-family: "Inter";
    src: url('fonts/Inter-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url('fonts/Inter-Light.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url('fonts/Inter-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url('fonts/Inter-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url('fonts/Inter-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-display: swap;
}

:root {
    --font-lighter: 'Inter-Lighter', sans-serif;
    --font-light: 'Inter-Light', sans-serif;
    --font-normal: 'Inter-Normal', sans-serif;
    --font-bold: 'Inter-Bold', sans-serif;
    --font-bolder: 'Inter-Bolder', sans-serif;
    /* Fluent UI v5 components read their font from this token (overrides the theme's Segoe UI) */
    --fontFamilyBase: 'Inter', Arial, sans-serif;
}

body {
    font-family: var(--font-normal);
}

.ligher {
    font-family: var(--font-lighter) !important;
}

.light {
    font-family: var(--font-light) !important;
}

.bold {
    font-family: var(--font-bold) !important;
}

.bolder {
    font-family: var(--font-bolder) !important;
}


/*--------------------------------------------------------------------------------------------------------------------
 *     TEXT SIZES:
 *-------------------------------------------------------------------------------------------------------------------*/


h1, h2, h3, h4, h5, h6, p, span {
    font-weight: normal;
    line-height: 120%!important;
    margin: 0;
}

/* Fluid heading scale — smooth linear scaling from 320px to 1280px viewport.
   Min values match previous mobile sizes; max values match previous desktop sizes.
   Formula: clamp(min, slope*vw + intercept, max)
   where slope = (max - min) / (1280 - 320) * 100 */

h1 { font-size: clamp(2.5rem,  4.17vw + 1.67rem, 5rem)    !important; }
h2 { font-size: clamp(2.25rem, 2.92vw + 1.67rem, 4rem)    !important; }
h3 { font-size: clamp(2rem,    1.67vw + 1.67rem, 3rem)    !important; }
h4 { font-size: clamp(1.75rem, 1.25vw + 1.5rem,  2.5rem)  !important; }
h5 { font-size: clamp(1.5rem,  0.83vw + 1.33rem, 2rem)    !important; }
h6 { font-size: clamp(1.25rem, 0.42vw + 1.17rem, 1.5rem)  !important; }
p  { font-size: clamp(1rem,    0.17vw + 0.97rem,  1.1rem)  !important; }

button { font-size: 1rem !important; }