@charset "UTF-8";

/*
Theme Name: Smith Physical Therapy & Wellness
Theme URI: https://wordpress.org/themes/twentytwentyone/
Description: Smith Physical Therapy & Wellness is a TwentyTwentyOne child theme.
Author: the WordPress team
Author URI: https://wordpress.org/
Template: twentytwentyone
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: smithpt-wellness
*/

/* Variables */
:root {
	/* Font Size */
	--global--font-size-base: 1rem;
	--global--font-size-xs:   0.75rem;
	--global--font-size-sm:   0.9rem;
	--global--font-size-md:   1rem;
	--global--font-size-lg:   1.5rem;
	--global--font-size-xl:   2rem;
	--global--font-size-xxl:  3rem;
	--global--font-size-xxxl: 4rem;

	/* Colors */
	--global--color-primary:         #254059;
	--global--color-primary-light:   #97D6E7;
	--global--color-secondary:       #9AD2C4;
	--global--color-secondary-light: #D8EFE9;
}

@media only screen and (min-width: 652px) {
	:root {
		--global--font-size-xl: 3rem;
		--global--font-size-xxl: 4rem;
		--global--font-size-xxxl: 5rem;
	}
}

:root .has-extra-small-font-size {
	font-size: var(--global--font-size-xs);
}

:root .has-small-font-size {
	font-size: var(--global--font-size-sm);
}

:root .has-regular-font-size,
:root .has-normal-font-size,
:root .has-medium-font-size {
	font-size: var(--global--font-size-md);
}

:root .has-large-font-size {
	font-size: var(--global--font-size-lg);
}

:root .has-extra-large-font-size {
	font-size: var(--global--font-size-xl);
}

:root .has-huge-font-size {
	font-size: var(--global--font-size-xxl);
}

:root .has-gigantic-font-size {
	font-size: var(--global--font-size-xxxl);
}

.has-primary-to-secondary-gradient-background {
	background: linear-gradient(160deg, var(--global--color-primary), var(--global--color-secondary));
}

.has-secondary-to-primary-gradient-background {
	background: linear-gradient(160deg, var(--global--color-secondary), var(--global--color-primary));
}

.has-primary-light-to-secondary-light-gradient-background {
	background: linear-gradient(160deg, var(--global--color-primary), var(--global--color-primary-light));
}

.has-secondary-light-to-primary-light-gradient-background {
	background: linear-gradient(160deg, var(--global--color-secondary), var(--global--color-secondary-light));
}
