/**
 * Colors
 *
 * These utility classes are meant to provide a consistent 
 * color palette and themable colors that can be overwritten with themes.
 *
 * The default color theme is `light`.
 */

:where(:root) {
	/* ------------------------------ Color palette ----------------------------- */
	--wndb-gray: #6c6c89;
	--wndb-gray-50: #f7f7f8;
	--wndb-gray-100: #ebebef;
	--wndb-gray-150: #e5e5e9;
	--wndb-gray-200: #d1d1db;
	--wndb-gray-300: #a9a9bc;
	--wndb-gray-400: #8a8aa3;
	--wndb-gray-500: #6c6c89;
	--wndb-gray-600: #55556d;
	--wndb-gray-700: #3f3f50;
	--wndb-gray-800: #1d1d22;
	--wndb-gray-900: #121217;

	--wndb-white: #fff;
	--wndb-white-50: rgba(255, 255, 255, 0.05);
	--wndb-white-100: rgba(255, 255, 255, 0.1);
	--wndb-white-150: rgba(255, 255, 255, 0.15);
	--wndb-white-200: rgba(255, 255, 255, 0.2);
	--wndb-white-300: rgba(255, 255, 255, 0.3);
	--wndb-white-400: rgba(255, 255, 255, 0.4);
	--wndb-white-500: rgba(255, 255, 255, 0.5);
	--wndb-white-600: rgba(255, 255, 255, 0.6);
	--wndb-white-700: rgba(255, 255, 255, 0.7);
	--wndb-white-800: rgba(255, 255, 255, 0.8);
	--wndb-white-900: rgba(255, 255, 255, 0.9);

	--wndb--color--primary: hsla(240, 100%, 50%, 1);
	--wndb--color--secondary: hsla(240, 100%, 50%, 1);

	/* ----------------------------- Themable ---------------------------- */
	--wndb--color--surface: var(--wndb-gray-50);
	--wndb--color--text: var(--wndb-gray-800);
	--wndb--color--text--contrast: var(--wndb-gray-900);
	--wndb--color--text--faded: var(--wndb-gray-600);
	--wndb--color--borders: var(--wndb-gray-150);
	--wndb--color--borders-light: var(--wndb-gray-100);
	--wndb--color--borders-strong: var(--wndb--color--text--faded);
	--wndb--color--subtle: var(--wndb-gray-200);
	--wndb--color--links: var(--wndb--color--primary);
}

/*
 * Themes
 *
 * These classes are meant to be added to the element that needs a different theme.
 *  - By default, the `light` theme is applied. 
 *  - Nested themes are supported.
 */

.nfd-theme-white {
	--wndb--color--borders: var(--wndb-gray-150);
	--wndb--color--borders-light: var(--wndb-gray-100);
	--wndb--color--links: var(--wndb--color--primary);
	--wndb--color--subtle: var(--wndb-gray-200);
	--wndb--color--surface: var(--wndb-white);
	--wndb--color--text--contrast: var(--wndb-gray-900);
	--wndb--color--text--faded: var(--wndb-gray-700);
	--wndb--color--text: var(--wndb-gray-800);
}

.nfd-theme-light {
	--wndb--color--borders: var(--wndb-gray-150);
	--wndb--color--borders-light: var(--wndb-gray-150);
	--wndb--color--links: var(--wndb--color--primary);
	--wndb--color--subtle: var(--wndb-gray-200);
	--wndb--color--surface: var(--wndb-gray-50);
	--wndb--color--text--contrast: var(--wndb-gray-900);
	--wndb--color--text--faded: var(--wndb-gray-700);
	--wndb--color--text: var(--wndb-gray-800);
}

.nfd-theme-dark {
	--wndb--color--borders: var(--wndb-white-100);
	--wndb--color--borders-light: var(--wndb--color--borders);
	--wndb--color--subtle: var(--wndb-white-200);
	--wndb--color--surface: var(--wndb-gray-800);
	--wndb--color--text--contrast: var(--wndb-white);
	--wndb--color--text--faded: var(--wndb-white-800);
	--wndb--color--text: var(--wndb-white);
	--wndb--shadow--sm: none;
	--wndb--shadow--xs: none;
	--wndb-mask-color: rgba(255, 255, 255, 0.12);
}

