/* ==========================================================================
   COLORS
   ========================================================================== */

:root {
    /* Colors */
    --brand-primary-dark: #001E5A;
    --brand-primary-bright: #FF7D00;

    --brand-secondary: #193C78;
    --brand-secondary-2: #8AA2CC;
    --brand-secondary-3: #DEE1E8;

    --brand-success: #16C35F;
    --brand-warning: #FFAE00;
    --brand-error: #EA3636;

    --color-text: #111827;
    --color-background: #FFFFFF;
    --color-white: #FFFFFF;
    --color-black: #000000;


    /* Typography */
    --font-family-primary: "Swiza", sans-serif;

    --font-weight-thin: 100;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Font sizes */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: max(14px, 1rem); /* body copy never below 14px on small laptops */
    --font-size-lg: 1.125rem;

    --font-size-h1: 5rem;
    --font-size-h2: 3.5rem;
    --font-size-h3: 2.5rem;
    --font-size-h4: 2rem;

    /* Line heights */
    --line-height-body: 1.6;
    --line-height-heading: 1.1;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 3rem;
    --space-xl: 5rem;


    /* Layout */
    --container-width: 90rem;

    /* One shared left/right line for header, banners and page content
       (F12 grid: logo, banner arrow and page titles start on the same line).
       Same values the banner and content layout already used. */
    --page-max: 1440px;
    /* Home page header + hero only (Figma "widescreen" frame: logo and text
       80px from the edge at 1920px, instead of the 1440px page frame). */
    --page-max-wide: 1888px;
    --page-gutter: 4rem;
    --header-height: 7.6875rem;
    --header-height-scrolled: 4.5rem;


    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0,0,0,.08);

    /* Animation */
    --transition-fast: .2s;
    --transition-normal: .4s;
    --transition-slow: .8s;

    /* Z-index */
    --z-header: 100;
    --z-menu: 500;
    --z-modal: 1000;
}

/* ==========================================================================
   FLUID DESKTOP SCALE
   The desktop layout was designed on a 1920px-wide canvas and almost every
   size in the theme is in rem. On laptops with OS display scaling (e.g. a
   1920x1200 panel at 125% = 1536px CSS viewport, or 150% = 1280px) that
   meant everything rendered at "1920 size" in a much smaller viewport - the
   reason it only looked right at 80% browser zoom.
   Scaling the root font size with the viewport keeps the design's
   proportions: 16px at >= 1920px wide (and >= 900px tall), 12.8px at 1536px
   (== the old "80% zoom" look), with a floor so text never gets tiny.
   Height is taken into account too, so short laptop screens don't push the
   hero content below the fold. Expressed in rem (not px) so a visitor's own
   browser font-size setting is still respected. Phones (<= 768px) keep the
   normal 16px base; the 769-960px tablet band (desktop hero + mobile
   header) gets a gentler scale so the mobile header doesn't shrink too far.
   ========================================================================== */
@media (min-width: 769px) and (max-width: 960px) {
    html {
        font-size: clamp(0.8125rem, 1.6vw, 1rem);
    }
}

@media (min-width: 961px) {
    html {
        font-size: clamp(0.6875rem, min(0.8333vw, 1.7778vh), 1rem);
    }
}