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

:root{
    /* Max widths */
    --max-width-section: 1200px;

    /* Colors */
    --primary-color: #0b0f17;
    --secondary-color: #121924;
    --card-color: #1A2330;
    --border-color: #35414F;
    --accent-color: #f97316;
    --accent-color-dark: #ca560d;
    --header-bg-color: #070a10;
    --footer-bg-color: #070a10;
    --heading-color: #e5e7eb;
    --text-color: #9ca3af;
    --btn-color: #0b0f17;
    --active-color: #e5e7eb;

    /* Spacing */
    --btn-padding-vertical: .75rem;
    --btn-padding-horizontal: 2rem;
    --header-padding-vertical: 20px;
    --spacing-between: 80px;
    --spacing-elements-vertical: 20px;
    --spacing-elements-horizontal: 20px;
    --spacing-footer-vertical: 20px;
    --spacing-footer-horizontal: 80px;
    --padding-elements: 40px;
    --padding-content: 2rem;

    /* Borders */
    --btn-border-width: 2px;
    --btn-border-radius: 300px;
    --footer-border: 2px;
    --default-radius: 10px;

    /* Font */
    --font-heading: "Sora", sans-serif;
    --font-default: "Inter", sans-serif;
    --h1-size: 48px;
    --h1-weight: 600;
    --h2-size: 42px;
    --h2-weight: 600;
    --h3-size: 28px;
    --h3-weight: 500;
    --lead-paragraph-size: 22px;
    --lead-paragraph-weight: 400;
    --body-text-size: 18px;
    --body-text-weight: 400;
    --footer-text-size: 16px;
    --footer-text-weight: 400;
    --paragraph-line-height: 1.7;

    /* Font weights */
    --btn-weight: 600;
    --accent-text-weight: 500;
    --section-number-weight: 800;

    /* Other */
    --transition-time: .25s;
    --transition-displace: 5px;
}

@media (max-width: 768px) {
    :root {
        --h1-size: 36px;
        --h2-size: 30px;
        --h3-size: 24px;

        --lead-paragraph-size: 19px;

        --body-text-size: 16px;
        --footer-text-size: 15px;

        --paragraph-line-height: 1.6;
        --padding-elements: 20px;
        --spacing-between: 40px;
        
    }
}