.nfd-theme-darker {
	--wndb--color--borders: var(--wndb-white-100);
	--wndb--color--borders-light: var(--wndb--color--borders);
	--wndb--color--subtle: var(--wndb-white-200);
	--wndb--color--surface: var(--wndb-gray-900);
	--wndb--color--text--contrast: var(--wndb-white);
	--wndb--color--text--faded: var(--wndb-white-800);
	--wndb--color--text: var(--wndb-white);
	--wndb--shadow--sm: none;
	--wndb--shadow--xs: none;
	--wndb-mask-color: rgba(255, 255, 255, 0.12);
}

.nfd-theme-primary {
	--wndb--color--borders: var(--wndb-white-100);
	--wndb--color--borders-light: var(--wndb--color--borders);
	--wndb--color--subtle: var(--wndb-white-200);
	--wndb--color--surface: var(--wndb--color--primary);
	--wndb--color--text--contrast: var(--wndb-white);
	--wndb--color--text--faded: var(--wndb-white-900);
	--wndb--color--text: var(--wndb-white);
	--wndb--shadow--sm: none;
	--wndb--shadow--xs: none;
	--wndb-mask-color: rgba(255, 255, 255, 0.12);
}

/* --------------------------------- Surface -------------------------------- */
/* Background */
.nfd-bg-surface:not(.has-background) {
	background-color: var(--wndb--color--surface);
}

/* Text color */
.nfd-bg-surface:not(.has-text-color) {
	color: var(--wndb--color--text);
}

/* Faded text color */
.nfd-text-faded p:not(.has-text-color):not(.has-link-color):not(.has-background):not(.nfd-text-primary),
ul.nfd-text-faded:not(.has-text-color):not(.has-link-color):not(.has-background):not(.nfd-text-primary),
ol.nfd-text-faded:not(.has-text-color):not(.has-link-color):not(.has-background):not(.nfd-text-primary),
.nfd-text-faded > a:not(.has-text-color):not(.has-link-color):not(.has-background),
p.nfd-text-faded:not(.has-text-color):not(.has-link-color):not(.has-background),
.nfd-text-faded time:not(.has-text-color):not(.has-background) {
	color: var(--wndb--color--text--faded);
}

/* Contrast text color */
.wp-site-blocks .nfd-text-contrast:where(:not(.has-text-color)),
.wp-site-blocks .nfd-text-contrast:where(:not(.has-text-color)) a:where(:not(:hover)),
.editor-styles-wrapper div .nfd-text-contrast:where(:not(.has-text-color)),
.editor-styles-wrapper div :where(.nfd-text-contrast:not(.has-text-color):not(.wp-element-button)) a:where(:not(:hover)) {
	/* no important */
	color: var(--wndb--color--text--contrast);
}

/* Border color */
/* prettier-ignore */
.nfd-bg-surface:not([class*="border-color"]):not([style*="border-top-color"]):not([style*="border-right-color"]):not([style*="border-bottom-color"]):not([style*="border-left-color"]):not(.has-border-color):not(.nfd-border-strong),
.nfd-bg-surface [style*='border']:not([class*="border-color"]):not([style*="border-top-color"]):not([style*="border-right-color"]):not([style*="border-bottom-color"]):not([style*="border-left-color"]):not(.nfd-border-strong),
.nfd-bg-surface [style*='border']:not([class*="border-color"]):not([style*="border-top-color"]):not([style*="border-right-color"]):not([style*="border-bottom-color"]):not([style*="border-left-color"]) > img:not(.has-border-color):not([class*="border-color"]):not([style*="border-top-color"]):not([style*="border-right-color"]):not([style*="border-bottom-color"]):not([style*="border-left-color"]),
.nfd-bg-surface [style*='border']:not([class*="border-color"]):not([style*="border-top-color"]):not([style*="border-right-color"]):not([style*="border-bottom-color"]):not([style*="border-left-color"]) > img:not(.has-border-color):not([class*="border-color"]):not([style*="border-top-color"]):not([style*="border-right-color"]):not([style*="border-bottom-color"]):not([style*="border-left-color"]) > .components-resizable-box__container > img:not([class*="border-color"]):not([style*="border-top-color"]):not([style*="border-right-color"]):not([style*="border-bottom-color"]):not([style*="border-left-color"]){
	border-color: var(--wndb--color--borders);
}

/* Separator block */
.nfd-bg-surface .wp-block-separator:not(.has-background):not(.has-text-color):not(.nfd-border-strong) {
	border-bottom-color: var(--wndb--color--borders);
}

