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

:root {
    /* Colors */
    --color-primary: #003E76;
    --color-secondary: #2795BD;
    --color-tertiary: #021F38;
    --color-quaternary: #176683;

    --color-accent: #565655;

    --color-hover: #D5D7DB;

    --color-background: #F7F4F4;
    --color-background-hover: #0000001e;

    --color-text: #0C0C0C;
    --color-white: #fff;

    /* Spacing */
    --spacing-xxs: 0.25rem;
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 2.5rem;
    --spacing-xxxl: 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(1.5rem, 5vw, 2rem);
    --fs-subtitle: clamp(1.25rem, 4vw, 1.5rem);
    --fs-title-section: clamp(1rem, 3vw, 1.25rem);
    --fs-button: clamp(1rem, 2.5vw, 1.125rem);
    --fs-text: clamp(0.875rem, 2vw, 1rem);
    --fs-subtext: clamp(0.75rem, 1.5vw, 0.875rem);

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