/* 
-- nom: th-core.css --
-- llibreria: loT --
-- grup: engine --
-- autor: A.Moseguí / TT22 --
-- versió: 26.1.0 --
-- descripció: Punt únic per a tot el color de l'app.
               Conté tokens invariants i tokens que varien per tema (clar/fosc).
               Consumeix els àlies --color-palette-* dels fitxers de paleta. --
-- dependència: init.css + un fitxer de paleta (th-zen.css, th-vori.css, ...) --
*/

/*  =====================================================
    👉 TOKENS INVARIANTS
    No canvien ni per tema ni per paleta.
    ===================================================== */
:root {
	/* Base */
	--cl-black: var(--color-black);
	--cl-white: var(--color-white);
	--cl-coral: var(--color-coral);
	--cl-maroon: var(--color-maroon);

	/* Links */
	--cl-link-df:    var(--color-blue);
	--cl-link-hover: var(--color-maroon);

	/* Focus & Interaction */
	--cl-focus-ring: var(--color-blue);
	--cl-highlight:  var(--color-gray-100);

	/* States */
	--cl-success:  var(--color-green);
	--cl-error:    var(--color-red);
	--cl-warning:  var(--color-coral);
	--cl-question: var(--color-yellow);
	--cl-select:   var(--color-gold);
	--cl-info:     var(--color-blue);	
	--cl-confirm:  var(--color-darkblue);
	--cl-deny: 	   var(--color-maroon);
	--cl-cancel: 	   var(--color-gray-700);
	--cl-light:    var(--color-nearwhite);
	--cl-dark:	   var(--color-nearblack);

	/* Transparency */
	--trp-light-half: var(--transparency-light-half);
	--trp-dark-half: var(--transparency-dark-half);
	--trp-light-low: var(--transparency-light-low);
	--trp-dark-low:  var(--transparency-dark-low);	

    /* Molded — relief colors (constants, independents de paleta i tema) */
    --relief-molded-dark: var(--color-nearblack);
    --relief-molded-light: var(--color-nearwhite);


}

/*  =====================================================
    👉 TOKENS VARIABLES — CLAR (default)
    Es veu en clar si l'usuari no ha configurat res
    i el SO no està en mode fosc.
    ===================================================== */
:root {
	color-scheme: light dark;

	/* Layout body */
	--cl-lyb-bg: var(--color-palette-800);
	--cl-lyb-border: var(--color-palette-200);

	/* Regions — fons en 3 nivells (hi=high, md=middle, lo=low).
	   Contrasten amb el body: en clar són clares (100/300/500). */
	--cl-lyr-bg-hi: var(--color-palette-100);
	--cl-lyr-bg-md: var(--color-palette-300);
	--cl-lyr-bg-lo: var(--color-palette-500);
	--cl-lyr-border: var(--color-palette-800);
	--cl-lyr-fg: var(--color-palette-800);
	--cl-glass-low: var(--trp-dark-low);
	--cl-glass-half: var(--trp-dark-half);

	/* Components — un nivell per sobre de les regions: contrasten
	   amb elles (en clar són foscos: 900/700/500). hi=high, md=middle, lo=low. */
	--cl-cp-bg-hi: var(--color-palette-900);
	--cl-cp-bg-md: var(--color-palette-700);
	--cl-cp-bg-lo: var(--color-palette-500);
	--cl-cp-border: var(--color-palette-200);
	--cl-cp-fg: var(--color-palette-200);

	/* Invert */
	--cl-invert-black: var(--color-nearblack);
	--cl-invert-white: var(--color-nearwhite);
	--cl-invert-gray: var(--color-gray-700);
	--cl-invert-dark: var(--color-palette-700);
	--cl-invert-light: var(--color-palette-300);
	--cl-invert-brown: var(--color-maroon);

	/* Shadows */
	--shadow-xs: var(--shadow-bk-xs);
	--shadow-sm: var(--shadow-bk-sm);
	--shadow-md: var(--shadow-bk-md);
	--shadow-lg: var(--shadow-bk-lg);
	--shadow-xl: var(--shadow-bk-xl);

	/* State Rings — deriven de --cl-cp-border (varia per tema),
	   per això es re-declaren a cada bloc de tema. */
	--ring-state-border-sm: inset 0 0 0 var(--bw-sm) var(--cl-cp-border);
	--ring-state-border-md: inset 0 0 0 var(--bw-md) var(--cl-cp-border);
	--ring-state-border-lg: inset 0 0 0 var(--bw-lg) var(--cl-cp-border);


/* =====================================================
   👉 DERIVED PATTERNS (definits un sol cop)
   Deriven només d'invariants (relief) o de motion (transició),
   que no canvien per tema; per això es defineixen un sol cop.
   Els patrons que deriven d'un --cl-* que varia per tema
   (--ring-state-*, com --shadow-*) NO viuen aquí: es
   re-declaren a cada bloc de tema perquè segueixin la inversió.
   ===================================================== */

	/* Molded relief */
	--relief-molded-out:
	2px 2px 4px var(--relief-molded-dark),
	-2px -2px 4px var(--relief-molded-light),
	inset 2px 2px 4px transparent,
	inset -2px -2px 4px transparent;

	--relief-molded-in:
	2px 2px 4px transparent,
	-2px -2px 4px var(--relief-molded-light),
	inset 2px 2px 4px var(--relief-molded-dark),
	inset -2px -2px 4px var(--relief-molded-light);


	/* Interactive Transitions — patrons reutilitzables
	per botons, controls i superfícies interactives */
	--transition-interactive:
		box-shadow var(--motion-dur-sm) var(--motion-ease-std),
		background-color var(--motion-dur-sm) var(--motion-ease-std),
		transform var(--motion-dur-sm) var(--motion-ease-out);

}
/*  =====================================================
    👉 TOKENS VARIABLES — FOSC AUTO
    S'aplica quan l'usuari té el SO en mode fosc i
    no ha forçat data-theme.
    ===================================================== */
