@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /* Colors */
    --color-primary: #154983;
    --color-secondary: #803233;
    --color-tertiary: #18314E;

    --color-hover: #D3E4F8;

    --color-bg: #F7F7F7;

    --color-text: #101010;
    --color-white: #FBFBFF;

    /* Spacing */
    --spacing-xxs: 0.25rem;
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 2.5rem;
    --spacing-3xl: 3rem;
    --spacing-4xl: 3.5rem;

    --spacing-half: 50%;
    --spacing-full: 100%;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 5rem;

    /* Font Weight */
    --fw-thin: 200;
    --fw-normal: 400;
    --fw-semibold: 500;
    --fw-bold: 700;

    /* Font Size */
    --fs-title: clamp(2.25rem, 1.4648rem + 3.3803vw, 4.5rem);
    --fs-subtitle: clamp(1.875rem, 1.3359rem + 2.3239vw, 3.125rem);
    --fs-title-section: clamp(1.625rem, 1.1914rem + 1.8662vw, 2.5rem);
    --fs-button: clamp(1.375rem, 1.0352rem + 1.4648vw, 2rem);
    --fs-subtext: clamp(1.25rem, 0.9219rem + 0.6056vw, 1.5rem);
    --fs-text: 16px;

    /* Font Family */
    --ff-title: 'Roboto Condensed', 'sans-serif';
    --ff-subtitle: 'Roboto flex', 'sans-serif';
    --ff-text: 'Roboto', 'sans-serif';
    --ff-button: 'Roboto flex', 'sans-serif';
}