/* #PRODUIRE{fond=css/thth_jeu_de_couleurs.css}
   md5:963e4f1f16f1fa8397b0b1ba9c7a344c */
/* Création d'un jeu de couleurs à partir d'une couleur de base.
 *
 * Copie d'un article vu sur https://web.dev/articles/building/a-color-scheme?hl=fr
 *
 * Description	: Création d'un jeu de couleurs à partir d'une couleur de base.
 * Auteur		: thierryevrard@free.fr
 * Date		: 10/09/2024
 *
 * Les couleurs utilisées sur le site Massages se trouvent en fin de fichier.
 */


/*---thth--- classes utilitaires*/
@use postcss-preset-env {
	stage: 0;
	features: {
		"logical-properties-and-values": false
	}
}

html {

	/*---thth--- classes utilitaires
	-----------------------------------*/


	/* on récupère la couleur de base du theme
	-------------------------------------------*/
	--th_themeeee: hsl(200, 100%, 50%);
	--th_theme_color: #64abb4;		/* hsl(17, 24%, 92%);  rgb(240, 233, 230) #f0e9e6*/
	--th_theme-hue: 299;
	--th_theme-saturation:  55%;
	--th_theme-lightness: 92%;

	/*tests
	--------*/
	--ttt: hsl(calc( var(--th_theme-hue) + 55)  var(--th_theme-saturation) var(--th_theme-lightness));
	--tt: hsl(from var(--th_theme) calc(h + 53)  s  l);

	/*--- palette de couleurs proposée par https://color.adobe.com/fr/mythemes?viewTheme#
	 *--------------------------------------------------------------------------------------*/
	--adobe1: hsl( from var(--th_theme_color) calc(h - 3)  calc(s - 17) calc(l - 14) );
	--adobe2: hsl( from var(--th_theme_color) calc(h + 3)  calc(s - 21) calc(l - 30) );
	--adobe3: hsl( from var(--th_theme_color) calc(h - 3)  calc(s - 23) calc(l - 45));
	--adobe4: hsl( from var(--th_theme_color) calc(h - 3)  calc(s - 22) calc(l - 61));


	/*--- nuancier ---https://iamvdo.me/blog/les-avantages-de-hsl-par-rapport-a-rgb
	--------------------------------------------------------------------------------*/
	--clair: 			hsl( from var(--th_theme_color) h s calc( l + 20) );
	--fonce: 			hsl( from var(--th_theme_color) h s calc( l - 20) );
	--complementaire:	hsl( from var(--th_theme_color) calc( h + 180) s l );
	--adjacente1: 	  	hsl( from var(--th_theme_color) calc( h + 120) s l );
	--adjacente2:		hsl( from var(--th_theme_color) calc( h + 240) s l );
	--analogue1: 		hsl( from var(--th_theme_color) calc( h + 30 ) s l );
	--analogue2: 		hsl( from var(--th_theme_color) calc( h + 330) s l );
	--monochrome1: 	hsl( from var(--th_theme_color) h calc( s - 30) l );
	--monochrome2: 	hsl( from var(--th_theme_color) h calc( s - 60) l );


/* https://paletton.com
 Opposite
 FFFEFC
 F0ECE6
 C9C2B7
 A89C8B


 FFFEFC
 F0ECE6
 C9C5B7
 A8A18B


 FFFDFC
 F0ECE6
 C9BDB7
 A8948B


 EFECED
 D8CFD2
 B5A5A9
 977D84

 */


	/*--- calcul des classes de base pour les différents schémas : light / dark / dim
	----------------------------------------------------------------------------------*/
	/* light */
	--th_theme-light: hsl(var(--th_theme-hue) var(--th_theme-saturation) var(--th_theme-lightness));
	--text1-light: hsl(var(--th_theme-hue) var(--th_theme-saturation) 10%);
	--text2-light: hsl(var(--th_theme-hue) 30% 30%);
	--surface1-light: hsl(var(--th_theme-hue) 25% 90%);
	--surface2-light: hsl(var(--th_theme-hue) 20% 99%);
	--surface3-light: hsl(var(--th_theme-hue) 20% 92%);
	--surface4-light: hsl(var(--th_theme-hue) 20% 85%);
	--surface-shadow-light: var(--th_theme-hue) 10% 20%;
	--shadow-strength-light: .02;

	/* dark */
	--th_theme-dark: hsl( var(--th_theme-hue) calc(var(--th_theme-saturation) / 2) calc(var(--th_theme-lightness) / 1.5) );
	--text1-dark: hsl(var(--th_theme-hue) 15% 85%);
	--text2-dark: hsl(var(--th_theme-hue) 5% 65%);
	--surface1-dark: hsl(var(--th_theme-hue) 10% 10%);
	--surface2-dark: hsl(var(--th_theme-hue) 10% 15%);
	--surface3-dark: hsl(var(--th_theme-hue) 5%  20%);
	--surface4-dark: hsl(var(--th_theme-hue) 5% 25%);
	--surface-shadow-dark: var(--th_theme-hue) 50% 3%;
	--shadow-strength-dark: .8;

	/* dim */
	--th_theme-dim: hsl( var(--th_theme-hue) calc(var(--th_theme-saturation) / 1.25) calc(var(--th_theme-lightness) / 1.25) );
	--text1-dim: hsl(var(--th_theme-hue) 15% 75%);
	--text2-dim: hsl(var(--th_theme-hue) 10% 61%);
	--surface1-dim: hsl(var(--th_theme-hue) 10% 20%);
	--surface2-dim: hsl(var(--th_theme-hue) 10% 25%);
	--surface3-dim: hsl(var(--th_theme-hue) 5%  30%);
	--surface4-dim: hsl(var(--th_theme-hue) 5% 35%);
	--surface-shadow-dim: var(--th_theme-hue) 30% 13%;
	--shadow-strength-dim: .2;
}

