/* Copie de « UPTECH INSTITUTE IDENTITY/Uptech-Institute-Design-System/tokens.css ». Les @font-face sont dans app.css. */
/* Prune & Orange — generated from tokens.json */
:root, [data-theme="light"] {
  --surface: #f6f6f6; /* Fond de page. Le texte `ink` et `ink-muted` s'y lit à plus de 6:1 dans les deux thèmes. */
  --surface-raised: #ffffff; /* Cartes, panneaux et champs posés sur `surface`. */
  --ink: #520345; /* Texte principal sur `surface` et `surface-raised` (13:1 en clair, 13:1 en sombre). */
  --ink-muted: #6b4a64; /* Texte secondaire, légendes et aides sur `surface` et `surface-raised` (7:1 minimum). */
  --brand: #520345; /* Couleur d'identité : boutons principaux, grands aplats, liens. Le texte dessus est `on-brand`. */
  --on-brand: #f6f6f6; /* Texte et icônes posés sur un aplat `brand` (13:1). */
  --accent: #fd6500; /* Orange vif : appel à l'action secondaire, badges, mise en avant. En aplat uniquement sur fond clair (2,8:1 : ne jamais l'utiliser comme texte sur `surface` clair, prendre `accent-text`). Texte dessus : `on-accent`. */
  --on-accent: #520345; /* Texte posé sur un aplat `accent` (4,8:1). */
  --accent-text: #b84a00; /* Texte ou icône orange sur `surface` : 4,8:1 en clair, 4,8:1 sur `surface` sombre (sur `surface-raised` sombre : 4,1:1, réserver aux textes de 19px gras et plus). */
  --highlight: #b9d6fe; /* Bleu ciel : fonds de mise en valeur, sélection, bandeaux d'information. Texte dessus : `on-highlight`. */
  --on-highlight: #520345; /* Texte posé sur un aplat `highlight` (9,7:1). */
  --line: #e2d6df; /* Filets décoratifs et séparateurs qui ne portent pas de sens (moins de 3:1 assumé). */
  --line-strong: #8a6c84; /* Bordures de champs et de contrôles sur `surface` (4,3:1 en clair, 5,1:1 en sombre). */
  --focus: #520345; /* Anneau de focus plein de 2px avec 2px de décalage, sur `surface` et `surface-raised` (13:1 en clair, 8:1 en sombre). */
}
[data-theme="dark"] {
  --surface: #520345;
  --surface-raised: #650a57;
  --ink: #f6f6f6;
  --ink-muted: #e3cbdd;
  --brand: #f6f6f6;
  --on-brand: #520345;
  --accent: #fd6500;
  --on-accent: #520345;
  --accent-text: #fd6500;
  --highlight: #b9d6fe;
  --on-highlight: #520345;
  --line: #7a2e6c;
  --line-strong: #b78cae;
  --focus: #b9d6fe;
}
:root {
  --space-1: 4px; /* Écart minimal entre icône et texte. */
  --space-2: 8px; /* Écart interne des petits contrôles. */
  --space-3: 16px; /* Padding standard des boutons et champs. */
  --space-4: 24px; /* Padding des cartes. */
  --space-5: 32px; /* Écart entre blocs. */
  --space-6: 48px; /* Écart entre sections. */
  --space-7: 64px; /* Marges de page sur grand écran. */
  --radius-sm: 8px; /* Champs, badges, petites tuiles. */
  --radius-md: 16px; /* Boutons et cartes. */
  --radius-lg: 32px; /* Grands aplats et blocs de couverture. */
  --radius-pill: 999px; /* Pastilles et boutons en pilule. */
  --font-display: "Aeonik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "Aeonik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-display: 700 56px/56px var(--font-display); /* Titre de couverture et de page d'accueil, une seule fois par page. */
  --text-heading: 500 32px/38px var(--font-display); /* Titres de section. */
  --text-title: 500 22px/28px var(--font-display); /* Titres de cartes et de blocs. */
  --text-body: 400 16px/24px var(--font-sans); /* Texte courant. */
  --text-small: 400 14px/20px var(--font-sans); /* Aides, légendes, métadonnées. */
  --text-label: 500 12px/16px var(--font-sans); /* Étiquettes en capitales, boutons compacts. */
}
.display {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 56px;
  font-weight: 700;
  letter-spacing: -1px;
}
.heading {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 38px;
  font-weight: 500;
  letter-spacing: 0;
}
.title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 1.5px;
}