/* ============================================
   ClinStudy — Design Tokens v2 (handoff 2026-04-18)
   ============================================
   Variables uniquement — les classes utilitaires ont été
   extraites dans components.css avec le préfixe .ds-*
   pour coexister avec le legacy style.css.
*/

:root {
  /* ---------- Brand ---------- */
  --brand-teal-50:  #EEF6F6;
  --brand-teal-100: #D5E9EA;
  --brand-teal-200: #A8D2D4;
  --brand-teal-300: #6FB3B7;
  --brand-teal-500: #0F6B70;
  --brand-teal-600: #0B5A5E;
  --brand-teal-700: #084A4D;
  --brand-teal-900: #042628;

  --brand-navy-50:  #EEF1F6;
  --brand-navy-100: #D7DEE9;
  --brand-navy-500: #1E3A5F;
  --brand-navy-700: #0C2340;
  --brand-navy-900: #061528;

  --brand-gold:     #C8A96A;
  --brand-ivory:    #F7F4EE;
  --brand-ivory-2:  #EFEAE1;

  /* ---------- Neutrals (cool, pro) ---------- */
  --n-0:   #FFFFFF;
  --n-25:  #FBFCFD;
  --n-50:  #F6F8FA;
  --n-100: #EEF1F5;
  --n-150: #E4E8EE;
  --n-200: #D6DCE4;
  --n-300: #B9C2CE;
  --n-400: #8B96A5;
  --n-500: #64707F;
  --n-600: #47525F;
  --n-700: #2F3A47;
  --n-800: #1D2733;
  --n-900: #0F1821;
  --n-950: #070D14;

  /* ---------- Semantic ---------- */
  --success-50:  #E8F4EE;
  --success-500: #1D8A5E;
  --success-700: #116344;

  --warning-50:  #FFF6E0;
  --warning-500: #D68F00;
  --warning-700: #9A6600;

  --danger-50:   #FDECEF;
  --danger-500:  #C93756;
  --danger-700:  #8E2239;

  --info-50:     #E8F0FB;
  --info-500:    #2563C7;
  --info-700:    #1A4890;

  /* ---------- Surfaces DS (light default) ----------
     Préfixés --ds-* pour ne pas écraser --bg/--fg/--border
     déjà consommés par legacy style.css. */
  --ds-bg:           var(--n-50);
  --ds-bg-elevated:  var(--n-0);
  --ds-bg-subtle:    var(--n-100);
  --ds-bg-sunken:    var(--n-150);
  --ds-border:       var(--n-150);
  --ds-border-strong:var(--n-200);
  --ds-fg:           var(--n-900);
  --ds-fg-muted:     var(--n-500);
  --ds-fg-subtle:    var(--n-400);

  /* Sidebar / topbar (navy constant côté pro) */
  --chrome-bg:      #0B1C33;
  --chrome-bg-2:    #0F2540;
  --chrome-fg:      #DCE4F0;
  --chrome-fg-muted:#8BA0BC;
  --chrome-border:  #1B3558;
  --chrome-active:  #1A3257;

  /* ---------- Typography ---------- */
  --font-ui: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-editorial: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'Menlo', monospace;

  --text-xs:  11px;
  --text-sm:  12.5px;
  --text-base:14px;
  --text-md:  15px;
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 40px;
  --text-5xl: 56px;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  /* ---------- Spacing (8pt + 4 micro) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 48px; --s-10:64px; --s-11:80px; --s-12:112px;

  /* ---------- Radii ---------- */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px;
  --r-xl: 16px; --r-2xl: 24px; --r-full: 999px;

  /* ---------- Shadows (subtle, layered) ---------- */
  --sh-xs: 0 1px 0 rgba(15,24,33,.04);
  --sh-sm: 0 1px 2px rgba(15,24,33,.06), 0 1px 3px rgba(15,24,33,.04);
  --sh-md: 0 2px 4px rgba(15,24,33,.06), 0 4px 12px rgba(15,24,33,.06);
  --sh-lg: 0 8px 24px rgba(15,24,33,.08), 0 2px 4px rgba(15,24,33,.04);
  --sh-xl: 0 20px 60px rgba(15,24,33,.12), 0 4px 8px rgba(15,24,33,.06);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.6);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(15,107,112,.25);
  --ring-danger: 0 0 0 3px rgba(201,55,86,.25);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 400ms;
}

/* Dark mode — surcharge les tokens DS préfixés.
   Le projet utilise aussi html.theme-dark (legacy) — les deux triggers
   activent les mêmes overrides DS pour cohérence totale. */
[data-theme="dark"],
html.theme-dark {
  --ds-bg:           #0B1119;
  --ds-bg-elevated:  #121A26;
  --ds-bg-subtle:    #0E1620;
  --ds-bg-sunken:    #070C13;
  --ds-border:       #1E2A3B;
  --ds-border-strong:#27364B;
  --ds-fg:           #E6EDF5;
  --ds-fg-muted:     #8395AB;
  --ds-fg-subtle:    #5B6B82;
}

/* Patient flavor — ivoire tiède, plus éditorial. */
[data-flavor="patient"] {
  --ds-bg:          #F7F4EE;
  --ds-bg-elevated: #FFFDF9;
  --ds-bg-subtle:   #EFEAE1;
  --ds-bg-sunken:   #E7E1D4;
  --ds-border:      #E1DAC9;
  --ds-border-strong:#C8BFA8;
  --ds-fg:          #1C2A2C;
  --ds-fg-muted:    #5D5B53;
}

/* Palette switcher — data-palette remappe la famille --brand-teal-*
   sans toucher aux appels --brand-teal-* dans components.css. */
[data-palette="plum"] {
  --brand-teal-50:  #F5EEF6;
  --brand-teal-100: #E4D2EA;
  --brand-teal-200: #C9A8D4;
  --brand-teal-300: #A578B7;
  --brand-teal-500: #6B3A86;
  --brand-teal-600: #5A2F72;
  --brand-teal-700: #4A265E;
  --brand-teal-900: #26122E;
}
[data-palette="forest"] {
  --brand-teal-50:  #EEF6F0;
  --brand-teal-100: #D4E9DB;
  --brand-teal-200: #A8D2B6;
  --brand-teal-300: #6FB387;
  --brand-teal-500: #2E7D45;
  --brand-teal-600: #256A39;
  --brand-teal-700: #1E562E;
  --brand-teal-900: #0F2C17;
}