/* bci-tokens.css — Design system BCI partagé
 * Source : extrait et étendu de bci-app/static/css/app.css ("BCI-WEB-001")
 * Version : 1.0.0
 * Doc : voir bci-design-system/README.md
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ===== Colors — Primary (BCI bleu) ===== */
  --primary-100:   #1F4E79;
  --primary-80:    #2E75B6;
  --primary-60:    #3A8FD4;
  --primary-light: #D6E4F0;
  --primary-bg:    #EBF0F7;

  /* ===== Colors — Orange / action ===== */
  --orange-100:    #C0392B;
  --orange-80:     #D04A38;
  --orange-light:  #FCDDD2;
  --orange-bg:     #FFEEEE;

  /* ===== Colors — Semantic ===== */
  --red-100: #C0392B;    --red-bg: #FFEEEE;
  --teal-100: #006E6A;   --teal-bg: #E6FAF7;
  --green-100: #27AE60;  --green-bg: #E8F5E9;
  --yellow-100: #F7A646; --yellow-bg: #FFF8E1;   /* warning : valeur app validée */

  /* ===== Neutrals (60/95/100 normalisés — étaient slate dans app.css) ===== */
  --neutral-0:   #FFFFFF;
  --neutral-5:   #FBFAFB;
  --neutral-10:  #FAF9F6;
  --neutral-20:  #F1F1F1;
  --neutral-40:  #EBEBEB;
  --neutral-50:  #91918F;
  --neutral-60:  #737373;
  --neutral-80:  #4C4849;
  --neutral-90:  #2F2F2F;
  --neutral-95:  #2A2A2A;
  --neutral-100: #1F1F1F;

  /* ===== Typography ===== */
  --font-body:    'Inter', system-ui, sans-serif;
  --font-display: 'Inter', system-ui, sans-serif;  /* overridable par frontend */
  --font-data:    'Inter', system-ui, sans-serif;  /* override scoreconf en JetBrains Mono */

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ===== Spacings (scale 4-80 px) ===== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ===== Radii ===== */
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-pill:   36px;
  --radius-circle: 50%;

  /* ===== Shadows ===== */
  --shadow-sm: 0px -7px 4px rgba(0,0,0,0.01), 0px -3px 3px rgba(0,0,0,0.02), 0px -1px 2px rgba(0,0,0,0.02);
  --shadow-md: 0px 1px 12px rgba(0,0,0,0.12);
  --shadow-lg: 0px 8px 20px rgba(175,175,175,0.4);

  /* ===== Transitions ===== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
}