/* ======================================================
   TOKENS — Sistema de disseny "Professor de socials"
   ====================================================== */

:root {
	/* Cool neutrals */
	--white:        #FFFFFF;
	--paper:        #F7F8FA;
	--paper-2:      #EEF1F5;
	--line:         #D8DDE3;
	--line-soft:    #E5E9EE;
	--grey-1:       #B7BDC6;
	--grey-2:       #7C848E;
	--grey-3:       #4A5159;
	--ink:          #0A0C10;
	--ink-soft:     #15181E;

	/* Accent (l'únic color vibrant del sistema) */
	--accent:       #FF3B1F;
	--accent-tint:  rgba(255, 59, 31, 0.10);
	--accent-deep:  #C8240B;

	/* Tipografies */
	--display: "Inter", system-ui, sans-serif;
	--sans:    "Inter", "Helvetica Neue", Arial, sans-serif;
	--mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

	/* Mètrica */
	--maxw:   1320px;
	--gutter: clamp(20px, 3vw, 56px);
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

a { color: inherit; }

/* Escala tipogràfica utilitària */
.h-display { font: 600 clamp(64px, 11vw, 196px)/0.88 var(--display); letter-spacing: -0.05em; }
.h1        { font: 600 clamp(44px, 6vw, 96px)/0.96 var(--display);   letter-spacing: -0.04em; }
.h2        { font: 600 clamp(32px, 3.8vw, 56px)/1.0 var(--display);  letter-spacing: -0.03em; }
.h3        { font: 600 clamp(22px, 2vw, 30px)/1.15 var(--display);   letter-spacing: -0.02em; }

.kicker  { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey-2); }
.eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); }
.lede    { font: 400 clamp(17px, 1.5vw, 22px)/1.45 var(--sans); color: var(--grey-3); letter-spacing: -0.005em; text-wrap: pretty; }

p { text-wrap: pretty; }