/*

Theme Name: Branchout Studios Theme
Theme URI: https://theme.co/pro/
Author: Branchout Studios
Author URI: https://branchoutstudios.co/
Description: Make all of your modifications to Pro in this child theme.
Version: 1.0.0
Template: pro

*/

:root {
	
	/* Breakpoints */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --max-width:     1920px;

	
	/* Color Variables */
	--white:            #ffffff;
	--black:            #000000;
	--dark:            	#0c0d10;
	--gray-100:         #f8f9fa;
	--gray-200:         #e9ecef;
	--gray-300:         #dee2e6;
	--gray-400:         #ced4da;
	--gray-500:         #adb5bd;
	--gray-600:         #6c757d;
	--gray-700:         #495057;
	--gray-800:         #343a40;
	--gray-900:         #212529;
	
	
	/* Color Mixins */
	--primary-color:          #B21F24;
	--primary-color-dark:     color-mix(in srgb, var(--primary-color) 80%, black); /* 80% primary colour + 20% black */
	--primary-color-light:    color-mix(in srgb, var(--primary-color) 80%, white); /* 80% primary colour + 20% white */
	--fullscreen-menu-bg:     hsl(from var(--primary-color) h s l / 0.95); /* primary colour RGB at 95% */

	/* Transitions */
	--transition-fast:      150ms ease-in-out;
	--transition-normal:    300ms ease-in-out;
	--transition-slow:      500ms ease-in-out;
	
	/* Fluid Typography Base  - 14px ~ 16px */
    --font-size-base:   clamp(0.875rem, 0.8036rem + 0.3571vw, 1rem);

    /* Type Scale */
    --type-scale:       clamp(1.2, 1.175 + 0.125vw, 1.25);

    /* Fluid Typography Scale */
    --font-size-xs:     calc(var(--font-size-base) / var(--type-scale) / var(--type-scale));
    --font-size-sm:     calc(var(--font-size-base) / var(--type-scale));
    --font-size:        var(--font-size-base);
    --font-size-lg:     calc(var(--font-size-base) * var(--type-scale));
    --font-size-xl:     calc(var(--font-size-base) * var(--type-scale) * var(--type-scale));
    --font-size-xxl:    calc(var(--font-size-base) * var(--type-scale) * var(--type-scale) * var(--type-scale));
    --font-size-xxxl:   calc(var(--font-size-base) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale));
	
	/* Line Heights */
    --leading-none:     1;
    --leading-tight:    1.25;
    --leading-snug:     1.375;
    --leading-normal:   1.5;
    --leading-relaxed:  1.625;
    --leading-loose:    2;

    /* Letter spacing */
    --tracking-tighter: -0.05em;
    --tracking-tight:   -0.025em;
    --tracking-normal:  0em;
    --tracking-wide:    0.025em;
    --tracking-wider:   0.05em;
    --tracking-widest:  0.1em;
}


* {
    margin:             0;
    padding:            0;
    box-sizing:         border-box;
    text-shadow:        none !important;
}

body, html {
	overflow-x:         unset;
	overflow-y:         unset;
}

html {
	font-size:          16px;
    scroll-behavior:    smooth;
}

body {
    letter-spacing:     var(--tracking-wide);
    line-height:        var(--leading-relaxed);
}