/* ── Design system partagé — DA "plateforme_world" (Outfit + palette hex)
   Police Outfit + JetBrains Mono. Palette à plat en hex (clair) ; le mode
   sombre garde sa structure oklch ([data-theme="dark"]). Réutilise les noms
   de variables existants (--bg, --s1, --tx, --brd…) pour que tout le viewer
   worldwide adopte le thème sans réécrire les composants. Importé APRÈS
   main.css → il gagne la cascade sur les tokens. */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg: #ffffff;
  --s1: #ffffff;
  --s2: #f7f7f7;
  --s3: #efefef;
  --brd: #efefef;
  --tx: #1a1a1a;
  --tx2: #888888;
  --ac: #1a1a1a;
  --grn: #34d399;
  --red: #f87171;
  --amb: #fbbf24;
  --pur: #c084fc;
  --cyan: #22d3ee;
  --radius: 0.625rem;
  --font: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

[data-theme="dark"] {
  --bg: oklch(0.145 0 0);
  --s1: oklch(0.205 0 0);
  --s2: oklch(0.269 0 0);
  --s3: oklch(0.31 0 0);
  --brd: oklch(1 0 0 / 10%);
  --tx: oklch(0.985 0 0);
  --tx2: oklch(0.708 0 0);
  --ac: oklch(0.922 0 0);
  --grn: oklch(0.74 0.14 160);
  --red: oklch(0.7 0.16 25);
  --amb: oklch(0.78 0.13 75);
  --pur: oklch(0.7 0.15 295);
  --cyan: oklch(0.72 0.1 220);
}

/* Police Outfit sur tout le worldwide (override d'un Inter inline éventuel). */
body,
html {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[style*="Inter"] {
  font-family: var(--font) !important;
}

code,
pre,
kbd,
.mono,
[class*="mono"],
[class*="font-mono"] {
  font-family: var(--font-mono);
}

/* Encart carte des pays : la silhouette (img SVG) est sombre. En thème
   sombre on passe la boîte sur une surface sombre et on inverse la
   silhouette en clair — au lieu d'un blanc dur. */
[data-theme="dark"] .card-image-wrap {
  background: var(--s2);
}

[data-theme="dark"] .card-image {
  filter: invert(1);
}

/* ── Correctifs dark mode ────────────────────────────────────────────
   main.css a été écrit en couleurs claires codées en dur ; ces surfaces
   ne basculaient pas en sombre (cartes blanches du détail). Le texte
   utilise déjà var(--tx) : il suffit donc de réassigner les FONDS en
   sombre. Override ciblé [data-theme="dark"] → aucun impact sur le clair. */
[data-theme="dark"] .loreal-base-card,
[data-theme="dark"] .g-pill,
[data-theme="dark"] .filter-autocomplete,
[data-theme="dark"] .modal-box {
  background: var(--s1);
  border-color: var(--brd);
}
[data-theme="dark"] .filter-tag,
[data-theme="dark"] .g-badge,
[data-theme="dark"] .confidence-badge,
[data-theme="dark"] .img-viewer-desc,
[data-theme="dark"] #iv-main-img,
[data-theme="dark"] .load-tag,
[data-theme="dark"] .ac-item:hover {
  background: var(--s2);
}

/* Transition de thème douce, courbe Apple comme le Pipeline Viewer. */
* {
  transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}