{
  "name": "Identité Lion",
  "version": 1,
  "color": {
    "themes": [
      { "id": "light", "name": "Clair" },
      { "id": "dark", "name": "Sombre" }
    ],
    "tokens": [
      { "name": "brume", "value": "#FADCDD", "usage": "Palette · rouge le plus clair. Fonds de badges et d'alertes douces côté rouge." },
      { "name": "rose", "value": "#F2A3A6", "usage": "Palette · rouge pastel. Accent sur fond sombre (Encre, Marine)." },
      { "name": "corail", "value": "#E4676E", "usage": "Palette · rouge vif adouci. Grands aplats, illustrations, logo chocht. Pas pour du texte fin sur crème (3,4:1)." },
      { "name": "brique", "value": "#BF4650", "usage": "Palette · rouge de référence (OL adouci). Texte et boutons d'accent sur fond clair (4,7:1 sur Crème)." },
      { "name": "ciel", "value": "#DCE6F5", "usage": "Palette · bleu le plus clair. Fonds de zones, badges et sélections côté bleu." },
      { "name": "pervenche", "value": "#9DB5DD", "usage": "Palette · bleu pastel. Couleur principale sur fond sombre." },
      { "name": "azur", "value": "#5B7FC0", "usage": "Palette · bleu moyen. Anneau de focus, logo agenda, graphiques." },
      { "name": "marine", "value": "#2F4B85", "usage": "Palette · bleu de référence (OL adouci). Boutons principaux, liens, logo QG." },
      { "name": "encre", "value": "#1B2A4A", "usage": "Palette · bleu nuit. Texte principal sur fond clair, fond des zones sombres, logo site perso." },
      { "name": "creme", "value": "#FAF7F2", "usage": "Palette · fond de page clair. Logo et texte sur fond sombre." },
      { "name": "sable", "value": "#F1ECE3", "usage": "Palette · fond secondaire (sections alternées, pied de page)." },
      { "name": "pierre", "value": "#5A6178", "usage": "Palette · gris bleuté. Texte secondaire sur Crème (5,8:1) et Sable (5,2:1)." },

      { "name": "surface", "value": { "light": "#FAF7F2", "dark": "#141F38" }, "usage": "Fond de page." },
      { "name": "surface-raised", "value": { "light": "#FFFFFF", "dark": "#1B2A4A" }, "usage": "Cartes, champs, menus : tout ce qui est posé sur la page." },
      { "name": "surface-sunken", "value": { "light": "#F1ECE3", "dark": "#0F182C" }, "usage": "Sections en retrait, survol des boutons fantômes, blocs de code." },
      { "name": "line", "value": { "light": "#E6DFD3", "dark": "#2C3D63" }, "usage": "Séparateurs et bordures de cartes (décoratif, pas de contraste exigé)." },
      { "name": "line-strong", "value": { "light": "#7C8397", "dark": "#6A7896" }, "usage": "Bordure des champs et boutons secondaires : au moins 3:1 sur surface dans les deux thèmes." },
      { "name": "ink", "value": { "light": "#1B2A4A", "dark": "#FAF7F2" }, "usage": "Texte principal sur surface, surface-raised et surface-sunken (13:1 et plus)." },
      { "name": "ink-muted", "value": { "light": "#5A6178", "dark": "#B8C3DA" }, "usage": "Texte secondaire, aides de champs, métadonnées (5,2:1 et plus sur toutes les surfaces)." },

      { "name": "primary", "value": { "light": "#2F4B85", "dark": "#9DB5DD" }, "usage": "Bleu d'action : bouton principal, liens, onglet actif. 7,9:1 sur surface dans les deux thèmes." },
      { "name": "primary-hover", "value": { "light": "#243B6B", "dark": "#B8CBE8" }, "usage": "Survol et appui du bouton principal." },
      { "name": "primary-soft", "value": { "light": "#DCE6F5", "dark": "#26385F" }, "usage": "Fond doux bleu : badges, survol du bouton secondaire, sélection. Texte dessus en primary." },
      { "name": "on-primary", "value": { "light": "#FFFFFF", "dark": "#141F38" }, "usage": "Texte et icônes sur primary (8,5:1 clair, 7,9:1 sombre)." },

      { "name": "accent", "value": { "light": "#BF4650", "dark": "#F2A3A6" }, "usage": "Rouge d'accent : un seul appel à l'action fort par écran, mise en avant. 4,7:1 sur surface claire." },
      { "name": "accent-hover", "value": { "light": "#A33A44", "dark": "#F7BDBF" }, "usage": "Survol et appui du bouton d'accent." },
      { "name": "accent-soft", "value": { "light": "#FADCDD", "dark": "#43293F" }, "usage": "Fond doux rouge : badges, encarts. Texte dessus en accent-strong." },
      { "name": "accent-strong", "value": { "light": "#8F2F38", "dark": "#F7BDBF" }, "usage": "Texte rouge sur accent-soft (6,2:1)." },
      { "name": "on-accent", "value": { "light": "#FFFFFF", "dark": "#141F38" }, "usage": "Texte sur accent (5:1 clair, 8,2:1 sombre)." },

      { "name": "focus-ring", "value": { "light": "#5B7FC0", "dark": "#9DB5DD" }, "usage": "Contour de focus clavier, 2px avec 2px d'écart (3,7:1 et plus)." },
      { "name": "success", "value": { "light": "#2E7D5B", "dark": "#7FD3AE" }, "usage": "Messages de réussite. Toujours avec un texte ou une icône, jamais la couleur seule." },
      { "name": "danger", "value": { "light": "#B42318", "dark": "#FF9A8F" }, "usage": "Erreurs et actions destructrices. Plus sombre et plus orangé que l'accent pour ne pas le confondre." },

      { "name": "project-qg", "value": { "light": "#2F4B85", "dark": "#9DB5DD" }, "usage": "Couleur du projet QG (Marine). Logo, en-tête, onglet actif." },
      { "name": "project-toolbox", "value": { "light": "#BF4650", "dark": "#F2A3A6" }, "usage": "Couleur du projet toolbox (Brique)." },
      { "name": "project-site-perso", "value": { "light": "#1B2A4A", "dark": "#FAF7F2" }, "usage": "Couleur du site perso (Encre)." },
      { "name": "project-agenda", "value": { "light": "#5B7FC0", "dark": "#7E9DD3" }, "usage": "Couleur du futur projet agenda (Azur). Pour du texte fin sur fond clair, préférer primary (Azur : 3,7:1)." },
      { "name": "project-chocht", "value": { "light": "#E4676E", "dark": "#E4676E" }, "usage": "Couleur du profil gaming chocht (Corail). Pensé pour un fond sombre ; sur clair, réservé au logo et aux grands aplats." }
    ]
  },
  "type": {
    "fonts": [],
    "families": {
      "display": "\"Outfit\", system-ui, sans-serif",
      "sans": "\"Inter\", system-ui, sans-serif",
      "mono": "\"JetBrains Mono\", ui-monospace, monospace"
    },
    "groups": [
      { "name": "Titres", "family": "display", "styles": [
        { "name": "display", "fontSize": "56px", "lineHeight": "60px", "fontWeight": 600, "letterSpacing": "-0.01em", "sample": "Bienvenue au QG", "usage": "Titre d'accueil, un seul par page." },
        { "name": "h1", "fontSize": "40px", "lineHeight": "46px", "fontWeight": 600, "sample": "Mes listes", "usage": "Titre de page." },
        { "name": "h2", "fontSize": "30px", "lineHeight": "36px", "fontWeight": 600, "sample": "Courses de la semaine", "usage": "Titre de section." },
        { "name": "h3", "fontSize": "22px", "lineHeight": "28px", "fontWeight": 600, "sample": "Applications Android", "usage": "Titre de carte ou de bloc." }
      ] },
      { "name": "Texte", "family": "sans", "styles": [
        { "name": "body-lg", "fontSize": "18px", "lineHeight": "28px", "fontWeight": 400, "sample": "Sélectionne les logiciels à installer, on s'occupe du reste.", "usage": "Chapeaux et introductions." },
        { "name": "body", "fontSize": "16px", "lineHeight": "24px", "fontWeight": 400, "sample": "Ajoute une tâche, une note ou une idée d'activité.", "usage": "Texte courant, champs." },
        { "name": "body-strong", "fontSize": "16px", "lineHeight": "24px", "fontWeight": 600, "sample": "3 tâches en retard", "usage": "Emphase dans le texte, libellés de boutons." },
        { "name": "small", "fontSize": "14px", "lineHeight": "20px", "fontWeight": 400, "sample": "Modifié il y a 2 heures", "usage": "Aides, métadonnées, légendes." },
        { "name": "label", "fontSize": "12px", "lineHeight": "16px", "fontWeight": 600, "letterSpacing": "0.08em", "sample": "NOUVEAU", "usage": "Sur-titres et badges, toujours en capitales (text-transform: uppercase)." }
      ] },
      { "name": "Code", "family": "mono", "styles": [
        { "name": "code", "fontSize": "14px", "lineHeight": "20px", "fontWeight": 400, "sample": "winget install Mozilla.Firefox", "usage": "Commandes, scripts, valeurs techniques." }
      ] }
    ]
  },
  "spacing": {
    "note": "Grille de 4px. Les espacements internes des composants utilisent space-2 à space-6, les sections space-12 à space-16.",
    "tokens": [
      { "name": "space-1", "value": "4px", "usage": "Écart icône / texte serré." },
      { "name": "space-2", "value": "8px", "usage": "Écart entre éléments d'un même groupe (icône et libellé d'un bouton)." },
      { "name": "space-3", "value": "12px", "usage": "Écart entre boutons voisins, padding des badges." },
      { "name": "space-4", "value": "16px", "usage": "Écart entre champs d'un formulaire." },
      { "name": "space-6", "value": "24px", "usage": "Padding des cartes, marges latérales mobiles." },
      { "name": "space-8", "value": "32px", "usage": "Écart entre cartes, marges latérales bureau." },
      { "name": "space-12", "value": "48px", "usage": "Écart entre sections." },
      { "name": "space-16", "value": "64px", "usage": "Haut de page, grandes respirations." }
    ]
  },
  "radius": {
    "tokens": [
      { "name": "radius-sm", "value": "8px", "usage": "Champs, petits boutons, liens de navigation." },
      { "name": "radius-md", "value": "10px", "usage": "Boutons." },
      { "name": "radius-lg", "value": "16px", "usage": "Cartes, modales, zones." },
      { "name": "radius-full", "value": "999px", "usage": "Badges et pastilles." }
    ]
  },
  "shadow": {
    "note": "Ombres très légères, teintées Encre. La profondeur vient d'abord des surfaces et des bordures.",
    "tokens": [
      { "name": "shadow-1", "value": { "light": "0 1px 2px rgba(27, 42, 74, 0.06), 0 1px 1px rgba(27, 42, 74, 0.04)", "dark": "0 1px 2px rgba(0, 0, 0, 0.3)" }, "usage": "Cartes au repos." },
      { "name": "shadow-2", "value": { "light": "0 8px 24px rgba(27, 42, 74, 0.10)", "dark": "0 8px 24px rgba(0, 0, 0, 0.45)" }, "usage": "Cartes au survol, menus, modales." }
    ]
  },
  "stroke": {
    "note": "Épaisseurs de trait de l'interface. Le logo a ses propres règles (section Logo).",
    "tokens": [
      { "name": "stroke-border", "value": "1px", "usage": "Bordures de cartes et séparateurs." },
      { "name": "stroke-control", "value": "1.5px", "usage": "Bordures des champs et des boutons secondaires." },
      { "name": "stroke-focus", "value": "2px", "usage": "Anneau de focus clavier." },
      { "name": "stroke-icon", "value": "2px", "usage": "Icônes au trait (grille 24px), cohérentes avec le trait du logo." }
    ]
  }
}