@media (prefers-color-scheme: dark) {
	:root {

		/* Layout body */
		--cl-lyb-bg: var(--color-palette-200);
		--cl-lyb-border: var(--color-palette-800);

		/* Regions — invertit respecte al clar: en fosc són fosques (900/700/500). */
		--cl-lyr-bg-hi: var(--color-palette-900);
		--cl-lyr-bg-md: var(--color-palette-700);
		--cl-lyr-bg-lo: var(--color-palette-500);
		--cl-lyr-border: var(--color-palette-200);
		--cl-lyr-fg: var(--color-palette-200);
		--cl-glass-low: var(--trp-light-low);
		--cl-glass-half: var(--trp-light-half);

		/* Components — invertit respecte al clar: en fosc són clars (100/300/500). */
		--cl-cp-bg-hi: var(--color-palette-100);
		--cl-cp-bg-md: var(--color-palette-300);
		--cl-cp-bg-lo: var(--color-palette-500);
		--cl-cp-border: var(--color-palette-800);
		--cl-cp-fg: var(--color-palette-800);

		/* Invert */
		--cl-invert-black: var(--color-nearwhite);
		--cl-invert-white: var(--color-nearblack);
		--cl-invert-gray: var(--color-gray-300);
		--cl-invert-dark: var(--color-palette-300);
		--cl-invert-light: var(--color-palette-700);		
		--cl-invert-brown: var(--color-coral);

		/* Shadows */
		--shadow-xs: var(--shadow-wt-xs);
		--shadow-sm: var(--shadow-wt-sm);
		--shadow-md: var(--shadow-wt-md);
		--shadow-lg: var(--shadow-wt-lg);
		--shadow-xl: var(--shadow-wt-xl);

		/* State Rings */
		--ring-state-border-sm: inset 0 0 0 var(--bw-sm) var(--cl-cp-border);
		--ring-state-border-md: inset 0 0 0 var(--bw-md) var(--cl-cp-border);
		--ring-state-border-lg: inset 0 0 0 var(--bw-lg) var(--cl-cp-border);


	}
}

/*  =====================================================
    👉 TOKENS VARIABLES — CLAR MANUAL
    Override forçat per l'app: <html data-theme="light">
    ===================================================== */
