/* Ninja Admin — generated from tokens.json */
:root, [data-theme="dark"] {
  --surface: #191919; /* Fond de page. Sombre : le fond de la planche d'origine. Clair : un papier chaud, pour les longues lectures. */
  --surface-raised: #232322; /* Cartes de script et d'article, menus, panneaux posés sur `surface`. */
  --surface-sunken: #111111; /* Zones en creux : champs de saisie, barre de recherche, pied de carte. */
  --head: #1d1d1b; /* Couleur de la tête des avatars dans le dessin de référence (thème sombre). Dans l'interface, utilise `avatar-fill`, qui passe en négatif en thème clair. */
  --ground-dark: #191919; /* Fond fixe sombre, identique dans les deux thèmes : logo `on-dark`, visuels de marque. */
  --ground-light: #ffffff; /* Fond fixe clair, identique dans les deux thèmes : logo `on-light` et `mono-black`. */
  --avatar-line: #ffffff; /* Contours des avatars et des icons : contour de la tête, bandeau, nœuds, nœuds papillon, contour autocollant des icons, vapeur et ondes. Blanc en sombre ; foncé en clair (rendu négatif). Appliqué automatiquement par le composant `Avatar`. */
  --avatar-fill: #1d1d1b; /* Tissu des avatars : tête et nœuds de bandeau. Foncé en sombre ; blanc en clair (rendu négatif). Masques, yeux et couleurs des icons ne changent pas. */
  --border: #3a3a37; /* Séparateurs et contours de cartes. Décoratif : ne porte jamais seul une information. */
  --border-strong: #74746f; /* Contours de champs, de cases et de boutons secondaires. 3:1 minimum sur `surface`, `surface-raised` et `surface-sunken` dans les deux thèmes. */
  --ink: #ffffff; /* Texte principal et titres, sur `surface`, `surface-raised` et `surface-sunken` (14:1 minimum dans les deux thèmes). */
  --ink-muted: #a3a39e; /* Texte secondaire : métadonnées, dates, compteurs, aides de champ (5,7:1 minimum sur toutes les surfaces). */
  --ink-inverse: #000000; /* Texte posé sur un fond `ink` (bouton sélectionné, info-bulle). */
  --on-mask: #000000; /* Texte et icônes posés sur `accent` ou sur une couleur `mask-*` (11:1 sur `accent`). */
  --accent: var(--mask-gold); /* La couleur d'action de la marque, en aplat : bouton principal, vote actif, onglet actif. Toujours avec `on-mask` dessus. */
  --accent-text: var(--mask-gold); /* Accent en texte : liens, compteur de votes actif, titre survolé (4,6:1 minimum dans les deux thèmes ; l'or pur ne passe pas sur fond clair). */
  --focus: var(--mask-gold); /* Anneau de focus clavier, 2 px plein, décalé de 2 px. 3:1 minimum sur toutes les surfaces. */
  --success: #55ff6d; /* Validé : script testé, lint OK, déploiement réussi. Toujours accompagné d'un mot ou d'une icône. */
  --warning: #e87f31; /* À surveiller : script non testé, version dépréciée, avertissement du linter. Toujours accompagné d'un mot ou d'une icône. */
  --danger: #ff5a64; /* Erreur ou action destructrice : échec, `rm -rf`, suppression. Toujours accompagné d'un mot ou d'une icône. */
  --info: #3ea3f0; /* Information neutre : astuce, note, prérequis. */
  --verified: #8fc6f2; /* Éditeur vérifié : icône du badge « Éditeur vérifié » et icône pleine du Programme éditeur vérifié dans le menu du compte. Sur `surface`, `surface-raised` et `surface-sunken` : 8,6:1 minimum en sombre, 5,4:1 minimum en clair. */
  --code-ground: #111111; /* Fond des blocs de code, sombre dans les deux thèmes : un script se lit comme dans un terminal. */
  --code-raised: #1a1a19; /* Barre et bouton « Afficher les N lignes » d'un bloc de code, sur `code-ground`. */
  --code-border: #3a3a37; /* Séparateurs et contour des boutons à l'intérieur d'un bloc de code. */
  --code-ink: #e8e8e3; /* Texte de code par défaut sur `code-ground` (15:1). */
  --code-comment: #8c8c86; /* Commentaires dans le code, sur `code-ground` (5,6:1). */
  --syntax-keyword: var(--mask-gold); /* Mots-clés (`if`, `for`, `hosts:`, `become:`) sur `code-ground` (10:1). */
  --syntax-string: var(--mask-green); /* Chaînes de caractères sur `code-ground` (14:1). */
  --syntax-number: var(--mask-orange); /* Nombres, ports, booléens sur `code-ground` (6,8:1). */
  --syntax-function: var(--mask-blue); /* Fonctions, commandes, modules Ansible sur `code-ground` (6,2:1). */
  --syntax-variable: var(--mask-purple); /* Variables (`$HOME`, `{{ item }}`) sur `code-ground` (5,4:1). */
  --syntax-type: var(--mask-teal); /* Types, clés YAML, attributs sur `code-ground` (8,7:1). */
  --mask-gold: #edb62e; /* Masque par défaut (16 des 20 avatars de la planche), « .com » du logo, couleur d'accent. Texte sur `ground-dark` : 9,5:1. */
  --mask-blue: #2f9aea; /* Masque bleu. Avatars et icons uniquement, sur `ground-dark`. */
  --mask-green: #55ff6d; /* Masque vert. Avatars et icons uniquement, sur `ground-dark`. */
  --mask-orange: #e87f31; /* Masque orange. Avatars et icons uniquement, sur `ground-dark`. */
  --mask-pink: #e6007e; /* Masque magenta et nœud papillon. Formes uniquement : 3,9:1 sur `ground-dark`, insuffisant pour du texte courant. */
  --mask-red: #f0444f; /* Masque rouge. Avatars et icons uniquement. */
  --mask-purple: #a76bf0; /* Masque violet. Avatars et icons uniquement. */
  --mask-teal: #2ec4b6; /* Masque turquoise. Avatars et icons uniquement. */
  --mask-silver: #c9ccd1; /* Masque argent, le ninja neutre. Avatars et icons uniquement. */
  --shadow-raised: 0 1px 0 rgba(255,255,255,0.04) inset, 0 2px 8px rgba(0,0,0,0.35); /* Carte au repos. En sombre, la bordure `border` porte l'essentiel ; l'ombre reste discrète. */
  --shadow-overlay: 0 12px 32px rgba(0,0,0,0.55); /* Menus, info-bulles, modales : ce qui flotte au-dessus de la page. */
}
[data-theme="light"] {
  --surface: #f6f5f1;
  --surface-raised: #ffffff;
  --surface-sunken: #ecebe6;
  --avatar-line: #1d1d1b;
  --avatar-fill: #ffffff;
  --border: #d6d4cc;
  --border-strong: #807e76;
  --ink: #1d1d1b;
  --ink-muted: #5c5b55;
  --ink-inverse: #ffffff;
  --accent: var(--mask-gold);
  --accent-text: #8a6100;
  --focus: #8a6100;
  --success: #137a37;
  --warning: #a8470a;
  --danger: #c31d2a;
  --info: #155fa8;
  --verified: #1d5fa8;
  --syntax-keyword: var(--mask-gold);
  --syntax-string: var(--mask-green);
  --syntax-number: var(--mask-orange);
  --syntax-function: var(--mask-blue);
  --syntax-variable: var(--mask-purple);
  --syntax-type: var(--mask-teal);
  --shadow-raised: 0 1px 2px rgba(29,29,27,0.06), 0 2px 8px rgba(29,29,27,0.06);
  --shadow-overlay: 0 12px 32px rgba(29,29,27,0.16);
}
:root {
  --space-1: 4px; /* Écart entre une icône et son texte, intérieur d'une étiquette. */
  --space-2: 8px; /* Écart entre étiquettes et petits boutons ; intérieur vertical d'un bouton. */
  --space-3: 12px; /* Intérieur horizontal d'un bouton ou d'un champ ; écart entre lignes de métadonnées. */
  --space-4: 16px; /* Intérieur d'une carte compacte ; écart entre cartes dans une liste. */
  --space-5: 24px; /* Intérieur d'une carte de script ou d'article ; écart entre blocs d'un article. */
  --space-6: 32px; /* Écart entre sections d'une page. */
  --space-7: 48px; /* Marges de page sur grand écran ; écart avant un `h2` d'article. */
  --space-8: 64px; /* Grands blocs de la page d'accueil. */
  --radius-sm: 4px; /* Code en ligne, cases à cocher, étiquettes rectangulaires. */
  --radius-md: 8px; /* Boutons, champs, blocs de code. */
  --radius-lg: 12px; /* Cartes de script et d'article, menus, pastilles d'avatar carrées. */
  --radius-xl: 20px; /* Grands panneaux et modales. */
  --radius-full: 999px; /* Étiquettes de langage en pilule, compteurs, avatars ronds. */
  --border-hairline: 1px; /* Contours de cartes et séparateurs. */
  --border-control: 2px; /* Contours de champs et de boutons secondaires, anneau de focus. */
  --border-sticker: 3px; /* Le contour blanc « autocollant » de la marque, en version interface : pastille d'avatar, badge de rang, carte mise en avant. Toujours `ground-light` sur `ground-dark`. */
  --container-max: 1200px; /* Largeur maximale d'une page (`.na-page`), marges `space-5` de chaque côté. */
  --content-max: 720px; /* Largeur maximale d'un texte à lire : article, fiche de script, formulaire (≈ 68 caractères en `body-lg`). */
  --sidebar: 280px; /* Colonne latérale (filtres, sommaire, auteur) à côté du contenu. */
  --header-height: 64px; /* Hauteur de l'en-tête du site. */
  --card-min: 340px; /* Largeur minimale d'une carte dans une grille de scripts ou d'articles. */
  --avatar-sm: 32px; /* Avatar dans une ligne de métadonnées, un commentaire, l'en-tête. */
  --avatar-md: 48px; /* Avatar dans une liste de ninjas admins, en tête de fiche de script. */
  --avatar-lg: 120px; /* Avatar de la page de profil et du configurateur. */
  --bp-sm: 640px; /* En dessous : mobile. Une colonne, marges `space-4`, grille de cartes sur 1 colonne. */
  --bp-md: 960px; /* En dessous : la colonne latérale passe sous le contenu, la navigation et la recherche de l'en-tête passent dans le menu. */
  --bp-lg: 1280px; /* Au-dessus : la page reste à `container-max`, centrée. */
  --font-display: "Ninja Admin Digits", "Hammersmith One", system-ui, sans-serif;
  --font-text: "IBM Plex Sans", system-ui, sans-serif;
  --font-code: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --text-display: 400 48px/52px var(--font-display); /* Accroche de la page d'accueil, une seule par page. */
  --text-h1: 400 32px/38px var(--font-display); /* Titre d'un article, d'un script ou d'une page. */
  --text-h2: 400 24px/30px var(--font-display); /* Sections d'un article ou d'une fiche de script. */
  --text-h3: 400 19px/24px var(--font-display); /* Sous-sections, titres de cartes. */
  --text-lead: 400 19px/30px var(--font-text); /* Chapô d'un article ou description d'un script, sous le `h1`. */
  --text-body-lg: 400 17px/28px var(--font-text); /* Corps des articles (lecture longue), 68 caractères par ligne au plus. */
  --text-body: 400 15px/24px var(--font-text); /* Texte d'interface par défaut : cartes, formulaires, listes. */
  --text-body-strong: 600 15px/24px var(--font-text); /* Mise en avant dans le texte d'interface, noms d'auteurs, libellés de boutons. */
  --text-body-sm: 400 13px/20px var(--font-text); /* Métadonnées et aides de champ, en `ink-muted`. */
  --text-label: 600 12px/16px var(--font-text); /* Étiquettes de langage, catégories, en-têtes de colonnes. En capitales, approche large comme « ADMIN » dans le logo. */
  --text-code: 400 14px/22px var(--font-code); /* Blocs de code et scripts, sur `code-ground`. */
  --text-code-sm: 400 13px/20px var(--font-code); /* Extraits courts dans les cartes, numéros de ligne. */
  --text-code-inline: 400 0.92em/1 var(--font-code); /* Code dans une phrase, sur `surface-sunken`, avec `radius-sm`. */
  --text-logo-admin: 400 23.24px/1 var(--font-display); /* Ligne « ADMIN » du logotype. Capitales, approche 0,2 em, comme dans le fichier d'origine. Réservé au logo. */
  --text-logo-dotcom: 400 10.48px/1 var(--font-display); /* Le « .COM » du logotype, en `mask-gold`, sur la même ligne de base que « ADMIN ». Réservé au logo. */
}
.display {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 52px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.h1 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 38px;
  font-weight: 400;
  letter-spacing: 0;
}
.h2 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: 0;
}
.h3 {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.lead {
  font-family: var(--font-text);
  font-size: 19px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-lg {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-strong {
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0;
}
.body-sm {
  font-family: var(--font-text);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.code {
  font-family: var(--font-code);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 0;
}
.code-sm {
  font-family: var(--font-code);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.code-inline {
  font-family: var(--font-code);
  font-size: 0.92em;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
}
.logo-admin {
  font-family: var(--font-display);
  font-size: 23.24px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.2em;
}
.logo-dotcom {
  font-family: var(--font-display);
  font-size: 10.48px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.2em;
}
@font-face {
  font-family: "Hammersmith One";
  src: url("fonts/HammersmithOne-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}