/* ============================================================
   03-typography.css — Polices et styles typographiques
   ============================================================ */

/* === CHARGEMENT DES POLICES (Google Fonts via CDN) === */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* === FAMILLES === */
:root {
  --font-display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --font-data:    'JetBrains Mono', 'Consolas', monospace;
  --font-serif:   'Fraunces', 'Georgia', serif;
  --font-body:    'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
}

/* === STYLES DE BASE === */
body {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* === TITRES === */
.display-xl {
  font-family: var(--font-display);
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-black);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.display-lg {
  font-family: var(--font-display);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: -0.03em;
}

.display-md {
  font-family: var(--font-display);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.display-sm {
  font-family: var(--font-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* === CORPS === */
.body-lg  { font-size: var(--font-size-lg);  line-height: 1.6; }
.body-md  { font-size: var(--font-size-md);  line-height: 1.55; }
.body-sm  { font-size: var(--font-size-sm);  line-height: 1.5; }
.body-xs  { font-size: var(--font-size-xs);  line-height: 1.45; }

/* === DATA (chiffres, heures, compteurs) === */
.data-xl {
  font-family: var(--font-data);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  font-feature-settings: "tnum";
  line-height: 1;
  letter-spacing: -0.02em;
}

.data-lg {
  font-family: var(--font-data);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  font-feature-settings: "tnum";
  line-height: 1.1;
}

.data-md {
  font-family: var(--font-data);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  font-feature-settings: "tnum";
}

.data-sm {
  font-family: var(--font-data);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-feature-settings: "tnum";
  letter-spacing: 0.02em;
}

/* === SERIF (moments emotionnels) === */
.serif-xl {
  font-family: var(--font-serif);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-regular);
  font-variation-settings: "opsz" 144;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.serif-md {
  font-family: var(--font-serif);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  font-variation-settings: "opsz" 72;
  line-height: 1.4;
}

/* === LABELS & CAPTIONS === */
.label {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
}

.caption {
  font-family: var(--font-display);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}

/* === HELPERS COULEUR === */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.text-muted     { color: var(--text-muted); }
.text-go        { color: var(--accent-go); }
.text-danger    { color: var(--accent-danger); }
.text-warning   { color: var(--accent-warning); }
.text-premium   { color: var(--accent-premium); }