/*
 * Sistema de disseny — Lluçanès Territori Serè
 * Valors extrets del manual d'identitat corporativa (MANUAL_IDENTITAT_LLUÇANES_TURISME.pdf).
 * Aquest fitxer és l'ÚNICA font de veritat de colors, tipografies i espais.
 */

/* ── Tipografies de marca (locals, sense Google Fonts) ── */
@font-face {
	font-family: 'ITC Grouch';
	src: url('../fonts/itc-grouch.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Rubik';
	src: url('../fonts/rubik-light.woff2') format('woff2');
	font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Rubik';
	src: url('../fonts/rubik-regular.woff2') format('woff2');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Rubik';
	src: url('../fonts/rubik-medium.woff2') format('woff2');
	font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Rubik';
	src: url('../fonts/rubik-bold.woff2') format('woff2');
	font-weight: 700; font-style: normal; font-display: swap;
}

:root {
	/* ── Colors principals (Pantone 376C i 875C) ── */
	--tll-verd: #80bc00;
	--tll-marro: #8f6d4f;

	/* Derivats per a interacció i fons (no són de manual: escalats del principal) */
	--tll-verd-fosc: #6a9c00;
	--tll-verd-molt-fosc: #4e7200;
	--tll-verd-clar: #f2f8e6;
	--tll-marro-fosc: #74563d;
	--tll-marro-clar: #f7f3ee;

	/* ── Colors secundaris del manual (04.2) ── */
	--tll-groc-clar: #ffc466;
	--tll-groc: #e8a51f;
	--tll-taronja: #f78b5c;
	--tll-vermell: #f94646;
	--tll-rosa: #ff99d3;
	--tll-lila: #b67eb7;
	--tll-blau-clar: #71cbf4;
	--tll-blau: #006598;
	--tll-verd-bosc: #007934;

	/* ── Neutres ── */
	--tll-negre: #1d1d1b;
	--tll-text: #2f2f2d;
	--tll-text-suau: #6b6b66;
	/* Els mateixos, amb els noms que el codi ja invocava però que no existien:
	   set regles els demanaven amb un valor de reserva i funcionaven per
	   casualitat. Millor que existeixin que no pas que el sistema depengui
	   d'una reserva escrita a mà a set llocs. */
	--tll-gris: #6b6b66;
	--tll-gris-text: #6b6b66;
	--tll-linia: #e5e2db;
	--tll-fons: #ffffff;
	--tll-fons-suau: #faf9f6;

	/* ── Colors oficials dels àmbits turístics ──
	   Extrets de la iconografia de categories del manual de marca
	   (ICONOGRAFIA_CATEGORIES_LLUCANES_TURISME). Són els colors que ja
	   fa servir el Consorci als seus materials impresos. */
	--tll-c-gastronomia: #ffb700;
	--tll-c-natural: #499462;
	--tll-c-patrimoni: #95785d;
	--tll-c-pobles: #b96955;
	--tll-c-actiu: #6ac04a;
	--tll-c-fires: #ff9248;
	--tll-c-identitat: #e1b87e;
	--tll-c-esdeveniments: #3894e0;

	/* Color de cada tipus de recurs, derivat dels àmbits oficials.
	   Nota: patrimoni i natural ja tenen el seu color a dalt; no es redefineixen
	   (una variable que s'apunta a si mateixa queda invàlida i cau al valor per defecte). */
	--tll-c-allotjament: var(--tll-marro);
	--tll-c-restauracio: var(--tll-c-gastronomia);
	--tll-c-productor-comerc: var(--tll-c-gastronomia);
	--tll-c-ruta: var(--tll-c-actiu);
	--tll-c-esdeveniment: var(--tll-c-esdeveniments);
	/* Tipus nou: empreses que venen activitats. Se li dona el lila secundari
	   del manual, que no estava agafat per cap altre àmbit. */
	--tll-c-activitat: var(--tll-lila);
	--tll-c-identitat-tipus: var(--tll-c-identitat);

	/* ── Els mateixos àmbits, en versió apta per a text ──
	   Els colors oficials de dalt NO es toquen: han de seguir sent els del
	   manual perquè es facin servir en franges, fons i il·lustració, on cap
	   norma d'accessibilitat s'hi aplica.

	   Però cap dels vuit arriba als 4,5:1 que exigeix el RD 1112/2018 quan
	   porten text a sobre o SÓN text petit: gastronomia es queda a 1,75:1 i
	   identitat a 1,85:1 —a la pràctica, groc sobre blanc—. Aquestes variants
	   mantenen el to i la saturació de la marca i pugen la lluminositat just
	   fins a passar. Totes donen entre 4,60 i 4,70:1 contra blanc.

	   Com que el contrast és simètric, la mateixa variable serveix per a text
	   d'aquest color sobre blanc i per a fons d'aquest color sota text blanc. */
	--tll-c-gastronomia-fosc:   #986d00;
	--tll-c-natural-fosc:       #408256;
	--tll-c-patrimoni-fosc:     #8b7057;
	--tll-c-pobles-fosc:        #b05d49;
	--tll-c-actiu-fosc:         #45832e;
	--tll-c-fires-fosc:         #c65000;
	--tll-c-identitat-fosc:     #9d6b25;
	--tll-c-esdeveniments-fosc: #1e78c3;

	/* I les derivades per tipus de fitxa. El marró d'allotjament ja passa
	   (4,70:1) i no cal tocar-lo. */
	--tll-c-allotjament-fosc:      var(--tll-marro);
	--tll-c-restauracio-fosc:      var(--tll-c-gastronomia-fosc);
	--tll-c-productor-comerc-fosc: var(--tll-c-gastronomia-fosc);
	--tll-c-ruta-fosc:             var(--tll-c-actiu-fosc);
	--tll-c-esdeveniment-fosc:     var(--tll-c-esdeveniments-fosc);
	--tll-c-activitat-fosc:        #a25ba3;
	--tll-c-identitat-tipus-fosc:  var(--tll-c-identitat-fosc);

	/* ── Tipografia ── */
	--tll-font-titol: 'ITC Grouch', Georgia, 'Times New Roman', serif;
	--tll-font-text: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/*
	 * Escala tipogràfica fluida.
	 *
	 * Molt contrastada a propòsit: la tipografia de titulars és la peça amb més
	 * caràcter de la marca i, petita, no es distingeix de qualsevol altra serif.
	 * Als seus fullets i cartells sempre va gran; aquí, igual.
	 */
	/* La mida de la barra d'utilitats i del canviador d'idioma: 11,84 px. No hi
	   era a l'escala i es repetia escrita a mà a dos llocs. */
	--tll-t-xxs: 0.74rem;
	/* Pujada de 0,8rem (12,8 px) a 0,85: era la mida dels distintius de les
	   targetes, dels municipis i de les etiquetes dels filtres, i a 12,8 px
	   una part de la gent que visita una web de turisme —que no és jove—
	   simplement no els llegia. */
	--tll-t-xs: 0.85rem;
	--tll-t-s: 0.9rem;
	--tll-t-base: 1.0625rem;                                    /* 17px de text */
	--tll-t-m: clamp(1.15rem, 0.5vw + 1rem, 1.35rem);           /* subtítols, títols de targeta */
	--tll-t-l: clamp(1.6rem, 2vw + 1rem, 2.2rem);               /* h3 */
	--tll-t-xl: clamp(2.1rem, 3.4vw + 1rem, 3.2rem);            /* h2 */
	--tll-t-xxl: clamp(2.8rem, 5.5vw + 1rem, 4.8rem);           /* h1 i capçals */

	/* Interlineat: com més gran és el text, més ajustat ha d'anar. */
	--tll-int-titol: 1.04;
	--tll-int-titol-petit: 1.15;
	--tll-int-text: 1.65;

	/* Color dels titulars: el marró de marca, el mateix del logotip. El verd
	   queda alliberat per a allò que es pot clicar (botons, enllaços, actius). */
	--tll-titol: var(--tll-marro);
	--tll-titol-petit: var(--tll-negre);

	/* ── Espai, radis i ombres ── */
	--tll-esp-xs: .4rem;
	--tll-esp-s: .85rem;
	--tll-esp-m: 1.5rem;
	--tll-esp-l: clamp(2rem, 3vw, 3rem);
	--tll-esp-xl: clamp(3rem, 6vw, 5.5rem);
	--tll-esp-xxl: clamp(4.5rem, 9vw, 8rem);

	/* Ritme vertical entre seccions: l'«aire» del territori serè.
	   ⚠️ DEFINIT I SENSE FER SERVIR. Les seccions de la portada porten cada una
	   el seu clamp propi, amb valors en vh i no en vw, i canviar-los ara mouria
	   l'espaiat vertical de tota la portada: és una decisió de disseny, no una
	   neteja. O s'aplica de debò o s'esborra amb el comentari; mentre estigui
	   així promet un ritme que no es compleix. */
	--tll-esp-seccio: clamp(3.5rem, 7vw, 7rem);

	/*
	 * Cantonades gairebé rectes. La marca ve del món imprès —fullets, cartells,
	 * rètols— i allà tot són caixes rectes; les cantonades molt arrodonides li
	 * donaven un aire d'aplicació que no és seu. Els botons sí que van rodons
	 * del tot (--tll-radi-ple), i així es distingeixen d'una caixa qualsevol.
	 */
	--tll-radi-s: 2px;
	--tll-radi: 3px;
	--tll-radi-l: 4px;
	--tll-radi-ple: 999px;

	--tll-ombra-s: 0 1px 3px rgba(29, 29, 27, .07);
	--tll-ombra: 0 4px 16px rgba(29, 29, 27, .09);
	--tll-ombra-l: 0 12px 32px rgba(29, 29, 27, .13);

	--tll-ample: 1240px;
	--tll-ample-text: 62ch;
	--tll-transicio: .2s cubic-bezier(.2, .7, .3, 1);
}

/* ── El blau del tema ─────────────────────────────────────────────────────
   El GeneratePress porta una paleta pròpia amb un blau (#1e73be) que fa servir
   per a l'entrada activa del menú i per al sobrevol. No és cap color de la
   marca, i es veia a totes les pàgines: l'entrada del menú on ets, en blau.

   S'apaga aquí, a l'arrel, i no regla per regla del menú, perquè el tema fa
   servir la mateixa variable a més llocs (enllaços dels blocs, paginació) i
   anar-los corregint un a un vol dir descobrir-ne un de nou cada vegada. Aquest
   full es carrega DESPRÉS del tema, així que aquesta definició guanya.

   Es fa servir el verd fosc i no el verd de marca perquè aquí és color de text
   i el de marca només dona 2,3:1 sobre blanc (vegeu el bloc de contrast). */
:root {
	--accent: var(--tll-verd-molt-fosc);
}

/* ── Contrast ─────────────────────────────────────────────────────────────
   El verd de marca (#80bc00) sobre blanc dona 2,3:1, i el mínim que exigeix
   la norma d'accessibilitat és 4,5:1. Com que aquesta web és d'un ens públic,
   la norma no és una recomanació: és el RD 1112/2018.

   El verd es manté tal com és allà on és decoració —vores, fons, il·lustració—,
   perquè allà no s'hi aplica. Per a TEXT es fa servir --tll-verd-molt-fosc
   (#4e7200, 5,6:1), que és el mateix color de la família però llegible.

   Si algun dia s'afegeix text verd, ha de fer servir aquesta variable. */