/**
 * Theme-IA — Frontend Runtime CSS
 *
 * Importe les variables tokens générées depuis design-system/tokens.generated.css
 * Ce fichier est le SEUL point d'entrée CSS du frontend pour les tokens.
 * Il sera complété en Phase 4 par theme-ia.css (composants blocs).
 *
 * Convenience classes :
 *   .tia-heading → font-family/tracking/leading pour les titres
 *   .tia-body    → font-family/tracking/leading pour les paragraphes
 *   .tia-mute    → couleur muted
 */

@import url('../../design-system/tokens.generated.css');

/* ---------- Reset doux ciblé ---------- */
.tia-heading,
.tia-body {
	margin: 0;
	color: var(--tia-color-text);
}

/* ---------- Heading family ---------- */
.tia-heading {
	font-family: var(--tia-font-heading);
	letter-spacing: var(--tia-tracking-heading);
	line-height: var(--tia-leading-heading);
	font-weight: var(--tia-weight-bold);
}

.tia-heading[data-level="1"] { font-size: var(--tia-text-hero); }
.tia-heading[data-level="2"] { font-size: var(--tia-text-3xl); }
.tia-heading[data-level="3"] { font-size: var(--tia-text-xl); font-weight: var(--tia-weight-medium); }
.tia-heading[data-level="4"] { font-size: var(--tia-text-lg); font-weight: var(--tia-weight-medium); }

/* ---------- Body family ---------- */
.tia-body {
	font-family: var(--tia-font-body);
	letter-spacing: var(--tia-tracking-body);
	line-height: var(--tia-leading-body);
	font-size: var(--tia-text-md);
	font-weight: var(--tia-weight-regular);
}

.tia-body[data-variant="lead"]    { font-size: var(--tia-text-lg); color: var(--tia-color-text); }
.tia-body[data-variant="caption"] { font-size: var(--tia-text-sm); color: var(--tia-color-text-muted); }

.tia-mute { color: var(--tia-color-text-muted); }