/*
  BREAKPOINT SCALE
  xs:  < 375px   (base styles, no query needed)
  sm:  375px+
  md:  768px+
  lg:  1024px+
  xl:  1440px+
  2xl: 2000px+

  Use: (min-width: Npx) and (max-width: M-1px) for bounded ranges.
  Exception: 2xl uses min-width only (open-ended).
*/

/* ===========================
   BASE VARIABLES (MOBILE-FIRST)
   =========================== */

:root {
    /* Typography families */
    --font-heading: "Fjalla One", sans-serif;
    --font-body: "Roboto", system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    /* Text colors */
    --text-color-primary: #003934;
    --text-color-emphasis: #AA1717;
    --text-color-footer: #ffffff;

    /* Page color */
    --page-color-primary: #ffffff;

    /* Module colors background */
    --bg-module-white: #ffffff;
    --bg-module-grey: #EDEDED;
    --bg-module-black: #000000;
    --bg-module-light-blue: #e4f2fe;
    --bg-module-gradient-aqua-moderate: linear-gradient(135deg, #e0faff 0%, #b6edf9 50%, #49d3f2 100%);
    --bg-module-gradient-green-moderate: linear-gradient(135deg, #def7e7 0%, #c0eacb 50%, #93d9a5 100%);
    --bg-module-gradient-purple-moderate: linear-gradient(135deg, #e3e9ff 0%, #b7c7ff 50%, #88abf2 100%);
    --bg-module-gradient-red-moderate: linear-gradient(135deg, #fdeeee 0%, #f6caca 50%, #ee8f8f 100%);
    --bg-footer: #000000;
    --bg-linkedin-blue: #0761c1;

    /* CTA colors background */
    --bg-primary-cta: #000000;
    --color-primary-cta-text: #ffffff;
    --color-secondary-cta-text: rgb(255, 255, 255);

    /* Card colors */
    --bg-card-off-white: rgba(255, 255, 255, 0.05);
    --border-card-white: #ffffff;

    /* Semantic aliases (fixes previously-undefined variable bugs) */
    --accent: var(--text-color-primary);
    --color-page-bg: var(--page-color-primary);

    /* Spacing */
    --container-gap: 1.5rem;
    --page-margin: 0rem;
    --page-padding: 1rem;
    --card-padding: 1.5rem;
    --module-padding: 3rem;
    --header-padding: 1rem 2rem;

    /* Radius scale */
    --radius-sm: 0.4rem;
    --radius-md: 0.8rem;
    --radius-lg: 1.6rem;

    /* Border */
    --border-subtle: 1px solid rgba(0, 0, 0, 0.14);

    /* Spacing scale */
    --space-xs: 0.4rem;
    --space-sm: 0.8rem;
    --space-md: 1.6rem;
    --space-lg: 2.4rem;
    --space-xl: 3.2rem;

    /* Font sizes (mobile baseline) */
    --fs-h1: 2.8rem;
    --fs-h2: 2.0rem;
    --fs-h3: 1.6rem;
    --fs-body: 1.6rem;
    --fs-cta: 2.2rem;
    --fs-card-heading: 1.8rem;
    --fs-card-subheading: 2rem;

    /* Line heights - scaling multipliers */
    --lh-tight: 1.15;
    --lh-body: 1.55;

    /* SwiperJS pagination spacing */
    --swiper-pagination-bottom: 0px;

    /* Img sizes */
    --img-logo-header-height: 3rem;

    /* Sticky header anchor link placement */
    --sticky-header-offset: 5rem;
}

/* ===========================
   RESPONSIVE VARIABLE OVERRIDES
   =========================== */

/* XS MOBILE: < 375px */
@media (min-width: 320px) and (max-width: 374px) {
    :root {
        --carousel-card-padding: 1.6rem;
        --module-padding: 1rem;
        --fs-card-heading: 1.6rem;
        --fs-card-subheading: 1.4rem;
    }
}

/* MOBILE: 375px - 767px */
@media (min-width: 375px) and (max-width: 767px) {
    :root {
        /* Spacing */
        --page-margin: 0rem;
        --page-padding: 1rem;
        --card-padding: 0.75rem;
        --carousel-card-padding: 1.6rem;
        --hero-padding: 2rem 0.5rem 1.2rem 0.5rem;
        --module-padding: 0.5rem;
        --header-padding: 1rem 2rem;
        --pagination-padding: 0.4rem;

        /* Font sizes */
        --fs-h1: 4.2rem;
        --fs-h2: 2.8rem;
        --fs-h3: 1.8rem;
        --fs-body: 1.4rem;
        --fs-cta: 2.0rem;
        --fs-card-heading: 1.6rem;
        --fs-card-subheading: 1.5rem;
        --fs-eyebrow: 0.9rem;

        /* Img sizes */
        --img-logo-header-height: 3rem;
    }
}

/* TABLET: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        /* Spacing */
        --page-padding: 1rem 2rem;
        --card-padding: 1rem;
        --carousel-card-padding: 2rem;
        --module-padding: 2rem;
        --header-padding: 1rem 4rem;

        /* Font sizes */
        --fs-h1: 4.2rem;
        --fs-h2: 3.0rem;
        --fs-h3: 2.0rem;
        --fs-body: 1.5rem;
        --fs-cta: 2.2rem;
        --fs-card-heading: 2rem;
        --fs-card-subheading: 1.6rem;
        --fs-eyebrow: 1rem;

        /* Img sizes */
        --img-logo-header-height: 5rem;

        /* SwiperJS pagination spacing */
        --swiper-pagination-bottom: 5px;
    }
}

/* LAPTOP: 1024px - 1439px */
@media (min-width: 1024px) and (max-width: 1439px) {
    :root {
        /* Spacing */
        --page-padding: 4rem 4rem;
        --card-padding: 1rem;
        --carousel-card-padding: 2.2rem;
        --header-padding: 1rem 6rem;

        /* Font sizes */
        --fs-h1: 5.0rem;
        --fs-h2: 3.8rem;
        --fs-h3: 2.8rem;
        --fs-body: 1.7rem;
        --fs-cta: 2.4rem;
        --fs-card-heading: 2.6rem;
        --fs-card-subheading: 1.8rem;
        --fs-eyebrow: 1.1rem;

        /* SwiperJS pagination spacing */
        --swiper-pagination-bottom: 1px;

        /* Img sizes */
        --img-logo-header-height: 6rem;
    }
}

/* MONITOR: 1440px - 1999px */
@media (min-width: 1440px) and (max-width: 1999px) {
    :root {
        /* Spacing */
        --page-padding: 2rem 6rem;
        --card-padding: 1rem;
        --carousel-card-padding: 2.4rem;
        --header-padding: 1rem 8rem;
        --header-margin: 0rem 50rem 0rem 50rem;
        --footer-margin: 0rem 6rem 0rem 6rem;

        /* Font sizes */
        --fs-h1: 6.2rem;
        --fs-h2: 5.0rem;
        --fs-h3: 4.0rem;
        --fs-body: 1.8rem;
        --fs-cta: 3.0rem;
        --fs-card-heading: 3.2rem;
        --fs-card-subheading: 2rem;
        --fs-eyebrow: 1.3rem;

        /* Img sizes */
        --img-logo-header-height: 7rem;

        /* SwiperJS pagination spacing */
        --swiper-pagination-bottom: 3px;

        /* Sticky header anchor link placement */
        --sticky-header-offset: 5.5rem;
    }
}

/* XL MONITOR: 2000px+ */
@media (min-width: 2000px) {
    :root {
        /* Spacing */
        --page-padding: 4rem 50rem;
        --card-padding: 1rem;
        --carousel-card-padding: 3rem;
        --header-padding: 1rem 2rem 1rem 2rem;
        --header-margin: 0rem 50rem 0rem 50rem;
        --footer-margin: 0rem 50rem 0rem 50rem;

        /* Font sizes */
        --fs-h1: 6.2rem;
        --fs-h2: 5.0rem;
        --fs-h3: 4.0rem;
        --fs-body: 2.1rem;
        --fs-cta: 3.0rem;
        --fs-card-heading: 4rem;
        --fs-card-subheading: 2.5rem;
        --fs-eyebrow: 2.0rem;

        /* Img sizes */
        --img-logo-header-height: 8.5rem;

        /* Sticky header anchor link placement */
        --sticky-header-offset: 6.5rem;
    }
}