/* 
-- nom: rg-look.css --
-- llibreria: loT --
-- grup: Regions --
-- autor: A.Moseguí / TT22 --
-- versió: 26.1.0 --
-- descripció: Aspecte visual de les regions (fons, vora, contorn). Modificadors globals i individuals. --
-- dependència: lyt.css, th-core.css, init.css --
*/

/* =============================================
   TOKENS
   Dos nivells:
   - Tokens font: un per cada valor possible de
     cada modificador. Només es declaren al :root
     els INVARIANTS (transparent, none, 0, blur,
     offsets), que no varien per tema.
   - Tokens actuals: els que consumeix la classe
     base de regió. Els modificadors els reassignen.

   Els valors de color que varien per tema
   (--cl-lyr-*, --cl-glass-*) NO es declaren al
   :root: es resolen directament als modificadors,
   i el defecte de fons al fallback de la classe
   base. Així el color es resol al context de la
   regió i qualsevol variació local (tema, inversió)
   hi arriba, en lloc de quedar congelat al :root.
   ============================================= */
:root {
	/* --- Tokens font invariants: fons --- */
	--rg-bg-ghost: transparent;

	/* --- Tokens font: backdrop-filter --- */
	--rg-bdf-none: none;
	--rg-bdf-glass: blur(var(--blur-m));

	/* --- Tokens font: vora --- */
	--rg-brd-none: none;

	/* --- Tokens font: radi (associat a vora) --- */
	--rg-rad-none: 0;
	--rg-rad-solid: 0;

	/* --- Tokens font: contorn --- */
	--rg-otl-none: none;

	/* --- Tokens font: offset del contorn --- */
	--rg-otl-offset-none: 0;
	--rg-otl-offset-solid-sm: -4px;
	--rg-otl-offset-solid-md: -6px;	

	/* --- Tokens actuals (defectes invariants) --- */
	/* El defecte de --rg-bg viu al fallback de la classe base, no aquí. */
	--rg-bdf: var(--rg-bdf-none);
	--rg-brd: var(--rg-brd-none);
	--rg-rad: var(--rg-rad-none);
	--rg-otl: var(--rg-otl-none);
	--rg-otl-offset: var(--rg-otl-offset-none);
}

/* =============================================
   CLASSE BASE DE REGIÓ
   Les regions consumeixen els tokens actuals.
   Sense cap modificador, el fons pinta amb el
   defecte del fallback (--cl-lyr-bg-md), resolt a
   la regió. La resta de propietats de regió
   (grid-area, height, overflow) viuen a lyt.css.
   ============================================= */
.hd,
.hd-ov,
.bn,
.mn,
.mn-ov,
.as,
.ft,
.ft-ov {
	background-color: var(--rg-bg, var(--cl-lyr-bg-md));
	backdrop-filter: var(--rg-bdf);
	border: var(--rg-brd);
	border-radius: var(--rg-rad);
	outline: var(--rg-otl);
	outline-offset: var(--rg-otl-offset);
}

/* =============================================
   MODIFICADORS GLOBALS (al contenidor)
   Reassignen els tokens actuals al contenidor.
   Totes les regions descendents hereten el canvi.
   ============================================= */

/* --- Fons global --- */
.lyt--rg-bg-solid,
.lyt--rg-bg-solid-md {
	--rg-bg: var(--cl-lyr-bg-md);
	--rg-bdf: var(--rg-bdf-none);
}
.lyt--rg-bg-solid-hi {
	--rg-bg: var(--cl-lyr-bg-hi);
	--rg-bdf: var(--rg-bdf-none);
}
.lyt--rg-bg-solid-lo {
	--rg-bg: var(--cl-lyr-bg-lo);
	--rg-bdf: var(--rg-bdf-none);
}
.lyt--rg-bg-ghost {
	--rg-bg: var(--rg-bg-ghost);
	--rg-bdf: var(--rg-bdf-none);
}

/* --- Contorn global --- */
.lyt--rg-otl-none {
	--rg-otl: var(--rg-otl-none);
	--rg-otl-offset: var(--rg-otl-offset-none);
}
.lyt--rg-otl-solid-sm {
	--rg-otl: 1px solid var(--cl-lyr-border);
	--rg-otl-offset: var(--rg-otl-offset-solid-sm);
}
.lyt--rg-otl-solid-md {
	--rg-otl: 1px solid var(--cl-lyr-border);
	--rg-otl-offset: var(--rg-otl-offset-solid-md);
}

