/*
-- nom: init.css --
-- llibreria: loT --
-- autor: A.Moseguí / TT22 --
-- versió: 26.1.0 --
-- descripció: Reset, normalize, paleta de colors, tipografies base --
*/

/* =============================================
   VARIABLES DE MIDA GLOBALS
   ============================================= */
:root {
	--site-max-wdh: 1200px;
	--site-max-wdh-vw: 100vw;
	--site-max-hgt-vw: 100vh;
	--site-max-hgt-vwm: 100dvh; /* El millor per a mòbils i escriptori */
	--site-max-wdh-cont: 100%;
	--site-max-hgt-cont: 100%;
	--site-min-wdh: 360px;
	--site-min-hgt: 320px;
}

/* =============================================
   PALETA DE COLORS
   ============================================= */
:root {

	--Black: 0, 0, 0; /* #000000 - Negre */
	--DeepBlack: 10, 10, 10; /* #0a0a0a - Negre Intens */
	--SignalBlack: 43, 43, 44; /* #2b2b2c - Negre Senyals. RAL 9004 */
	--GraphiteGray: 71, 74, 80; /* #474a50 - Grafit. RAL 7024 */
	--SlateGray: 79, 83, 88; /* #4f5358 - Pissarra. RAL 7015 */
	--BasaltGray: 87, 93, 94; /* #575d5e - Basalt. RAL 7012 */
	--WhiteAluminum: 161, 161, 160; /* #a1a1a0 - Alumini Blanc. RAL 9006 */
	--StoneGray: 131, 131, 131; /* #838383 - Gris Pedra */
	--Silver: 192, 192, 192; /* #c0c0c0 - Plata */
	--PearlWhite: 227, 217, 198; /* #e3d9c6 - Blanc Perla. RAL 1013 */
	--SignalWhite: 236, 236, 231; /* #ecece7 - Blanc Senyals. RAL 9003 */
	--SilkWhite: 244, 244, 244; /* #f4f4f4 - Blanc Seda */
	--SnowWhite: 251, 251, 251; /* #fbfbfb - Blanc Neu */
	--White: 255, 255, 255; /* #ffffff - Blanc */

	--IvoryGM: 255, 255, 240; /* #fffff0 - Vori GM */
	--IvoryLight: 244, 236, 216; /* #f4ecd8 - Vori Clar */
	--IvoryRal: 230, 210, 181; /* #e6d2b5 - Vori RAL. RAL 1015 */
	--AlmondBeige: 187, 170, 146; /* #bbaa92 - Beix Ametlla */
	--PearlBeige: 144, 131, 112; /* #908370 - Beix Perla. RAL 1035 */
	--Coffee: 51, 42, 36; /* #332a24 - Cafè */
	--BrownBlack: 26, 23, 24; /* #1a1718 - Marró negrós. RAL 8022 */

	--PearlGold: 128, 100, 63; /* #80643f - Or Perla. RAL 1036 */
	--OliveYellow: 71, 64, 46; /* #47402e - Groc Oliva */
	--SignalYellow: 249, 168, 0; /* #f9a800 - Groc Senyals. RAL 1003  */
	--BlueUltramarine: 0, 56, 123; /* #00387b - Blau Ultramar */
	--RoyalBlue: 65, 105, 225; /* #4169E1 - Blau Royal */
	--SignalGreen: 35, 127, 82; /* #237f52 - Verd Senyals */
	--GreenLuminous: 0, 181, 26; /* #00b51a - Verd Lluminós */
	--TrafficGreen: 0, 132, 80; /* #008450 - Verd tràfic. RAL 6024 */
	--FlameRed: 167, 41, 32; /* #a72920 - Roig flama */

	--Maroon: 128, 0, 0; /* #800000 - Granat */
	--Coral: 255, 127, 80; /* #ff7f50 - Corall */
	--Gold: 255, 215, 0; /* #ffd700 - Or */

	--BlackShadow: 191, 175, 178; /* #bfafb2 - Ombra */

	/* Opacitats */
	--OpacityHigh: 0.8;
	--OpacityMedium: 0.5;
	--OpacityLow: 0.2;
}
/*  =====================================================
	PALETA DE TOKENS
	===================================================== */
