/* ============================================================
   oh-tokens.css — Design System OpenHuman, couche 1 : tokens
   Valeurs exactes d'OpenHuman (tokens.css + presets.ts), triplets RGB.
   "R G B" → utilisable avec alpha : rgb(var(--token) / .3)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=JetBrains+Mono:wght@300..600&family=Newsreader:opsz,wght@6..72,400..600&display=swap');

:root {
  /* Surfaces */
  --surface: 255 255 255;
  --surface-canvas: 245 245 245;
  --surface-muted: 250 250 250;
  --surface-subtle: 245 245 245;
  --surface-strong: 229 229 229;
  --surface-hover: 240 240 240;
  --surface-overlay: 0 0 0;
  --surface-chrome: 214 214 214;
  /* Texte */
  --content: 23 23 23;
  --content-secondary: 82 82 82;
  --content-muted: 115 115 115;
  --content-faint: 163 163 163;
  --content-inverted: 255 255 255;
  /* Lignes */
  --line: 229 229 229;
  --line-strong: 212 212 212;
  --line-subtle: 245 245 245;
  --line-chrome: 212 212 212;
  /* Ramp primary (bleu OpenHuman, 4-ramp discipline) */
  --primary-50: 239 246 255; --primary-100: 219 234 254; --primary-200: 191 219 254;
  --primary-300: 147 197 253; --primary-400: 96 165 250; --primary-500: 47 110 244;
  --primary-600: 37 99 235; --primary-700: 29 78 216; --primary-800: 30 64 175;
  --primary-900: 30 58 138; --primary-950: 23 37 84;
  /* Ramp sage (succès) */
  --sage-50: 240 253 244; --sage-100: 220 252 231; --sage-200: 187 247 208;
  --sage-300: 134 239 172; --sage-400: 74 222 128; --sage-500: 52 199 89;
  --sage-600: 22 163 74; --sage-700: 21 128 61; --sage-800: 22 101 52;
  --sage-900: 20 83 45; --sage-950: 5 46 22;
  /* Ramp amber (alerte) */
  --amber-50: 255 251 235; --amber-100: 254 243 199; --amber-200: 253 230 138;
  --amber-300: 252 211 77; --amber-400: 251 191 36; --amber-500: 232 167 40;
  --amber-600: 217 119 6; --amber-700: 180 83 9; --amber-800: 146 64 14;
  --amber-900: 120 53 15; --amber-950: 69 26 3;
  /* Ramp coral (erreur) */
  --coral-50: 254 242 242; --coral-100: 254 226 226; --coral-200: 254 202 202;
  --coral-300: 252 165 165; --coral-400: 248 113 113; --coral-500: 239 68 68;
  --coral-600: 220 38 38; --coral-700: 185 28 28; --coral-800: 153 27 27;
  --coral-900: 127 29 29; --coral-950: 69 10 10;
  /* Rôles de police */
  --font-title: 'Inter', -apple-system, system-ui, sans-serif;
  --font-heading: 'Inter', -apple-system, system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, 'Liberation Mono', Courier, monospace;
  --font-serif: 'Newsreader', Georgia, Cambria, 'Times New Roman', Times, serif;
  /* Aliases shadcn canoniques */
  --background: var(--surface);
  --foreground: var(--content);
  --primary: var(--primary-500);
  --primary-foreground: var(--content-inverted);
  --secondary: var(--surface-subtle);
  --muted: var(--surface-subtle);
  --muted-foreground: var(--content-muted);
  --accent: var(--surface-hover);
  --destructive: var(--coral-500);
  --destructive-foreground: var(--content-inverted);
  --border: var(--line);
  --input: var(--line);
  --ring: var(--primary-500);
  --radius: 0.625rem;
}
:root.dark {
  /* Dark canonique OpenHuman : canvas 0, chrome 10 */
  --surface: 23 23 23;
  --surface-canvas: 0 0 0;
  --surface-muted: 38 38 38;
  --surface-subtle: 38 38 38;
  --surface-strong: 38 38 38;
  --surface-hover: 38 38 38;
  --surface-chrome: 10 10 10;
  --content: 245 245 245;
  --content-secondary: 212 212 212;
  --content-muted: 163 163 163;
  --content-faint: 115 115 115;
  --content-inverted: 255 255 255;
  --line: 38 38 38;
  --line-strong: 64 64 64;
  --line-subtle: 38 38 38;
  --line-chrome: 64 64 64;
  --primary: var(--primary-400);
  --destructive: var(--coral-400);
  --ring: var(--primary-400);
}

/* Exposition de base (l'app garde ses classes ; seule la couleur suit) */
html { font-size: var(--ui-font-size, 16px); }
body {
  background: rgb(var(--surface-canvas));
  color: rgb(var(--content));
  font-family: var(--font-body), sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgb(var(--primary-500) / .25); }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--line-strong)); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--content-faint)); }