/*
Theme Name: Twenty Twenty-One Child
Theme URI: https://webenchartreuse.fr/twentytwentyone-child/
Description: Twenty Twenty-One Child Theme
Author: Thomas Groubet
Author URI: https://webenchartreuse.fr
Template: twentytwentyone
Version: 1.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: twentytwentyonechild
*/

:root {
    --font-headings: 'Raleway';
    --font-base: 'Raleway';

    --global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
	--global--font-secondary: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);

    /* Colors */
    --wec--color-green: #37c871;
    --wec--color-light-green: #2affd5;
    --wec--color-dark-gray: #152b30;
    --wec--color-gray: #374548;
    --wec--color-light-gray: #6f8a91;

    /* White Theme */
    --global--color-primary: var(--wec--color-gray); /* Body text color, site title, footer text color. */
	--global--color-secondary: var(--global--color-gray); /* Headings */
	--global--color-primary-hover: var(--global--color-primary);
	--global--color-background: var(--global--color-green); /* Mint, default body background */
	--global--color-border: var(--global--color-primary); /* Used for borders (separators) */

    /* Buttons */
	--button--color-text: var(--global--color-background);
	--button--color-text-hover: var(--global--color-secondary);
	--button--color-text-active: var(--global--color-secondary);
	--button--color-background: var(--wec--color-green);
	--button--color-background-active: var(--global--color-background);
	--button--font-family: var(--global--font-primary);
	--button--font-size: var(--global--font-size-base);
	--button--font-weight: 500;
	--button--line-height: 1.5;
	--button--border-width: 3px;
	--button--border-radius: 0;
	--button--padding-vertical: 15px;
	--button--padding-horizontal: calc(2 * var(--button--padding-vertical));

}

@media only screen {

	.is-dark-theme.is-dark-theme {
		--global--color-background: var(--global--color-dark-gray);
		--global--color-primary: var(--global--color-light-gray);
		--global--color-secondary: var(--global--color-light-gray);
		--button--color-text: var(--global--color-background);
		--button--color-text-hover: var(--global--color-secondary);
		--button--color-text-active: var(--global--color-secondary);
		--button--color-background: var(--global--color-secondary);
		--button--color-background-active: var(--global--color-background);
		--global--color-border: #9ea1a7;
	}
}

/**
 * Button
 */
 .site .button:not(:hover):not(:active):not(.has-background),
 button:not(:hover):not(:active):not(.has-background),
 input[type=submit]:not(:hover):not(:active):not(.has-background),
 input[type=reset]:not(:hover):not(:active):not(.has-background),
 .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background),
 .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background),
 .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
    background-color: var(--wec--color-green);
 }
 
 .has-background .site .button:not(:hover):not(:active):not(.has-background),
 .has-background button:not(:hover):not(:active):not(.has-background),
 .has-background input[type=submit]:not(:hover):not(:active):not(.has-background),
 .has-background input[type=reset]:not(:hover):not(:active):not(.has-background),
 .has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background),
 .has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background),
 .has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
     background-color: blue;
 }
 
 .site .button:hover,
 .site .button:active,
 button:hover,
 button:active,
 input[type=submit]:hover,
 input[type=submit]:active,
 input[type=reset]:hover,
 input[type=reset]:active,
 .wp-block-search .wp-block-search__button:hover,
 .wp-block-search .wp-block-search__button:active,
 .wp-block-button .wp-block-button__link:hover,
 .wp-block-button .wp-block-button__link:active,
 .wp-block-file a.wp-block-file__button:hover,
 .wp-block-file a.wp-block-file__button:active {
    background-color: var(--wec--color-light-green);
    border-color:  var(--wec--color-dark-gray);
    color:  var(--wec--color-dark-gray);
 }
 
 
 .site .button:disabled,
 button:disabled,
 input[type=submit]:disabled,
 input[type=reset]:disabled,
 .wp-block-search .wp-block-search__button:disabled,
 .wp-block-button .wp-block-button__link:disabled,
 .wp-block-file a.wp-block-file__button:disabled {
     background-color: green;
 }