/**
 * Custom properties
 *
 * These are in a separate file so we can safely include them in the Customizer
 * and get access to things like brand colors.
 *
 * Important note on CSS properties and custom properties:
 *
 * When a custom property is referenced, its value is limited to the scope
 * where it is used, whether on a property or another custom property. This
 * means you cannot change a custom property within the scope of a
 * descendent element and expect the changed value to affect a property or
 * another custom property as inherited on that descendent element. If you
 * want to use the updated value, you are going to need to redefine the
 * property or custom property inside the descendant scope as well. This
 * gotcha is explained here with an example:
 * https://css-tricks.com/the-big-gotcha-with-custom-properties/
 *
 * Table of Contents:
 * 1.0 Brand Styles
 * 2.0 Colors
 * 3.0 Spacing
 * 4.0 Fonts
 * 5.0 Buttons
 * 6.0 Forms
 * 7.0 Focus Outlines
 * 8.0 Miscellaneous
 *
 * @package TWI_Base
 */

/**
 * 1.0 Brand Styles
 *
 * These should not be overridden.
 */

:root {
	--brand-body-font-family: "Open Sans", "Trebuchet MS", tahoma, arial, sans-serif;
	--brand-heading-font-family: "Poppins", arial, tahoma, sans-serif;
	--brand-color-primary-green: #009945;
	--brand-color-primary-black: #000;
	--brand-color-primary-white: #fff;
	--brand-color-expanded-light-green: #3c3;
	--brand-color-expanded-dark-green: #060;
	--brand-color-expanded-neutral: #e3ffdb;
	--brand-color-expanded-black: #241f21;
	--brand-color-secondary-blue: #004fd9;
	--brand-color-secondary-red: #bf0303;
	--brand-color-secondary-orange: #f60;
	--brand-color-secondary-neutral: #f7edc7;
	--brand-color-secondary-yellow: #f7d900;
}

/**
 * 2.0 Colors
 */

:root {
	--body-background: var(--brand-color-primary-white);
	--text-color: var(--brand-color-primary-black);
	--text-color--disabled: #666; /* Brand primary black with 0.6 opacity on white */
	--link-color: var(--brand-color-secondary-blue);
	--notice-info-color-dark: var(--brand-color-secondary-blue);
	--notice-info-color-light: #f2f6fd; /* Brand secondary blue with 0.05 opacity on white */
	--notice-success-color-dark: var(--brand-color-expanded-dark-green);
	--notice-success-color-light: #f2faf6; /* Brand primary green with 0.05 opacity on white */
	--notice-error-color-dark: var(--brand-color-secondary-red);
	--notice-error-color-light: #fcf2f2; /* Brand secondary red with 0.05 opacity on white */
}

/**
 * 3.0 Spacing
 */

:root {
	--site-width: 100rem;
	--site-padding: clamp(0.5rem, -0.2143rem + 3.5714vw, 3rem); /* viewport: 320px to 1440px */
	--form-width: 60rem;
	--sidebar-width: 30rem;
	--paragraph-spacing: 2em; /* https://baymard.com/blog/line-length-readability */
	--list-margin:
		0
		0
		var(--paragraph-spacing)
		clamp(1.5em, 1.0714em + 2.1429vw, 3em); /* viewport: 320px to 1440px */
	--line-height: 1.5; /* https://baymard.com/blog/line-length-readability */
	--text-width: 57ch; /* 50-75 characters, 66 is sweet spot; https://baymard.com/blog/line-length-readability */
	--heading-margin-top: 3em;
	--heading-margin-top--text-content: var(--paragraph-spacing);
	--heading-margin-bottom: calc(var(--paragraph-spacing) / 2);
	--heading-margin-bottom--text-content: calc(var(--paragraph-spacing) / 5);
	--space-xs: 0.75rem;
	--space-s: 1rem;
	--space-m: 2rem;
	--space-l: 4rem;
	--space-xl: 8rem;
	/* stylelint-disable-next-line length-zero-no-unit */
	--wp-admin-bar-height: 0rem; /* Set to real value only if admin-bar class is on body. Needs to have unit for calc(). */
}

body.admin-bar {
	--wp-admin-bar-height: 32px;
}

/* This media query is from WordPress */
@media screen and (max-width: 782px) {

	body.admin-bar {
		--wp-admin-bar-height: 46px;
	}
}

/**
 * 4.0 Fonts
 *
 * We want to be selective in how many different font weights we use since
 * each are additional files to download.
 */

