/*
 * shared/ui-kit/assets/css/ui-tokens.css
 *
 * Tokens CSS de la charte devlooper.io, en miroir de
 * tailwind.config.shared.js — cf. methodologie-projet-generic.md §12.1
 * ("Tokens CSS pour harmoniser hauteurs, rayons, couleurs focus").
 *
 * À charger AVANT ui-components.css. Utile même sur les éléments qui
 * compilent Tailwind (les composants JS des widgets ui-select/ui-upload,
 * les states hors utilitaires Tailwind, etc. s'appuient sur ces variables
 * plutôt que sur des valeurs en dur).
 *
 * Ne pas éditer une valeur ici sans la répercuter dans
 * tailwind.config.shared.js (et inversement) — les deux fichiers sont la
 * même source de vérité sous deux formats.
 */

:root {
  /* Neutres / fond papier */
  --ui-color-paper: #F8F6F1;
  --ui-color-paper-2: #EFEAE0;
  --ui-color-paper-3: #E9E3D6;
  --ui-color-ink: #1E2436;
  --ui-color-ink-soft: #5B6478;
  --ui-color-ink-faint: #8890A0;
  --ui-color-line: #E1DBCC;

  /* Accent principal (brand — bleu) */
  --ui-color-brand-50: #F1F4FA;
  --ui-color-brand-100: #E3E9F5;
  --ui-color-brand-200: #C3D0E8;
  --ui-color-brand-300: #9FB1D6;
  --ui-color-brand-400: #7791C1;
  --ui-color-brand-500: #4E66A4;
  --ui-color-brand-600: #3C5088;
  --ui-color-brand-700: #2E3F6E;
  --ui-color-brand-800: #23304F;
  --ui-color-brand-900: #171F35;

  /* Accent secondaire (mesh — vert-sarcelle), blocs CompanyMesh/techniques */
  --ui-color-mesh-50: #EDF7F5;
  --ui-color-mesh-100: #D7EEEA;
  --ui-color-mesh-200: #AFDDD4;
  --ui-color-mesh-300: #7CC5B8;
  --ui-color-mesh-400: #43A392;
  --ui-color-mesh-500: #1F7A72;
  --ui-color-mesh-600: #17635C;
  --ui-color-mesh-700: #124E49;
  --ui-color-mesh-800: #0D3A36;

  /* Typographie */
  --ui-font-display: 'Questrial', sans-serif;
  --ui-font-sans: 'Inter', sans-serif;
  --ui-font-mono: 'JetBrains Mono', monospace;

  /* Rayons */
  --ui-radius-control: 9999px;   /* boutons, inputs, badges — toujours pleinement arrondis */
  --ui-radius-card: 1.25rem;     /* rounded-2xl */
  --ui-radius-card-lg: 1.75rem;  /* rounded-3xl */

  /* Ombres */
  --ui-shadow-soft: 0 1px 2px rgba(30,36,54,0.04), 0 8px 24px -12px rgba(30,36,54,0.10);
  --ui-shadow-card: 0 1px 1px rgba(30,36,54,0.03), 0 16px 40px -20px rgba(30,36,54,0.18);

  /* Contrôles interactifs — méthodologie §12.1/§12.4 : une seule hauteur,
     un seul rayon, un seul focus ring pour inputs/selects skinnés/.ui-btn. */
  --ui-control-min-h: 2.75rem;      /* 44px — cible tactile confortable */
  --ui-control-px: 1.25rem;
  --ui-control-radius: var(--ui-radius-control);
  --ui-control-border: var(--ui-color-line);
  --ui-control-accent: var(--ui-color-brand-600);
  --ui-focus-ring-color: var(--ui-color-brand-500);
  --ui-focus-ring-width: 2px;
  --ui-focus-ring-offset: 2px;
}