@use "../../../twig-parent/scss/utils/breakpoints" as media;
@use "../../../twig-parent/scss/utils/functions" as fn;

:root {

    --padding-inline: 1rem;
    --spacer-body: 1.85rem;
    --spacer-body-large: 2rem;
    --spacer-body-small: .85rem;

    // mobile sizes, not currently in use
    --content-max-width: 20.75rem;
    --popout-max-width: 20.75rem;
    --breakout-max-width: 23.125rem;

    // full design sizes
    --desktop-content-max-width: 46.875rem;
    --desktop-popout-max-width: 56.25rem;
    --desktop-breakout-max-width: 79.5rem;

    --color-rtc-fresh-sneakers-beige: #F2EBCD;
    --color-rtc-beige-light: #FBF9F0;
    --color-rtc-get-moving-green: #BCD11B;
    --color-rtc-get-moving-green-hover: #CFE32F;
    --color-rtc-growing-moss: #5B8036;
    --color-rtc-deep-forest: #214004;
    --color-rtc-trail-rock: #041D0F;
    --color-rtc-recycled-gray: #F4F2EF;
    --color-rtc-paper-white: #FFFFFF;
    --color-rtc-city-walkway-concrete: #CAC4B7;
    --color-rtc-bicycle-steel: #454738;
    --color-rtc-sunset-red: #FE6035;
    --color-rtc-sporty-ochre: #E0A103;
    --color-rtc-be-active-orange: #F1C32D;
    --color-rtc-happy-day-yellow: #FFED23;
    --color-rtc-morning-blue: #86E7B7;
    --color-rtc-river-teal: #079C91;

    --color-rtc-background: var(--color-rtc-deep-forest);
    --color-rtc-background-light: var(--color-rtc-beige-light);

    --color-link: var(--color-rtc-trail-rock);
    --color-link-hover: var(--color-rtc-growing-moss);

    // overrides
    --color-twp-cream: var(--color-rtc-recycled-gray);
    --color-twp-yellow: var(--color-rtc-happy-day-yellow);

    --ff-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;

    // Headings
    --ff-headings: 'Beiko', var(--ff-sans);
    --ff-headings-case: none;
    --ff-headings-color: var(--color-rtc-deep-forest);
    --ff-headings-weight: 800;

    --ff-headings-italic: 'Beiko', var(--ff-sans);

    // Body
    --ff-body: 'Figtree', var(--ff-sans);
    --ff-body-bold: 'Figtree', var(--ff-sans);
    --ff-body-bold-weight: 700;
    --ff-body-italic: 'Figtree', var(--ff-sans);
    --ff-body-bold-italic: 'Figtree', var(--ff-sans);
    --ff-body-bold-italic-weight: 700;

    // Titles, Subheadings, Captions, Learn More
    --ff-title: var(--ff-body-bold);
    --ff-title-color: var(--color-rtc-trail-rock);
    --ff-title-weight: var(--ff-body-bold-weight);

    // Font settings
    // using the sass rem() function must be wrapped in #{} for css variables
    --ff-body-font-size: 1.125rem;
    --ff-body-line-height: 1.61em;

    --ff-h1-size: 3.375rem;
    --ff-h1-line-height: 1.33em;
    --ff-h1-font-weight: normal;

    --ff-h2-size: 2.5rem;
    --ff-h2-line-height: 1.375em;
    --ff-h2-font-weight: normal;

    --ff-h3-size: 1.875rem;
    --ff-h3-line-height: 1.4em;
    --ff-h3-font-weight: normal;

    --ff-h4-size: 1.5rem;
    --ff-h4-line-height: 1.69em;
    --ff-h4-font-weight: normal;

    --ff-h5-size: #{fn.rem(20)};
    --ff-h5-line-height: 1.55em;
    --ff-h5-font-weight: normal;

    --ff-h6-size: #{fn.rem(18)};
    --ff-h6-line-height: 1.88em;
    --ff-h6-font-weight: normal;

    --rtc-border-radius-sm: 0.3125rem;
    --rtc-border-radius-md: 0.5rem;
    --rtc-border-radius-lg: 0.75rem;

   /*  @include media.breakpoint-between(md, ml) {

        // account for sizing discrepancy for 1440px design when resizing
        --content-max-width:  calc(var(--desktop-content-max-width) * .85 );
        --popout-max-width:   calc(var(--desktop-popout-max-width) * .85 );
        --breakout-max-width: calc(var(--desktop-breakout-max-width) * .85 );

    } */

    @include media.breakpoint-up(md) {

        --padding-inline: 2rem;
        --spacer-body: clamp(1.85rem,3vw,3rem);
        --spacer-body-small: clamp(.85rem,2vw,3rem);
        --spacer-body-large: clamp(2rem,3.5vw,4.5rem);

        --ff-h1-size: clamp(3.375rem,7vw,6rem);
        --ff-h2-size: clamp(2.5rem,5vw,4rem);
        --ff-h3-size: clamp(1.875rem,3.5vw,2.5rem);
        --ff-h4-size: clamp(1.5rem,2vw,1.625rem);
        --ff-h5-size: #{fn.rem(22)};
        --ff-h6-size: #{fn.rem(18)};


        // full desktop size
        --content-max-width: var(--desktop-content-max-width);
        --popout-max-width:  var(--desktop-popout-max-width);
        --breakout-max-width:var(--desktop-breakout-max-width);

    }

    /* @include media.breakpoint-up(ml) {

        // full desktop size
        --content-max-width: var(--desktop-content-max-width);
        --popout-max-width:  var(--desktop-popout-max-width);
        --breakout-max-width:var(--desktop-breakout-max-width);

    } */

    // multisitehome-template-default is the subsite template
    body:is(.multisitehome-template-default, .interior-template-default) {
        // Body
        --color-rtc-background: var(--color-rtc-bicycle-steel);
        --color-rtc-background-light: var(--color-rtc-recycled-gray);
        // These are all just stepped down one size from those in twig-parent. The only one I'm sure about is the h1 from multisite hero design
        --ff-h1-size: #{fn.rem(64)};
        --ff-h2-size: #{fn.rem(40)};
        --ff-h3-size: #{fn.rem(26)};
        --ff-h4-size: #{fn.rem(22)};
        --ff-h5-size: #{fn.rem(18)};
        --ff-h6-size: #{fn.rem(16)};
    }
}