:root {
	color-scheme: light;

	/* set defaults */
	--th_theme_mode: var(--th_theme-light);
	--text1: var(--text1-light);
	--text2: var(--text2-light);
	--surface1: var(--surface1-light);
	--surface2: var(--surface2-light);
	--surface3: var(--surface3-light);
	--surface4: var(--surface4-light);
	--surface-shadow: var(--surface-shadow-light);
	--shadow-strength: var(--shadow-strength-light);

	/*---thth---*/
	--white: var(--surface1);
	--primary-color: var(--surface4);
	--primary-color-hover: var(--surface4);
	/*---fin-thth---*/
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;

		--th_theme_mode: var(--th_theme-dark);
		--text1: var(--text1-dark);
		--text2: var(--text2-dark);
		--surface1: var(--surface1-dark);
		--surface2: var(--surface2-dark);
		--surface3: var(--surface3-dark);
		--surface4: var(--surface4-dark);
		--surface-shadow: var(--surface-shadow-dark);
		--shadow-strength: var(--shadow-strength-dark);
	}
}

[color-scheme="light"] {
	color-scheme: light;

	--th_theme_mode: var(--th_theme-light);
	--text1: var(--text1-light);
	--text2: var(--text2-light);
	--surface1: var(--surface1-light);
	--surface2: var(--surface2-light);
	--surface3: var(--surface3-light);
	--surface4: var(--surface4-light);
	--surface-shadow: var(--surface-shadow-light);
	--shadow-strength: var(--shadow-strength-light);
}

[color-scheme="dark"] {
	color-scheme: dark;

	--th_theme_mode: var(--th_theme-dark);
	--text1: var(--text1-dark);
	--text2: var(--text2-dark);
	--surface1: var(--surface1-dark);
	--surface2: var(--surface2-dark);
	--surface3: var(--surface3-dark);
	--surface4: var(--surface4-dark);
	--surface-shadow: var(--surface-shadow-dark);
	--shadow-strength: var(--shadow-strength-dark);
}

