:root {
    /* -- colors -- */
    --color-primary: #376f91;
    --color-primary-dark: #183242;
    --color-primary-light: #e3f9ff;
    --color-secondary: #294359;
    --color-secondary-dark: #0f2e5e;
    --color-secondary-light: #6a8cc0;
    --color-accent: #fc92a1;
    --color-accent-dark: #994b56;
    --color-white: #ffffff;
    --color-text-main: #2c3e50;
    --color-text-sub: #5e5e5e;
    --shadow-primary: -3px 4px 8px rgba(0, 0, 0, 0.1);
    --background-color: rgba(255,255,255,0.4);
    --gray: #efefef;
    /* -- fonts -- */
    --font-family-main: 'Vazir-Light';
    --font-family-title: 'SlimSansSerif';
    --font-size-6sm: 0.7rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-text: 1.1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 3rem;
    --font-weight-regular: 400;
    --font-weight-medium: 600;
    --font-weight-bold: 700;
    /* -- animation -- */

    --default-transition: all 0.4s ease;
    --float-animation: float 6s ease-in-out infinite;
    /* -- container -- */
    --background-blur: blur(10px);
    --container-padding: 4rem;
    --card-padding: 1rem;
    --section-content-gap: 3rem;
    --radius-pill: 2rem;
    --border: 2px solid var(--gray);
}

@media (max-width: 992px) {
    :root {
        --container-padding: 2rem;
        --section-content-gap: 2rem;
        --font-size-xs: 0.7rem;
        --font-size-sm: 0.75rem;
        --font-size-md: 0.875rem;
        --font-size-text: 1rem;
        --font-size-lg: 1.1rem;
        --font-size-xl: 1.25rem;
        --font-size-2xl: 1.5rem;
        --font-size-3xl: 2rem;
    }
}


@media (max-width: 567px) {
    :root {
        --container-padding: 1rem;
        --section-content-gap: 1rem;
        --font-size-sm: 0.7rem;
        --font-size-md: 0.75rem;
        --font-size-text: 0.875rem;
        --font-size-lg: 1rem;
        --font-size-xl: 1.1rem;
        --font-size-2xl: 1.25rem;
        --font-size-3xl: 1.5rem;
    }
}