:root {
	/* Base */
	--color-black: rgb(var(--Black));
	--color-white: rgb(var(--White));

	/* Geo-Memorial */
	--color-nearblack: rgb(var(--DeepBlack));
	--color-nearwhite: rgb(var(--SnowWhite));
	--color-ivorigm:   rgb(var(--IvoryGM));
	--color-maroon:    rgb(var(--Maroon));
	--color-coral:     rgb(var(--Coral));
	--color-gold:      rgb(var(--Gold));

	/* Escala Grisos */
	--color-gray-900: rgb(var(--DeepBlack));
	--color-gray-800: rgb(var(--SignalBlack));
	--color-gray-700: rgb(var(--GraphiteGray));
	--color-gray-600: rgb(var(--BasaltGray));
	--color-gray-500: rgb(var(--StoneGray));
	--color-gray-400: rgb(var(--WhiteAluminum));
	--color-gray-300: rgb(var(--Silver));
	--color-gray-200: rgb(var(--SignalWhite));
	--color-gray-100: rgb(var(--SnowWhite));

	/* Escala Ivori */
	--color-vori-900: rgb(var(--BrownBlack));
	--color-vori-800: rgb(var(--Coffee));
	--color-vori-700: rgb(var(--OliveYellow));
	--color-vori-600: rgb(var(--PearlGold));
	--color-vori-500: rgb(var(--PearlBeige));
	--color-vori-400: rgb(var(--AlmondBeige));
	--color-vori-300: rgb(var(--IvoryRal));
	--color-vori-200: rgb(var(--IvoryLight));
	--color-vori-100: rgb(var(--IvoryGM));

	/* Colors */
	--color-yellow: rgb(var(--SignalYellow));
	--color-green: rgb(var(--TrafficGreen));
	--color-red: rgb(var(--FlameRed));
	--color-blue:   rgb(var(--RoyalBlue));
	--color-darkblue:   rgb(var(--BlueUltramarine));

	/* Ombres negres (per a fons clars) */
	--shadow-bk-xs: 0 1px 2px rgba(var(--SignalBlack), 0.50);
	--shadow-bk-sm: 0 2px 4px rgba(var(--SignalBlack), 0.50);
	--shadow-bk-md: 0 4px 8px rgba(var(--SignalBlack), 0.50);
	--shadow-bk-lg: 0 8px 16px rgba(var(--SignalBlack), 0.70);
	--shadow-bk-xl: 0 12px 24px rgba(var(--SignalBlack), 1.00);

	/* Ombres blanques (per a fons foscos) */
	--shadow-wt-xs: 0 1px 2px rgba(var(--SignalWhite), 0.80);
	--shadow-wt-sm: 0 2px 4px rgba(var(--SignalWhite), 0.80);
	--shadow-wt-md: 0 4px 8px rgba(var(--SignalWhite), 0.80);
	--shadow-wt-lg: 0 8px 16px rgba(var(--SignalWhite), 0.70);
	--shadow-wt-xl: 0 12px 24px rgba(var(--SignalWhite), 1.00);

	/* Transparències */
	--transparency-light-half: rgba(var(--White), var(--OpacityMedium));
	--transparency-dark-half: rgba(var(--Black), var(--OpacityMedium));
	--transparency-light-low: rgba(var(--White), var(--OpacityLow));
	--transparency-dark-low:  rgba(var(--Black), var(--OpacityLow));

/* =============================================
   SPACING
   Escala d'espaiat de referència per a marges,
   paddings i gaps a tots els mòduls
   ============================================= */

	--sp-xs: 1px;
	--sp-sm: 2px;
	--sp-md: 4px;
	--sp-lg: 8px;
	--sp-xl: 16px;
	--sp-2xl: 32px;


/* =============================================
   BORDERS & RADIUS
   ============================================= */

    /* Amplades (Border Widths) */
    --bw-xs: 1px;
    --bw-sm: 2px;
    --bw-md: 3px;
    --bw-lg: 4px;
    --bw-xl: 6px;

    /* Radis de curvatura (Border Radius) */
    --rd-xs: 2px;    /* Per a detalls molt petits */
    --rd-sm: 4px;    /* Estàndard per a botons i inputs */
    --rd-md: 8px;    /* Targetes (cards) i contenidors mitjans */
    --rd-lg: 12px;   /* Modals i seccions destacades */
    --rd-xl: 20px;   /* Estil molt modern i arrodonit */
    --rd-pill: 9999px; /* Per a botons tipus "pastilla" */
    --rd-full: 50%;    /* Per a avatars circulars */

/* =====================================================
   👉 MOTION TOKENS
   Durades i corbes de moviment reutilitzables
   per transitions i animacions de la interfície.
   ===================================================== */

	--motion-dur-xs: .12s;
	--motion-dur-sm: .20s;
	--motion-dur-md: .32s;
	--motion-dur-lg: .50s;

	--motion-ease-std:   ease;
	--motion-ease-in:   ease-in;
	--motion-ease-out:  ease-out;

/* =============================================
   BLUR
   ============================================= */

	--blur-s: 4px;
	--blur-m: 10px;
	--blur-l: 16px;

}