.nfd-bg-surface .wp-block-separator:not(.has-background):not(.has-text-color):not(.nfd-border-2) {
	border-bottom-width: 1px;
}

/* Border background */
.nfd-border-bg {
	--wndb--color--borders: var(--wndb--color--surface);
}

/* Border primary */
.nfd-border-primary {
	--wndb--color--borders: var(--wndb--color--primary);
}

/* Border inherit */
.nfd-border-inherit {
	--wndb--color--borders: inherit;
}

/* ---------------------------------- Other --------------------------------- */
.nfd-bg-primary:not(.has-background),
.nfd-bg-accent:not(.has-background),
.wp-block-cover.nfd-bg-primary > .wp-block-cover__background:not([class*="background-color"]),
.wp-block-cover.nfd-bg-accent > .wp-block-cover__background:not([class*="background-color"]) {
	background-color: var(--wndb--color--primary);
}

.nfd-bg-primary:not(.has-text-color),
.nfd-bg-accent:not(.has-text-color) {
	color: var(--wndb--color--white);
}

.nfd-bg-subtle:not(.has-background):not(.wp-block-button),
.nfd-bg-subtle:not(.has-background) > .wp-block-button__link:not(.has-background) {
	background-color: var(--wndb--color--borders-light);
	color: var(--wndb--color--text--contrast);
}

.nfd-text-primary:not(.has-text-color),
.wp-block-button.wndb-text-primary > a:not(.has-text-color) {
	color: var(--wndb--color--primary);
}

.nfd-text-secondary:not(.has-text-color),
.wp-block-button.wndb-text-secondary > a:not(.has-text-color) {
	color: var(--wndb--color--secondary);
}

.nfd-theme-primary .nfd-text-primary:not(.has-text-color),
.nfd-theme-primary .wp-block-button.wndb-text-primary > a:not(.has-text-color),
.nfd-theme-primary .nfd-text-secondary:not(.has-text-color),
.nfd-theme-secondary .wp-block-button.wndb-text-secondary > a:not(.has-text-color) {
	color: var(--wndb--color--contrast);
}

.nfd-theme-dark .nfd-text-primary:not(.has-text-color),
.nfd-theme-darker .nfd-text-primary:not(.has-text-color) {
	color: var(--wndb--color--secondary);
}

.nfd-text-subtle:not(.has-text-color) {
	color: var(--wndb--color--subtle);
}

.wp-site-blocks .nfd-text-current:where(:not(.has-text-color)),
.wp-site-blocks .nfd-text-current:where(:not(.has-text-color)) a:where(:not(:hover)),
.editor-styles-wrapper div .nfd-text-current:where(:not(.has-text-color)),
.editor-styles-wrapper div :where(.nfd-text-current:not(.has-text-color):not(.wp-element-button)) a:where(:not(:hover)) {
	/* no important */
	color: currentColor;
}

[class*="nfd-theme-"] .wp-block-social-links.is-style-logos-only:not(.has-icon-color) .wp-block-social-link {
	color: var(--wndb--color--text--faded);
	fill: var(--wndb--color--text--faded);
}

[class*="nfd-theme-"] .wp-block-social-links.is-style-logos-only:not(.has-icon-color) .wp-block-social-link:hover {
	color: var(--wndb--color--text);
	fill: var(--wndb--color--text);
}

/* ------------------------- Backward compatibility ------------------------- */
.nfd-bg-gray-100:not(.has-background),
.nfd-bg-gray-800:not(.has-background) {
	background-color: var(--wndb--color--surface);
}

.nfd-bg-gray-100:not(.has-text-color),
.nfd-bg-gray-800:not(.has-text-color) {
	color: var(--wndb--color--text);
}

.nfd-bg-gray-800 {
	--wndb--color--surface: var(--wndb-gray-800);
	--wndb--color--text: var(--wndb-white);
	--wndb--color--borders: var(--wndb-white-100);
	--wndb--color--text--faded: var(--wndb-white-700);
}

.nfd-bg-gray-100 {
	--wndb--color--surface: var(--wndb-gray-50);
	--wndb--color--text: var(--wndb-gray-700);
	--wndb--color--borders: var(--wndb-gray-100);
}

.nfd-text-opacity-80 p:not(.has-text-color):not(.has-link-color):not(.has-background),
p.nfd-text-opacity-80:not(.has-text-color):not(.has-link-color):not(.has-background),
.nfd-text-opacity-80 time:not(.has-text-color):not(.has-background) {
	opacity: 0.8;
}