:root {
	--font-weight-normal: 400;
	--font-weight-bold: 700;
	--font-weight-extra-bold: 900;
	--body-font:
		var(--font-weight-normal)
		var(--body-font-size)
		var(--brand-body-font-family);
	--body-font-size: clamp(1.1rem, 1.0714rem + 0.1429vw, 1.2rem); /* viewport: 320px to 1440px */
	--small-font:
		var(--font-weight-normal)
		clamp(0.9rem, 0.8714rem + 0.1429vw, 1rem) /* viewport: 320px to 1440px */
		var(--brand-body-font-family);
	--copyright-font:
		var(--font-weight-normal)
		clamp(0.7rem, 0.6714rem + 0.1429vw, 0.8rem) /* viewport: 320px to 1440px */
		var(--brand-body-font-family);
	--h1-font:
		var(--font-weight-extra-bold)
		clamp(2rem, 1.7143rem + 1.4286vw, 3rem) /* viewport: 320px to 1440px */
		var(--brand-heading-font-family);
	--h2-font:
		var(--font-weight-extra-bold)
		clamp(1.5rem, 1.3571rem + 0.7143vw, 2rem) /* viewport: 320px to 1440px */
		var(--brand-heading-font-family);
	--h3-font:
		var(--font-weight-bold)
		clamp(1.4rem, 1.3429rem + 0.2857vw, 1.6rem) /* viewport: 320px to 1440px */
		var(--brand-heading-font-family);
	--h6-font:
		var(--font-weight-bold)
		var(--body-font-size)
		var(--brand-heading-font-family);
	--h2-subheading-font:
		var(--font-weight-bold)
		clamp(0.75rem, 0.7071rem + 0.2143vw, 0.9rem) /* viewport: 320px to 1440px */
		var(--brand-heading-font-family);
}

/**
 * 5.0 Buttons
 */

:root {
	--button-display: inline-flex;
	--button-font:
		500
		var(--body-font-size)
		var(--brand-heading-font-family);
	--button-padding: var(--button-padding-top-bottom) var(--button-padding-left-right);
	--button-padding-top-bottom: 0.8em;
	--button-padding-left-right: 1.3em;
	--button-background: var(--primary-dark);
	--button-background--disabled: #6ea083; /* Button color with 0.6 opacity on white */
	--button-background--hover: var(--primary-medium);
	--button-color: var(--brand-color-primary-white);
	--button-color--disabled: var(--button-color);
	--button-color--hover: var(--button-color);
	--button-border: none;
	--button-border--hover: none;
	--button-border-radius: var(--border-radius);
	--button-box-shadow: none;
	--button-text-decoration: none;
	--button-secondary-background: var(--brand-color-secondary-neutral);
	--button-secondary-background--hover: var(--brand-color-expanded-neutral);
	--button-secondary-color: var(--text-color);
	--button-secondary-border: var(--form-input-border);
}

/**
 * 6.0 Forms
 */

:root {
	--form-error-color-dark: var(--notice-error-color-dark);
	--form-error-color-light: var(--notice-error-color-light);
	--form-input-background: #fff;
	--form-input-background-focus: var(--accent-light);
	--form-input-padding: 0.75em;
	--form-input-border: var(--form-input-border-width) solid var(--form-input-border-color);
	--form-input-border-width: 0.0625rem;
	--form-input-border-color: var(--primary-dark);
	--form-input-border-color--disabled: #6ea083; /* Border color with 0.6 opacity on white */
	--form-input-outline-focus:
		var(--form-input-outline-focus-width)
		var(--outline-focus-style)
		var(--form-input-border-color);
	--form-input-outline-focus-width: calc(var(--outline-focus-width) - var(--form-input-border-width));
	--form-input-font: var(--body-font);
	--form-label-font: var(--h6-font);
	--form-label-margin-bottom: 0;
	--form-label-margin-top: 0;
	--form-fieldset-row-gap: var(--space-s);
	--form-fieldset-column-gap: calc(var(--form-fieldset-row-gap) / 2);
}

/**
 * 7.0 Focus Outlines
 *
 * Used for accessibility when tabbing through the page
 */

:root {
	--outline-focus:
		var(--outline-focus-width)
		var(--outline-focus-style)
		var(--outline-focus-color--default);
	--outline-focus-color--default: var(--form-input-border-color);
	--outline-focus-color--primary-button: var(--brand-color-primary-black);
	--outline-focus-style: solid;
	--outline-focus-width: 0.15rem; /* This is not exactly 2px, but this helps it scale better with font size changes. */
}

/**
 * 8.0 Miscellaneous
 */

:root {
	--border-radius: 0.7rem;
	--page-title-text-align: center;
	--notice-border: 1px solid;
	--video-aspect-ratio: 56.25%;
}