/* --- Vora global --- */
.lyt--rg-brd-none {
	--rg-brd: var(--rg-brd-none);
	--rg-rad: var(--rg-rad-none);
}
.lyt--rg-brd-solid {
	--rg-brd: 1px solid var(--cl-lyr-border);
	--rg-rad: var(--rg-rad-solid);
}

/* =============================================
   MODIFICADORS INDIVIDUALS (a la regió)
   Reassignen els tokens actuals a l'àmbit de la
   regió on viuen. Sempre guanyen sobre els globals
   per cascada (àmbit més intern de l'arbre).
   Selectors agrupats: el mateix valor del token
   per a totes les regions (la classe només actua
   on s'ha posat a l'HTML).
   ============================================= */

/* --- Fons individual --- */
.rg--hd-bg-solid, .rg--hd-bg-solid-md,
.rg--bn-bg-solid, .rg--bn-bg-solid-md,
.rg--mn-bg-solid, .rg--mn-bg-solid-md,
.rg--as-bg-solid, .rg--as-bg-solid-md,
.rg--ft-bg-solid, .rg--ft-bg-solid-md {
	--rg-bg: var(--cl-lyr-bg-md);
	--rg-bdf: var(--rg-bdf-none);
}
.rg--hd-bg-solid-hi,
.rg--bn-bg-solid-hi,
.rg--mn-bg-solid-hi,
.rg--as-bg-solid-hi,
.rg--ft-bg-solid-hi {
	--rg-bg: var(--cl-lyr-bg-hi);
	--rg-bdf: var(--rg-bdf-none);
}
.rg--hd-bg-solid-lo,
.rg--bn-bg-solid-lo,
.rg--mn-bg-solid-lo,
.rg--as-bg-solid-lo,
.rg--ft-bg-solid-lo {
	--rg-bg: var(--cl-lyr-bg-lo);
	--rg-bdf: var(--rg-bdf-none);
}
.rg--hd-bg-ghost,
.rg--bn-bg-ghost,
.rg--mn-bg-ghost,
.rg--as-bg-ghost,
.rg--ft-bg-ghost {
	--rg-bg: var(--rg-bg-ghost);
	--rg-bdf: var(--rg-bdf-none);
}
.rg--hd-bg-glass,
.rg--bn-bg-glass,
.rg--mn-bg-glass,
.rg--as-bg-glass,
.rg--ft-bg-glass {
	--rg-bg: var(--cl-glass-low);
	--rg-bdf: var(--rg-bdf-glass);
}

/* --- Vora individual --- */
.rg--hd-brd-none,
.rg--bn-brd-none,
.rg--mn-brd-none,
.rg--as-brd-none,
.rg--ft-brd-none {
	--rg-brd: var(--rg-brd-none);
	--rg-rad: var(--rg-rad-none);
}
.rg--hd-brd-solid,
.rg--bn-brd-solid,
.rg--mn-brd-solid,
.rg--as-brd-solid,
.rg--ft-brd-solid {
	--rg-brd: 1px solid var(--cl-lyr-border);
	--rg-rad: var(--rg-rad-solid);
}

/* --- Contorn individual --- */
.rg--hd-otl-none,
.rg--bn-otl-none,
.rg--mn-otl-none,
.rg--as-otl-none,
.rg--ft-otl-none {
	--rg-otl: var(--rg-otl-none);
	--rg-otl-offset: var(--rg-otl-offset-none);
}
.rg--hd-otl-solid-sm,
.rg--bn-otl-solid-sm,
.rg--mn-otl-solid-sm,
.rg--as-otl-solid-sm,
.rg--ft-otl-solid-sm {
	--rg-otl: 1px solid var(--cl-lyr-border);
	--rg-otl-offset: var(--rg-otl-offset-solid-sm);
}
.rg--hd-otl-solid-md,
.rg--bn-otl-solid-md,
.rg--mn-otl-solid-md,
.rg--as-otl-solid-md,
.rg--ft-otl-solid-md {
	--rg-otl: 1px solid var(--cl-lyr-border);
	--rg-otl-offset: var(--rg-otl-offset-solid-md);
}