/* variables.css */
:root {
    --font-primary: 'Inter', Arial, Helvetica, sans-serif;
    --font-regular: 'Inter', Arial, Helvetica, sans-serif;
    --font-thin: 'Inter Thin', Arial, Helvetica, sans-serif;
    --font-thin-italic: 'Inter Thin Italic', Arial, Helvetica, sans-serif;
    --font-extra-light: 'Inter Extra Light', Arial, Helvetica, sans-serif;
    --font-extra-light-italic: 'Inter Extra Light Italic', Arial, Helvetica, sans-serif;
    --font-light: 'Inter Light', Arial, Helvetica, sans-serif;
    --font-light-italic: 'Inter Light Italic', Arial, Helvetica, sans-serif;
    --font-medium: 'Inter Medium', Arial, Helvetica, sans-serif;
    --font-medium-italic: 'Inter Medium Italic', Arial, Helvetica, sans-serif;
    --font-semi-bold: 'Inter Semi Bold', Arial, Helvetica, sans-serif;
    --font-semi-bold-italic: 'Inter Semi Bold Italic', Arial, Helvetica, sans-serif;
    --font-bold: 'Inter Bold', Arial, Helvetica, sans-serif;
    --font-bold-italic: 'Inter Bold Italic', Arial, Helvetica, sans-serif;
    --font-extra-bold: 'Inter Extra Bold', Arial, Helvetica, sans-serif;
    --font-extra-bold-italic: 'Inter Extra Bold Italic', Arial, Helvetica, sans-serif;
    --font-black: 'Inter Black', Arial, Helvetica, sans-serif;
    --font-black-italic: 'Inter Black Italic', Arial, Helvetica, sans-serif;
    --fs-hero-mega: 98px;
    --fs-display-xl: 84px;
    --fs-display-lg: 74px;
    --fs-display-md: 66px;
    --fs-display-sm: 58px;
    --fs-h1: 50px;
    --fs-h2: 38px;
    --fs-h3: 34px;
    --fs-h4: 30px;
    --fs-h5: 26px;
    --fs-xl: 24px;
    --fs-lg: 22px;
    --fs-md: 20px;
    --fs-base: 18px;
    --fs-sm: 16px;
    --fs-xs: 15px;
    --fs-xxs: 14px;
    --fs-micro: 13px;
    --fs-hero-title: clamp(32px, 5vw, var(--fs-display-lg));
    --fs-section-title: clamp(25px, 3vw, var(--fs-h3));
    --color-white: #ffffff;
    --color-white-extra-soft: #f6f6f6;
    --color-white-soft: #f2f2f2;
    --color-cream: #f8f6ef;
    --color-beige: #e8e1d4;
    --color-line: #e8e6df;
    --color-text: #20231f;
    --color-text-dark: #111111;
    --color-text-nav: #252b24;
    --color-muted: #71776b;
    --color-olive: #5f6f35;
    --color-olive-mid: #5e6c35;
    --color-olive-dark: #243621;
    --color-olive-deep: #17301f;
    --color-olive-footer: #365038;
    --color-olive-stat: #20371f;
    --color-olive-soft: #edf0e6;
    --color-olive-light: #93a960;
    --color-olive-accent: #a9b977;
    --color-overlay-black-soft: rgba(0, 0, 0, .18);
    --color-overlay-black: rgba(0, 0, 0, .45);
    --color-overlay-card: rgba(0, 0, 0, .55);
    --color-overlay-card-strong: rgba(0, 0, 0, .62);
    --color-hero-shade-dark: rgba(15, 18, 14, .82);
    --color-hero-shade-mid: rgba(15, 18, 14, .52);
    --color-hero-shade-light: rgba(15, 18, 14, .10);
    --color-valuation-overlay: rgba(32, 55, 31, .84);
    --color-white-12: rgba(255, 255, 255, .12);
    --color-white-72: rgba(255, 255, 255, .72);
    --color-white-78: rgba(255, 255, 255, .78);
    --color-white-94: rgba(255, 255, 255, .94);
    --color-white-98: rgba(255, 255, 255, .98);
    --color-olive-09: rgba(95, 111, 53, .09);
    --color-olive-12: rgba(95, 111, 53, .12);
    --color-olive-14: rgba(95, 111, 53, .14);
    --color-olive-35: rgba(95, 111, 53, .35);
    --color-error: #a83737;
    --color-error-soft: rgba(168, 55, 55, .08);
    --color-error-20: rgba(168, 55, 55, .20);
    --color-error-35: rgba(168, 55, 55, .35);
    --shadow-extra-soft: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    --shadow-soft: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    --shadow-main: 0 18px 50px rgba(25, 35, 28, .10);
    --shadow-sidebar: 20px 0 60px rgba(0, 0, 0, .18);
    --shadow-language: 0 18px 50px rgba(31, 35, 24, .14);
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 14px;
    --radius-pill: 999px;
    --radius-round: 50%;
    --container-width: 1600px;
    --container-gap: 48px;
}
@media (max-width: 1600px) {
    :root {
        --fs-hero-mega: 92px;
        --fs-display-xl: 80px;
        --fs-display-lg: 70px;
        --fs-display-md: 62px;
        --fs-display-sm: 54px;
        --fs-h1: 48px;
        --fs-h2: 37px;
        --fs-h3: 33px;
        --fs-h4: 29px;
        --fs-h5: 25px;
        --fs-xl: 23px;
        --fs-lg: 21px;
        --fs-md: 19px;
        --fs-base: 17px;
        --fs-sm: 15px;
        --fs-xs: 14px;
        --fs-xxs: 13px;
        --fs-micro: 12px;
    }
}
@media (max-width: 1366px) {
    :root {
        --fs-hero-mega: 86px;
        --fs-display-xl: 76px;
        --fs-display-lg: 66px;
        --fs-display-md: 58px;
        --fs-display-sm: 52px;
        --fs-h1: 46px;
        --fs-h2: 36px;
        --fs-h3: 32px;
        --fs-h4: 28px;
        --fs-h5: 24px;
        --fs-xl: 22px;
        --fs-lg: 20px;
        --fs-md: 18px;
        --fs-base: 17px;
        --fs-sm: 15px;
        --fs-xs: 14px;
        --fs-xxs: 13px;
        --fs-micro: 12px;
    }
}
@media (max-width: 1024px) {
    :root {
        --fs-hero-mega: 76px;
        --fs-display-xl: 68px;
        --fs-display-lg: 60px;
        --fs-display-md: 54px;
        --fs-display-sm: 48px;
        --fs-h1: 42px;
        --fs-h2: 34px;
        --fs-h3: 30px;
        --fs-h4: 27px;
        --fs-h5: 24px;
        --fs-xl: 21px;
        --fs-lg: 19px;
        --fs-md: 18px;
        --fs-base: 16px;
        --fs-sm: 15px;
        --fs-xs: 14px;
        --fs-xxs: 13px;
        --fs-micro: 12px;
    }
}
@media (max-width: 768px) {
    :root {
        --container-gap: 28px; 
        --fs-hero-mega: 62px;
        --fs-display-xl: 56px;
        --fs-display-lg: 50px;
        --fs-display-md: 46px;
        --fs-display-sm: 42px;
        --fs-h1: 38px;
        --fs-h2: 32px;
        --fs-h3: 29px;
        --fs-h4: 25px;
        --fs-h5: 23px;
        --fs-xl: 20px;
        --fs-lg: 18px;
        --fs-md: 17px;
        --fs-base: 16px;
        --fs-sm: 15px;
        --fs-xs: 14px;
        --fs-xxs: 13px;
        --fs-micro: 12px;
    }
}
@media (max-width: 575px) {
    :root {
        --fs-hero-mega: 50px;
        --fs-display-xl: 46px;
        --fs-display-lg: 42px;
        --fs-display-md: 38px;
        --fs-display-sm: 34px;
        --fs-h1: 34px;
        --fs-h2: 30px;
        --fs-h3: 26px;
        --fs-h4: 24px;
        --fs-h5: 22px;
        --fs-xl: 19px;
        --fs-lg: 18px;
        --fs-md: 17px;
        --fs-base: 16px;
        --fs-sm: 15px;
        --fs-xs: 14px;
        --fs-xxs: 13px;
        --fs-micro: 12px;
    }
}
@media (max-width: 380px) {
    :root {
        --fs-hero-mega: 42px;
        --fs-display-xl: 38px;
        --fs-display-lg: 36px;
        --fs-display-md: 32px;
        --fs-display-sm: 28px;
        --fs-h1: 30px;
        --fs-h2: 28px;
        --fs-h3: 24px;
        --fs-h4: 22px;
        --fs-h5: 20px;
        --fs-xl: 18px;
        --fs-lg: 17px;
        --fs-md: 16px;
        --fs-base: 15px;
        --fs-sm: 14px;
        --fs-xs: 13px;
        --fs-xxs: 12px;
        --fs-micro: 11px;
    }
}