/* =============================================
   TIPOGRAFIES
   Roboto: Licensed under the Apache License v2.0
   ============================================= */
@font-face {
	font-family: 'Roboto';
	font-weight: 400;
	font-style: normal;
	src: url("./font/Roboto-Regular.woff2") format("woff2"),
	     url("./font/Roboto-Regular.woff") format("woff"),
	     url("./font/Roboto-Regular.ttf") format("truetype");
}
@font-face {
	font-family: 'Roboto';
	font-weight: 400;
	font-style: italic;
	src: url("./font/Roboto-Italic.woff2") format("woff2"),
	     url("./font/Roboto-Italic.woff") format("woff"),
	     url("./font/Roboto-Italic.ttf") format("truetype");
}
@font-face {
	font-family: 'Roboto';
	font-weight: 500;
	font-style: normal;
	src: url("./font/Roboto-Medium.woff2") format("woff2"),
	     url("./font/Roboto-Medium.woff") format("woff"),
	     url("./font/Roboto-Medium.ttf") format("truetype");
}
@font-face {
	font-family: 'Tangerine';
	font-weight: 400;
	font-style: normal;
	src: url("./font/Tangerine-Regular.woff2") format("woff2"),
	     url("./font/Tangerine-Regular.woff") format("woff"),
	     url("./font/Tangerine-Regular.ttf") format("truetype");
}
@font-face {
	font-family: 'Tangerine';
	font-weight: 700;
	font-style: normal;
	src: url("./font/Tangerine-Bold.woff2") format("woff2"),
	     url("./font/Tangerine-Bold.woff") format("woff"),
	     url("./font/Tangerine-Bold.ttf") format("truetype");
}
@font-face {
	font-family: 'Nasa';
	font-weight: 400;
	font-style: normal;
	src: url("./font/nasa.woff2") format("woff2"),
	     url("./font/nasa.woff") format("woff"),
	     url("./font/nasa.ttf") format("truetype");
}

:root {
  /* FONTS */
  --font-system-sans: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen-Sans, Ubuntu, Cantarell, Tahoma, "Helvetica Neue", sans-serif;

  --font-default: 'Roboto', sans-serif;
  --font-roboto: 'Roboto', sans-serif;
  --font-tangerine: 'Tangerine', cursive;
  --font-nasa: 'Nasa', sans-serif;
}

/* =============================================
   RESET + NORMALIZE
   Barreja de Eduardo Fierro, John Mircha,
   Meyer, Normalize i aportacions pròpies
   ============================================= */
html {
	box-sizing: border-box;
	width: var(--site-max-wdh-cont);
	font-size: 100%;
	text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
*, *:before, *:after {
	box-sizing: inherit;
}
* {
	padding: 0;
	margin: 0;
	border: 0;
	vertical-align: baseline;
}
body {
	margin: 0;
	width: var(--site-max-wdh-cont);
	/*
	min-height vs height: Si poses height: 100vh, el cos farà exactament la mida de la pantalla. Si el teu text és més llarg, el body no creixerà i el fons es tallarà. Amb min-height, li dius: "com a mínim sigues tan alt com la pantalla, però si hi ha més contingut, creix sense problemes". I millor 100dvh per els scroll dels mòbils.
	*/
	min-height: var(--site-max-hgt-vwm); /* El millor per a mòbils i escriptori */
    background-color: var(--color-gray-500);
	color: var(--color-gray-900);
	font-size: 1rem;
	font-family: var(--font-system-sans);
	line-height: 1.4;
	overflow-x: hidden;
	overflow-y: auto;
}
a {
	text-decoration: none;
	font-size: inherit;
}
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
	margin: var(--sp-md) 0;
	width: 100%;
	border: var(--bw-xs) solid var(--color-gray-700);
}
/* :where() → especificitat 0. Aquest reset és un punt de partida,
   no una imposició: permet que CSS de tercers integrat a la pàgina
   (Leaflet i similars) gestioni els seus propis svg/canvas sense conflicte. */
:were(img, video, svg, picture, canvas) {
	max-width: 100%;
	height: auto;
	display: block;
}
form,
button,
input,
label,
select,
textarea {
	display: block;
	font-family: inherit;
	font-size: inherit;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	background-color: transparent;
	color: inherit;
}
button {
	cursor: pointer;
}
textarea {
	resize: vertical;
}
ul, ol {
	list-style: none;
}
ul ul, ol ol, ul ol, ol ul {
	margin-top: 0;
	margin-bottom: 0;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: var(--bw-sm) solid var(--color-blue, currentColor);
	outline-offset: var(--sp-sm);
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}