/* design-tokens-base.css — Shared structural tokens (distributed to all sites) */

:root {
    --font-family-header: 'Poppins', sans-serif;
    --font-family-paragraph: 'Poppins', sans-serif;
    --font-family-caption: 'Poppins', sans-serif;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --font-size-h1: 44px;
    --font-size-h2: 38px;
    --font-size-h3: 34px;
    --font-size-h4: 22px;
    --font-size-h5: 20px;
    --font-size-h6: 16px;
    --font-size-h7: 13px;
    --font-size-p1-large: 15px;
    --font-size-p2-base: 14px;
    --font-size-p3-caption: 11px;
    --font-size-p4-caption: 9px;
    --font-size-button: 12px;

    --letter-xs: -1%;
    --letter-sm: 0%;
    --letter-md: 2%;
    --letter-lg: 4%;
    --letter-xl: 6%;

    --op-0: 0;
    --op-25: 0.25;
    --op-50: 0.5;
    --op-75: 0.75;
    --op-100: 1;

    --line-height-h1: 67px;
    --line-height-h2: 52px;
    --line-height-h3: 41px;
    --line-height-h4: 35px;
    --line-height-h5: 26px;
    --line-height-h6: 23px;
    --line-height-h7: 17px;
    --line-height-p1-large: 27px;
    --line-height-p2-base: 21px;
    --line-height-p3-caption: 17px;
    --line-height-p4-caption: 14px;
    --line-height-button: 17px;

    --spacing-0: 0px;
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-7: 28px;
    --spacing-8: 32px;
    --spacing-9: 36px;
    --spacing-10: 40px;
    --spacing-11: 44px;
    --spacing-12: 48px;
    --spacing-13: 52px;
    --spacing-14: 56px;
    --spacing-15: 60px;
    --spacing-16: 64px;
    --spacing-17: 68px;
    --spacing-18: 72px;
    --spacing-19: 76px;
    --spacing-20: 80px;
    --spacing-21: 84px;
    --spacing-22: 88px;
    --spacing-23: 92px;
    --spacing-24: 96px;
    --spacing-25: 100px;

    --spacing-card-padding: var(--spacing-5);
    --spacing-section-padding: var(--spacing-12);
    --spacing-button-padding-x: var(--spacing-6);
    --spacing-button-padding-y: var(--spacing-3);

    --radius-none: 0px;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 24px;
    --radius-full: 9999px;

    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 3px;
    --border-width-heavy: 4px;

    --shadow-none: none;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.15);
    --shadow-button: 0 4px 14px rgba(0, 0, 0, 0.1);
    --shadow-glow: 0 0 20px var(--color-glow);

    --breakpoint-mobile-max: 767px;
    --breakpoint-tablet-min: 768px;
    --breakpoint-tablet-max: 1279px;
    --breakpoint-desktop-min: 1280px;
    --breakpoint-desktop-max: 1439px;
    --breakpoint-wide-min: 1440px;
}

@media (min-width: 768px) {
    :root {
        --font-size-h1: 48px;
        --font-size-h2: 42px;
        --font-size-h3: 36px;
        --font-size-h4: 24px;
        --font-size-h5: 22px;
        --font-size-h6: 18px;
        --font-size-h7: 14px;
        --font-size-p1-large: 16px;
        --font-size-p2-base: 15px;
        --font-size-p3-caption: 12px;
        --font-size-button: 14px;

        --line-height-h1: 69px;
        --line-height-h2: 55px;
        --line-height-h3: 45px;
        --line-height-h4: 38px;
        --line-height-h5: 30px;
        --line-height-h6: 25px;
        --line-height-h7: 19px;
        --line-height-p1-large: 29px;
        --line-height-p2-base: 27px;
        --line-height-p3-caption: 18px;
        --line-height-p4-caption: 15px;
        --line-height-button: 19px;
    }
}

@media (min-width: 1280px) {
    :root {
        --font-size-h1: 62px;
        --font-size-h2: 48px;
        --font-size-h3: 38px;
        --font-size-h4: 30px;
        --font-size-h5: 24px;
        --font-size-h6: 20px;
        --font-size-h7: 16px;
        --font-size-p1-large: 18px;
        --font-size-p2-base: 16px;
        --font-size-p3-caption: 13px;
        --font-size-button: 16px;

        --line-height-h1: 73px;
        --line-height-h2: 59px;
        --line-height-h3: 47px;
        --line-height-h4: 41px;
        --line-height-h5: 33px;
        --line-height-h6: 26px;
        --line-height-h7: 20px;
        --line-height-p1-large: 30px;
        --line-height-p2-base: 24px;
        --line-height-p3-caption: 20px;
        --line-height-p4-caption: 16px;
        --line-height-button: 20px;
    }
}