/* ============================================================
   Orchestrator v8 — design tokens (O1 Clean SaaS — light indigo)
   Refonte 2026-06-14 : direction O1 validée (maquette dashboard complète).
   Palette claire indigo, Plus Jakarta Sans (display) + Inter (corps) + JetBrains Mono.
   On garde les NOMS de variables (app.css + 28 jsx les réutilisent) — seules les VALEURS changent.
   ============================================================ */

/* Fonts self-hostées (la CSP 'self' bloque les CDN Google Fonts ; sans @font-face → fallback system-ui).
   Chemins relatifs à /dashboard-v2/orchestrator/. */
@font-face{
  font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:200 800; font-display:swap;
  src:url('../fonts/plus-jakarta-var.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:300 800; font-display:swap;
  src:url('../fonts/inter-var.woff2') format('woff2');
}
@font-face{
  font-family:'Outfit'; font-style:normal; font-weight:300 800; font-display:swap;
  src:url('../fonts/outfit-var.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/jbmono-400.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/jbmono-500.woff2') format('woff2');
}

:root{
  /* Backgrounds — light, cool indigo-grey */
  --bg-paper:    #F3F4FB;   /* page */
  --bg-surface:  #FFFFFF;   /* cards */
  --bg-elevated: #FFFFFF;   /* modals, popovers */
  --bg-subtle:   #F7F8FD;   /* hover / secondary */

  /* Inks — dark indigo-ink hierarchy */
  --ink-primary:   #191A2C;   /* titres / texte fort */
  --ink-secondary: #565879;   /* texte secondaire (AA sur surface) */
  --ink-mute:      #74769A;   /* placeholders / labels faibles */

  /* Borders */
  --border:        #E8EAF4;
  --border-2:      #F0F1F8;
  --border-strong: #D6DAEC;

  /* Accent — indigo (états actifs / boutons primaires / liens) */
  --accent:        #5457E6;   /* i600 */
  --accent-2:      #4F46E5;   /* i700 — hover/plus foncé */
  --accent-bg:     #EEF0FE;   /* i50 — fond teinté actif */
  --accent-soft:   #E1E4FC;   /* i100 */
  --share-cta:     #C0392B;   /* CTA « Tiens mange mort » — rougeâtre, distinct de l'accent global */

  /* Semantic (light variants) */
  --success:    #0EA372;
  --success-bg: #E6F6F0;
  --warning:    #E08600;
  --warning-bg: #FBF1E0;
  --danger:     #E23D5B;
  --danger-bg:  #FCE9ED;
  --info:       #3D7BF7;
  --info-bg:    #E9F1FE;

  /* Project colors — vivid mais lisibles sur clair */
  --p-1:  #6366F1;   /* indigo */
  --p-2:  #3B82F6;   /* bleu */
  --p-3:  #10B981;   /* émeraude */
  --p-4:  #F59E0B;   /* ambre */
  --p-5:  #A78BFA;   /* lavande */
  --p-6:  #06B6D4;   /* cyan */
  --p-7:  #FB7185;   /* rose */
  --p-8:  #34D399;   /* vert */
  --p-9:  #F97316;   /* orange */

  /* Dégradé de marque (logo, KPI fill, orbe coach) — chaud→indigo, signature O1 */
  --brand-grad: linear-gradient(135deg,#FB923C,#A855F7 55%,#6366F1 110%);

  /* Fonts — Plus Jakarta (display) + Inter (corps) + JetBrains Mono (data) */
  --sans:    "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --display: "Plus Jakarta Sans", "Outfit", "Helvetica Neue", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;
  --serif:   "Plus Jakarta Sans", "Outfit", "Helvetica Neue", sans-serif; /* compat tabs legacy */

  /* Radii */
  --r-xs:   8px;
  --r-sm:   10px;
  --r:      12px;
  --r-md:   16px;
  --r-lg:   20px;
  --r-full: 999px;

  /* Spacing */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;
  --s-4: 16px;  --s-5: 20px;  --s-6: 24px;
  --s-8: 32px;  --s-10: 40px; --s-12: 48px;
  --s-16: 64px;

  /* Shadows — soft, teintées indigo-ink (clair) */
  --shadow-xs: 0 1px 2px rgba(25,26,44,0.05);
  --shadow-sm: 0 2px 8px rgba(25,26,44,0.06), 0 1px 2px rgba(25,26,44,0.04);
  --shadow-md: 0 12px 28px -10px rgba(25,26,44,0.16), 0 2px 6px rgba(25,26,44,0.06);
  --shadow-lg: 0 28px 64px -28px rgba(25,26,44,0.28), 0 6px 16px rgba(25,26,44,0.10);

  /* --- Alias rétro-compat (référencés en inline par shell.jsx / certains tabs) --- */
  --ink:            #191A2C;   /* = ink-primary */
  --bg-elev:        #FFFFFF;   /* = bg-elevated */
  --border-subtle:  #E8EAF4;   /* = border */
  --warn:           #E08600;   /* = warning */
}

/* thème clair */
html { color-scheme: light; }

/* ============================================================
   Thème SOMBRE (opt-in via le bouton du header) — dérivé de la
   palette O1 : même teinte indigo, luminance inversée. On ne change
   que les VALEURS des variables → tout le dashboard bascule.
   ============================================================ */
html[data-theme="dark"]{
  color-scheme: dark;

  /* Backgrounds — Warp terminal (near-black warm, extrait warp.dev #121212 / #1C1A18) */
  --bg-paper:    #121212;   /* warp primary bg */
  --bg-surface:  #1C1A18;   /* warp warm dark surface */
  --bg-elevated: #242220;   /* modals, popovers */
  --bg-subtle:   #2A2825;   /* hover / secondary */

  /* Inks — warp warm white (extrait rgb(248,245,238) / rgb(165,163,157)) */
  --ink-primary:   #F8F5EE;
  --ink-secondary: #A5A39D;
  --ink-mute:      #736F69;

  /* Borders — warm dark (extrait warp border rgb(95,93,89)) */
  --border:        #3D3B38;
  --border-2:      #2A2825;
  --border-strong: #5F5D59;

  /* Accent — warp lavande (extrait rgb(189,166,247) = #BDA6F7) */
  --accent:        #BDA6F7;
  --accent-2:      #CBBEFF;
  --accent-bg:     #1E1828;   /* fond lavande teinté sombre */
  --accent-soft:   #2C2140;
  --share-cta:     #E8595A;

  /* Semantic — même valeurs, lisibles sur fond warp */
  --success:    #2BC48E;
  --success-bg: #0D1F18;
  --warning:    #F0A52E;
  --warning-bg: #231A0A;
  --danger:     #F2566E;
  --danger-bg:  #251018;
  --info:       #5C92F9;
  --info-bg:    #0E1D33;

  /* Project colors — variantes 400 lisibles sur sombre */
  --p-1:  #818CF8;   /* indigo-400 */
  --p-2:  #60A5FA;   /* bleu-400 */
  --p-3:  #34D399;   /* émeraude-400 */
  --p-4:  #FBBF24;   /* ambre-400 */
  --p-5:  #BDA6F7;   /* lavande warp */
  --p-6:  #22D3EE;   /* cyan-400 */
  --p-7:  #FB7185;   /* rose-400 */
  --p-8:  #4ADE80;   /* vert-400 */
  --p-9:  #FB923C;   /* orange-400 */

  /* Gradient marque — warp style : violet sombre → lavande → pourpre */
  --brand-grad: linear-gradient(135deg, #2D1B52, #BDA6F7 55%, #9B7FEF 110%);

  /* Shadows — profondes sur noir */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.55);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.60), 0 1px 2px rgba(0,0,0,0.45);
  --shadow-md: 0 12px 28px -10px rgba(0,0,0,0.80), 0 2px 6px rgba(0,0,0,0.55);
  --shadow-lg: 0 28px 64px -28px rgba(0,0,0,0.95), 0 6px 16px rgba(0,0,0,0.70);

  /* Alias rétro-compat */
  --ink:           #F8F5EE;
  --bg-elev:       #242220;
  --border-subtle: #3D3B38;
  --warn:          #F0A52E;
}
/* Surfaces "verre" — warm warp terminal */
html[data-theme="dark"] .topbar{
  background: rgba(18,18,18,0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(95,93,89,0.25);
}
html[data-theme="dark"] .cat-pill{ background: rgba(28,26,24,0.92); }
/* Coach card — gradient sombre lavande au lieu du #F3EEFE hardcodé */
html[data-theme="dark"] .coach-card{ background: linear-gradient(140deg, var(--accent-bg), #2C2140); }