/* Vendored from polygonteam/design v0.4.1 (dist/tokens.css). Do not edit: change the design repo, then run `npm run sync:tokens`. */
/*
 * GENERATED from spec/tokens.json by scripts/build-tokens.mjs. Do not edit.
 * Components use semantic tokens (color-*, polarity-*, error-*), never
 * primitives (grey-*, brand*-*, white, off-white, *-100).
 */
:root {
  /* color */
  --grey-100: #eaeaea; /* Primitive (colors.svg). Jamais utilisée directement dans un composant : passer par un token color-*. */
  --grey-200: #e0e0e0; /* Primitive (colors.svg). */
  --grey-300: #a7a7a7; /* Primitive (colors.svg). */
  --grey-400: #808080; /* Primitive (colors.svg). */
  --grey-600: #444444; /* Primitive (colors.svg). */
  --grey-800: #2e2e2e; /* Primitive (colors.svg). */
  --grey-900: #1a1a1a; /* Primitive (colors.svg). Aussi l'encre de toutes les icônes et du logo foncé. */
  --white: #ffffff; /* Primitive (colors.svg). */
  --off-white: #f5f5f5; /* Primitive, HORS PALETTE : annotée dans top_concepts_shelf.svg mais absente de colors.svg. Voir les points ouverts. */
  --brand1-10: #fdf1ec; /* Primitive. Marque 1 (orange), teinte. */
  --brand1-25: #fbdcd1; /* Primitive. Marque 1 (orange), clair. */
  --brand1-100: #ff6a40; /* Primitive. Marque 1 pleine : l'orange du logo. Décoratif seulement : 2,8:1 sur blanc, jamais pour du texte. */
  --brand2-10: #f0f6f2; /* Primitive. Marque 2 (vert), teinte. */
  --brand2-25: #daeae0; /* Primitive. Marque 2 (vert), clair. */
  --brand2-100: #56ae80; /* Primitive. Marque 2 pleine. Décoratif seulement : 2,7:1 sur blanc, jamais pour du texte. */
  --brand3-10: #f3f6fa; /* Primitive. Marque 3 (bleu), teinte. */
  --brand3-25: #e2eaf4; /* Primitive. Marque 3 (bleu), clair. */
  --brand3-100: #83aad6; /* Primitive. Marque 3 pleine. Décoratif seulement : 2,4:1 sur blanc, jamais pour du texte. */
  --negatif-100: #fc6030; /* Primitive (colors.svg). Accent sémantique négatif. Pas encore associé à un rôle : le code utilise polarity-negative. Voir les points ouverts. */
  --positif-100: #2daefd; /* Primitive (colors.svg). Accent sémantique positif (bleu). Pas encore associé à un rôle : le code utilise polarity-positive. */
  --pourpre-100: #971c9b; /* Primitive (colors.svg). Fond de l'avatar utilisateur selon user_menu.svg ; l'initiale blanche y atteint 7,1:1. */
  --violet-100: #c67fff; /* Primitive (colors.svg). Réservée, pas encore utilisée. */
  --orange-100: #ff9600; /* Primitive (colors.svg). Réservée, pas encore utilisée. */
  --color-page-bg: var(--off-white); /* Fond de l'application, derrière toutes les surfaces. */
  --color-surface: var(--white); /* Fond par défaut des cartes, barres, champs et menus. */
  --color-surface-soft: var(--off-white); /* Surface neutre : pastille de concept, champ de recherche et d'ajout de l'étagère. */
  --color-surface-raised: var(--grey-100); /* Habillage des popups, cellule active. */
  --color-surface-hover: var(--off-white); /* Survol discret sur les surfaces blanches. */
  --color-control-hover: var(--grey-100); /* Survol plus marqué sur les boutons-icônes, pastilles et boutons pilule. */
  --color-surface-dark: var(--grey-900); /* Bande sombre décorative tout en haut des pages d'authentification ; fond des boutons pleins sombres (dialogues de graph-board, portail spectateur). */
  --color-surface-dark-hover: var(--grey-800); /* Survol d'un bouton plein sombre : copie et confirmation des dialogues Partager et Terminer de graph-board, bouton du portail spectateur. color-text-on-dark y atteint 13,6:1. */
  --color-surface-disabled: var(--grey-200); /* Fond d'un bouton plein désactivé (portail spectateur), avec un libellé color-text-muted (3,0:1, admis pour un état désactivé). */
  --color-overlay: rgba(46, 46, 46, 0.55); /* Voile derrière les fenêtres modales (grey-800 à 55 %). Issu du code (dialogues de graph-board) ; absent des fichiers du designer. */
  --color-border-subtle: var(--grey-100); /* Filets de séparation, contours légers des contrôles flottants et des menus. */
  --color-border: var(--grey-200); /* Contour par défaut : bouton pilule, liste déroulante. */
  --color-border-strong: var(--grey-300); /* Contour appuyé, cible de survol. */
  --color-border-hover: var(--grey-400); /* Survol d'un contour color-border. */
  --color-text: var(--grey-900); /* Texte principal et titres sur color-surface, color-page-bg et color-surface-raised (14:1 ou plus). */
  --color-text-body: var(--grey-800); /* Texte courant et valeurs saisies, sur toute surface claire (11:1 ou plus). */
  --color-text-secondary: var(--grey-600); /* Texte secondaire : nom du produit, entrées de menu, libellés des contrôles flottants (8:1 ou plus). */
  --color-text-muted: var(--grey-400); /* Indications et textes d'état. ÉCHOUE au niveau AA pour du texte courant : 3,9:1 sur color-surface, 3,6:1 sur color-page-bg. Réserver aux textes non essentiels ou aux tailles de 24 px et plus. */
  --color-text-disabled: var(--grey-300); /* Texte désactivé, textes indicatifs (placeholders), icônes de champ au repos. 2,4:1 sur blanc : états décoratifs ou désactivés seulement. */
  --color-text-on-dark: var(--white); /* Texte sur color-surface-dark et sur le fond de l'avatar. */
  --color-avatar-fallback: #6b7280; /* Fond de l'avatar quand l'utilisateur n'a pas de courriel ; sinon la teinte est dérivée du courriel. Initiale color-text-on-dark : 4,8:1. Issu du code (TopBar.jsx). HORS PALETTE. */
  --color-selected: #4a90d9; /* Anneau de sélection et de focus sur les nœuds du canevas. HORS PALETTE. 3,3:1 sur blanc : suffisant (3:1) pour un anneau. */
  --color-focus-ring: var(--grey-400); /* Contour de focus du champ de code du portail spectateur. 3,6:1 sur color-page-bg. Voir les points ouverts (P11). */
  --color-focus-ring-brand: var(--brand1-100); /* Contour de focus du bouton du portail spectateur. ÉCHOUE : 2,6:1 sur color-page-bg, sous le seuil de 3:1 d'un indicateur de focus. Voir les points ouverts (P11). */
  --color-selection-bg: rgba(224, 224, 224, 0.25); /* Remplissage du rectangle de sélection (grey-200 à 25 %). */
  --color-edge-preview: #b1b1b7; /* Flèche d'aperçu pendant la création d'un lien ; identique au trait d'un lien neutre (sans polarité) de React Flow. HORS PALETTE. */
  --color-edge-selected: #555555; /* Trait et pointe de flèche d'un lien sélectionné ou mis en évidence. 6,8:1 sur color-page-bg. Issu du code (edgeMarkers.js ; même valeur que le défaut de React Flow). HORS PALETTE. */
  --polarity-positive: #1976d2; /* Lien causal « + » : trait, pointe de flèche, icône. HORS PALETTE. 4,2:1 sur color-page-bg. Lu par le JS via getComputedStyle. */
  --polarity-negative: #c62828; /* Lien causal « − » : trait, pointe de flèche, icône. HORS PALETTE. 5,2:1 sur color-page-bg. Le bleu et le rouge diffèrent aussi en luminosité : ils restent distincts pour les personnes daltoniennes rouge-vert. */
  --polarity-positive-tint: #e3f2fd; /* Fond de la cellule « + » sélectionnée dans l'éditeur de lien. */
  --polarity-negative-tint: #ffebee; /* Fond de la cellule « − » sélectionnée dans l'éditeur de lien. */
  --error-bg: #fee2e2; /* Fond du bandeau d'erreur. HORS PALETTE. */
  --error-border: #fca5a5; /* Contour du bandeau d'erreur. HORS PALETTE. */
  --error-text: #991b1b; /* Texte du bandeau d'erreur, sur error-bg (6,8:1). HORS PALETTE. */
  --color-accent: var(--brand3-100); /* Accent d'information des dialogues de graph-board : disque d'icône de Terminer. Jamais pour du texte (2,4:1 sur color-surface) ; les titres de dialogue sont en color-text. ÉCHOUE sous le « ! » blanc du disque (2,4:1). Voir les points ouverts (P10). */
  --color-accent-tint: var(--brand3-10); /* Fond de l'en-tête du dialogue Terminer de graph-board. */
  --color-status-live: var(--brand2-100); /* Point pulsant « en direct » de la vue spectateur de graph-board, toujours accompagné du libellé. 2,7:1 sur color-surface : le point seul ne porte pas le sens. */

  /* type */
  --font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-family-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-size-md: 16px; /* Texte courant, libellé de pastille de concept, valeur saisie. Exposé aux applications sous --font-size-md. */
  --font-size-sm: 14px; /* Libellés secondaires, boutons, menus, nom du produit. Exposé sous --font-size-sm. */
  --font-size-avatar: 9.33px; /* Initiale de l'avatar, en color-text-on-dark (user_menu.svg). Exposé sous --font-size-avatar. */

  /* fontWeight */
  --font-weight-light: 300; /* Initiale de l'avatar. */
  --font-weight-regular: 400; /* Tout le reste. */

  /* spacing */
  --space-xxs: 2px; /* Écarts minimes. */
  --space-xs: 4px; /* Écarts serrés entre éléments liés ; écart entre entrées de menu. */
  --space-sm: 6px; /* Écart entre pastilles (choix du designer, hors grille de 8). */
  --space-md: 8px; /* Écart par défaut : icône de champ et texte, éléments de l'en-tête, lignes de formulaire. */
  --space-lg: 16px; /* Marge intérieure horizontale des champs et pastilles ; gouttières de page. */
  --space-xl: 18px; /* Marge intérieure verticale des pastilles (choix du designer, hors grille de 8). */

  /* radius */
  --radius-sm: 2px; /* Champs de recherche et d'ajout de l'étagère, boutons-icônes (CR 2 pt). */
  --radius-md: 4px; /* Pastille de concept, barre d'étagère, champ de connexion, bandeau d'erreur (CR 4 pt). */
  --radius-lg: 8px; /* Pilule autour de la pastille active, menu déroulant (CR 8 pt). */
  --radius-pill: 999px; /* Boutons pilule et contrôles flottants (connexion, zoom, étagère repliée). */

  /* shadow */
  --shadow-chip: 0 0 1px rgba(0, 0, 0, 0.03); /* Pastille de concept (filtre SVG de top_concepts_shelf.svg). */
  --shadow-bar: 0 2px 2px rgba(0, 0, 0, 0.05); /* Barre d'étagère, champ de connexion. */
  --shadow-float: 0 1px 3px rgba(0, 0, 0, 0.06); /* Contrôles pilule flottant sur le canevas. Issu du code ; absent des fichiers du designer. */
  --shadow-popup: 0 2px 8px rgba(0, 0, 0, 0.15); /* Popups surélevés : éditeur de lien, menu d'actions d'un nœud. */
  --shadow-menu: 0 4px 16px rgba(0, 0, 0, 0.08); /* Menus déroulants : menu utilisateur, menu d'exercice. Issu du code. */
  --shadow-dialog: 0 12px 40px rgba(0, 0, 0, 0.2); /* Fenêtres modales, au-dessus de color-overlay. Issu du code. */

  /* size */
  --chip-height: 48px; /* Hauteur d'une pastille de concept. */
  --chip-padding-x: 16px; /* Marge intérieure horizontale d'une pastille de concept. */
  --chip-padding-y: 18px; /* Marge intérieure verticale d'une pastille de concept (annotation). */
  --shelf-height: 60px; /* Hauteur de la barre d'étagère. */
  --shelf-padding: 8px; /* Marge intérieure de la barre d'étagère. */
  --shelf-gap: 6px; /* Écart entre les pastilles d'une étagère. */
  --field-height: 46px; /* Hauteur d'un champ de texte : connexion, recherche et ajout dans l'étagère. */
}