/* ==========================================================
   BILITON PUBLIC DESIGN SYSTEM
   FOUNDATION V21.2.85

   Design tokens only.
   This file must NOT change existing page visuals by itself.
   ========================================================== */

:root {

    /* ------------------------------------------------------
       BRAND
       ------------------------------------------------------ */

    --blt-ds-navy-950: #071f2d;
    --blt-ds-navy-900: #071f33;
    --blt-ds-navy-800: #0b2d3c;
    --blt-ds-navy-700: #123f50;

    --blt-ds-orange-600: #ef7d00;
    --blt-ds-orange-500: #f47a12;

    --blt-ds-white: #ffffff;
    --blt-ds-ink: #10212a;
    --blt-ds-muted: #65757c;
    --blt-ds-line: #dce4e9;
    --blt-ds-soft: #f4f7f9;


    /* ------------------------------------------------------
       TYPOGRAPHY
       ------------------------------------------------------ */

    --blt-ds-font:
        Arial,
        Helvetica,
        sans-serif;

    --blt-ds-text-xs: 12px;
    --blt-ds-text-sm: 14px;
    --blt-ds-text-md: 16px;
    --blt-ds-text-lg: 18px;
    --blt-ds-text-xl: 20px;

    --blt-ds-h1:
        clamp(34px, 4vw, 52px);

    --blt-ds-h2:
        clamp(30px, 3.5vw, 46px);

    --blt-ds-h3:
        clamp(20px, 2vw, 26px);

    --blt-ds-line-tight: 1.08;
    --blt-ds-line-heading: 1.15;
    --blt-ds-line-body: 1.65;


    /* ------------------------------------------------------
       SPACING SCALE
       Only these values should be used by new components.
       ------------------------------------------------------ */

    --blt-ds-space-1: 4px;
    --blt-ds-space-2: 8px;
    --blt-ds-space-3: 12px;
    --blt-ds-space-4: 16px;
    --blt-ds-space-5: 24px;
    --blt-ds-space-6: 32px;
    --blt-ds-space-7: 40px;
    --blt-ds-space-8: 48px;
    --blt-ds-space-9: 60px;
    --blt-ds-space-10: 72px;


    /* ------------------------------------------------------
       LAYOUT
       ------------------------------------------------------ */

    --blt-ds-shell-max: 1320px;
    --blt-ds-content-max: 1180px;
    --blt-ds-copy-max: 760px;

    --blt-ds-gutter-desktop: 20px;
    --blt-ds-gutter-mobile: 14px;

    --blt-ds-shell:
        min(
            var(--blt-ds-shell-max),
            calc(100% - (var(--blt-ds-gutter-desktop) * 2))
        );

    --blt-ds-container:
        min(
            var(--blt-ds-content-max),
            calc(100% - (var(--blt-ds-gutter-desktop) * 2))
        );


    /* ------------------------------------------------------
       SECTION RHYTHM
       ------------------------------------------------------ */

    --blt-ds-section-y: 60px;
    --blt-ds-section-y-compact: 48px;
    --blt-ds-section-y-mobile: 40px;

    --blt-ds-heading-kicker-gap: 12px;
    --blt-ds-heading-copy-gap: 16px;
    --blt-ds-heading-content-gap: 32px;


    /* ------------------------------------------------------
       HERO RHYTHM
       ------------------------------------------------------ */

    --blt-ds-hero-breadcrumb-gap: 24px;
    --blt-ds-hero-kicker-gap: 10px;
    --blt-ds-hero-lead-gap: 18px;
    --blt-ds-hero-actions-gap: 24px;
    --blt-ds-hero-proof-gap: 24px;


    /* ------------------------------------------------------
       COMPONENT GEOMETRY
       ------------------------------------------------------ */

    --blt-ds-radius-sm: 5px;
    --blt-ds-radius-md: 8px;
    --blt-ds-radius-lg: 12px;

    --blt-ds-border: 1px solid var(--blt-ds-line);

    --blt-ds-shadow-sm:
        0 8px 24px rgba(7, 31, 45, .06);

    --blt-ds-shadow-md:
        0 14px 35px rgba(7, 31, 45, .09);

    --blt-ds-transition:
        180ms ease;
}


@media (max-width: 700px) {

    :root {
        --blt-ds-shell:
            min(
                var(--blt-ds-shell-max),
                calc(100% - (var(--blt-ds-gutter-mobile) * 2))
            );

        --blt-ds-container:
            min(
                var(--blt-ds-content-max),
                calc(100% - (var(--blt-ds-gutter-mobile) * 2))
            );

        --blt-ds-hero-breadcrumb-gap: 18px;
        --blt-ds-hero-kicker-gap: 8px;
        --blt-ds-hero-lead-gap: 16px;
        --blt-ds-hero-actions-gap: 20px;
        --blt-ds-hero-proof-gap: 20px;
    }

}

/* BILITON_DESIGN_SYSTEM_FOUNDATION_V21_2_85 */