[color-scheme="dim"] {
	color-scheme: dark;

	--th_theme_mode: var(--th_theme-dim);
	--text1: var(--text1-dim);
	--text2: var(--text2-dim);
	--surface1: var(--surface1-dim);
	--surface2: var(--surface2-dim);
	--surface3: var(--surface3-dim);
	--surface4: var(--surface4-dim);
	--surface-shadow: var(--surface-shadow-dim);
	--shadow-strength: var(--shadow-strength-dim);
}
/*---thth--- fin des classes utilitaires*/

/*--- palette de couleurs proposée par https://color.adobe.com/fr/mythemes?viewTheme#
 *--------------------------------------------------------------------------------------*/
.adobe1 { background-color: var(--adobe1); }
.adobe2 { background-color: var(--adobe2); }
.adobe3 { background-color: var(--adobe3); }
.adobe4 { background-color: var(--adobe4); }

.complementaire 	{ background-color: var(--complementaire); }
.adjacente1  		{ background-color: var(--adjacente1); }
.adjacente2			{ background-color: var(--adjacente2); }
.analogue1 			{ background-color: var(--analogue1); }
.analogue2 			{ background-color: var(--analogue2); }
.monochrome1 		{ background-color: var(--monochrome1); }
.monochrome2 		{ background-color: var(--monochrome2); }
.fonce 				{ background-color: var(--fonce); }
.clair 				{ background-color: var(--clair); }

/*---thth--- classes à utiliser dans le HTML
 *----------------------------------------------*/
.theme_color {
	background-color: var(--th_theme_color);
	color: var(--text2);
}

.theme_mode {
	background-color: var(--th_theme_mode);
	color: var(--text2);
}

.surface1 {
	background-color: var(--surface1);
	color: var(--text2);
}

.surface2 {
	background-color: var(--surface2);
	color: var(--text2);
}

.surface3 {
	background-color: var(--surface3);
	color: var(--text1);
}

.surface4 {
	background-color: var(--surface4);
	color: var(--text1);
}

.text1 {
	color: var(--text1);
	@nest p& {
		font-weight: 200;
	}
}

.text2 {
	color: var(--text2);
}

.shadow {
	background-color: hsl(var(--surface-shadow) / var(--shadow-strength))
}

.swatch {
	display: inline-block;
	flex-shrink: 0;
	inline-size: 1.5ch;
	block-size: 1.5ch;
	border-radius: 50%;

	&.text1 { background-color: var(--text1); }
	&.text2 { background-color: var(--text2); }
}

.rad-shadow {
	border: 1px solid hsl(var(--th_theme-hue) 10% 50% / 15%);
	box-shadow: 0 1rem .5rem -.5rem;
	box-shadow:
	0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
	0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),
	0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
	0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
	0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
	0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength))
	;
}



/* Couleurs utilisées sur le site www.massages.thth.fr
 *----------------------------------------------------------*/
*{
	--black: var(--text1);
	--white: var(--surface1);
	--primary-color: var(--text2);
	--primary-color-hover: var(--text1);
	--primary-color-light: var(--surface1);

	--massage_background: var(--surface4);
	--meassages_background: var(--surface4);

	/*---thth--- affichage du menu --- plugin menuder.css
	*----------------------------------------------------------*/
	--menuder-bg: var(--surface4);
	--menuder-border-color: #666;
	--menuder-border-width: 2px 0;

	--menuder-child-first-border-color: #fff #bbb #bbb #bbb;
	--menuder-child-first-border-width: 2px 2px 2px 2px;
	--menuder-child-first-bg: var(--surface1);

	--menuder-child-next-border-color: #bbb;
	--menuder-child-next-border-width: 2px;
	--menuder-child-next-bg: var(--surface1);

	--menuder-caret-color: currentColor;
	--menuder-link-padding-y: 0.25em;
	--menuder-link-padding-x: 0.75em;
	--menuder-caret-bottom-img:url('https://massages.thth.fr/img/chevron-bottom-xx.svg');
	--menuder-caret-right-img:url('https://massages.thth.fr/img/chevron-right-xx.svg');
	--menuder-caret-width: 0em;
	--menuder-caret-height: 1.5em;
}