[data-theme="light"] {
	color-scheme: light;

	/* Layout body */
	--cl-lyb-bg: var(--color-palette-800);
	--cl-lyb-border: var(--color-palette-200);

	/* Regions — fons en 3 nivells (hi=high, md=middle, lo=low).
	   Contrasten amb el body: en clar són clares (100/300/500). */
	--cl-lyr-bg-hi: var(--color-palette-100);
	--cl-lyr-bg-md: var(--color-palette-300);
	--cl-lyr-bg-lo: var(--color-palette-500);
	--cl-lyr-border: var(--color-palette-800);
	--cl-lyr-fg: var(--color-palette-800);
	--cl-glass-low: var(--trp-dark-low);
	--cl-glass-half: var(--trp-dark-half);

	/* Components — un nivell per sobre de les regions: contrasten
	   amb elles (en clar són foscos: 900/700/500). hi=high, md=middle, lo=low. */
	--cl-cp-bg-hi: var(--color-palette-900);
	--cl-cp-bg-md: var(--color-palette-700);
	--cl-cp-bg-lo: var(--color-palette-500);
	--cl-cp-border: var(--color-palette-200);
	--cl-cp-fg: var(--color-palette-200);

	/* Invert */
	--cl-invert-black: var(--color-nearblack);
	--cl-invert-white: var(--color-nearwhite);
	--cl-invert-gray: var(--color-gray-700);
	--cl-invert-dark: var(--color-palette-700);
	--cl-invert-light: var(--color-palette-300);	
	--cl-invert-brown: var(--color-maroon);

	/* Shadows */
	--shadow-xs: var(--shadow-bk-xs);
	--shadow-sm: var(--shadow-bk-sm);
	--shadow-md: var(--shadow-bk-md);
	--shadow-lg: var(--shadow-bk-lg);
	--shadow-xl: var(--shadow-bk-xl);

	/* State Rings */
	--ring-state-border-sm: inset 0 0 0 var(--bw-sm) var(--cl-cp-border);
	--ring-state-border-md: inset 0 0 0 var(--bw-md) var(--cl-cp-border);
	--ring-state-border-lg: inset 0 0 0 var(--bw-lg) var(--cl-cp-border);

}

/*  =====================================================
    👉 TOKENS VARIABLES — FOSC MANUAL
    Override forçat per l'app: <html data-theme="dark">
    ===================================================== */
[data-theme="dark"] {
	color-scheme: dark;

	/* Layout body */
	--cl-lyb-bg: var(--color-palette-200);
	--cl-lyb-border: var(--color-palette-800);

	/* Regions — invertit respecte al clar: en fosc són fosques (900/700/500). */
	--cl-lyr-bg-hi: var(--color-palette-900);
	--cl-lyr-bg-md: var(--color-palette-700);
	--cl-lyr-bg-lo: var(--color-palette-500);
	--cl-lyr-border: var(--color-palette-200);
	--cl-lyr-fg: var(--color-palette-200);
	--cl-glass-low: var(--trp-light-low);
	--cl-glass-half: var(--trp-light-half);

	/* Components — invertit respecte al clar: en fosc són clars (100/300/500). */
	--cl-cp-bg-hi: var(--color-palette-100);
	--cl-cp-bg-md: var(--color-palette-300);
	--cl-cp-bg-lo: var(--color-palette-500);
	--cl-cp-border: var(--color-palette-800);
	--cl-cp-fg: var(--color-palette-800);

	/* Invert */
	--cl-invert-black: var(--color-nearwhite);
	--cl-invert-white: var(--color-nearblack);
	--cl-invert-gray: var(--color-gray-300);
	--cl-invert-dark: var(--color-palette-300);
	--cl-invert-light: var(--color-palette-700);	
	--cl-invert-brown: var(--color-coral);

	/* Shadows */
	--shadow-xs: var(--shadow-wt-xs);
	--shadow-sm: var(--shadow-wt-sm);
	--shadow-md: var(--shadow-wt-md);
	--shadow-lg: var(--shadow-wt-lg);
	--shadow-xl: var(--shadow-wt-xl);

	/* State Rings */
	--ring-state-border-sm: inset 0 0 0 var(--bw-sm) var(--cl-cp-border);
	--ring-state-border-md: inset 0 0 0 var(--bw-md) var(--cl-cp-border);
	--ring-state-border-lg: inset 0 0 0 var(--bw-lg) var(--cl-cp-border);
}