@font-face {
  font-family: 'Fredoka';
  src: url('/fonts/Fredoka/Fredoka-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root{
    --font-family: 'Poppins', sans-serif;
    --font-family-buttons: 'Manrope', var(--font-family);
    --font-family-logo: 'Fredoka', 'Manrope', var(--font-family);
}

:root {


    /*==========================================================
        Font Sizes
    ==========================================================*/

    --font-size-vs: .75rem;
    --font-size-small: .9rem;
    --font-size-sm: .9rem;
    --font-size-body: 1rem;
    --font-size-large: 1.2rem;
    --font-size-lg: 1.2rem;
    --font-size-xl: 1.6rem;

    .font-size-vs { font-size: var(--font-size-vs); }
    .font-size-small { font-size: var(--font-size-small); }
    .font-size-sm { font-size: var(--font-size-sm); }
    .font-size-body { font-size: var(--font-size-body); }
    .font-size-large { font-size: var(--font-size-large); }
    .font-size-lg { font-size: var(--font-size-lg); }
    .font-size-xl { font-size: var(--font-size-xl); }

    --font-size-1: 0.6rem;
    --font-size-2: 0.75rem;
    --font-size-3: 0.9rem;
    --font-size-4: 1.0rem;
    --font-size-5: 1.4rem;
    --font-size-6: 2.2rem;
    --font-size-7: 3.0rem;
    --font-size-8: 4.8rem;

    .font-size-1 { font-size: var(--font-size-1) !important; }
    .font-size-2 { font-size: var(--font-size-2) !important; }
    .font-size-3 { font-size: var(--font-size-3) !important; }
    .font-size-4 { font-size: var(--font-size-4) !important; }
    .font-size-5 { font-size: var(--font-size-5) !important; }
    .font-size-6 { font-size: var(--font-size-6) !important; }
    .font-size-7 { font-size: var(--font-size-7) !important; }
    .font-size-8 { font-size: var(--font-size-8) !important; }

    --font-size-h1: clamp(
        3rem,
        6vw,
        4.5rem
    );
    
    --font-size-h2: clamp(
        2rem,
        3vw,
        3rem
        );
        
    --font-size-h3: 1.4rem;

    /*==========================================================
        Font Weights
    ==========================================================*/

    --font-weight-normal: 400;

    --font-weight-medium: 500;

    --font-weight-semibold: 600;

    --font-weight-bold: 700;

    .font-weight-normal { font-weight: var(--font-weight-normal); }
    .font-weight-medium { font-weight: var(--font-weight-medium); } 
    .font-weight-semibold { font-weight: var(--font-weight-semibold); }
    .font-weight-bold { font-weight: var(--font-weight-bold); }


    /*==========================================================
        Base Fonts
    ==========================================================*/

    .h1, .h2, .h3, .h4, .h5, .h6 {
        font-family: var(--font-family);
        font-weight: var(--font-weight-semibold);
        color: var(--colour-text);
        margin: 0;
        & span{
            font-family:var(--font-family-logo), sans-serif;
        }
    }
    .h1 {
        font-size: var(--font-size-h1);
    }
    .h2 {
        font-size: var(--font-size-h2);
    }
    .h3 {
        font-size: var(--font-size-h3);
    }
    .h4 {
        font-size: var(--font-size-body);
    }
    .h5 {
        font-size: var(--font-size-body);
    }
    .h6 {
        font-size: var(--font-size-body);
    }

    p {
        font-family: var(--font-family);
        font-size: var(--font-size-body);
        font-weight: var(--font-weight-normal);
        color: var(--colour-text);
        /* margin: 0 0 var(--space-md) 0; */
        margin-block: 0 var(--space-md); 
        line-height: 1.75;
        /* text-wrap: balance; */
    }

    .h1 .accent, .h2 .accent, .h3 .accent, .h4 .accent, .h5 .accent, .h6 .accent, p .accent {
        color: oklch(from var(--colour-brand) 0.8 c h / 1) !important;
    }
    .h2 .accent.accent--temperature{
        color: oklch(from var(--colour-brand) 0.8 c var(--temperature-col-h) / 0.5) !important;
    }

    /*==========================================================
        Colours
    ==========================================================*/

    .colour--brand-light { color: oklch(from var(--colour-brand) 1 c h / 1); }
    .colour--brand { color: oklch(from var(--colour-brand) 0.8 c h / 1); }
    .colour--brand-dark { color: oklch(from var(--colour-brand) 0.8 c h / 0.5); }

    .font-highlight { color: oklch(from var(--colour-text) 1 c h / 0.8); background: oklch(from var(--colour-brand) 0.8 c h / 0.15); padding: 2px 4px; border-radius: 4px; }

    /* span.font-light-bg, 
    p.font-light-bg, 
    .font-light-bg { 
        background: oklch(from var(--colour-text) 1 c h / 0.8); 
        color: var(--bg-000) !important; 
        padding: 2px 4px; border-radius: 4px; } */

}