/* ProxiPilot PWA — Design tokens */
:root {
  /* Brand — palette ProxiPilot (bleu logo + vert accent).
     Les noms --vival-* restent par compat avec ~600 usages dans app.jsx/css.
     Les valeurs ont change : du rouge Casino vers le bleu ProxiPilot. */
  --vival-red: #0068e8;
  --vival-red-hover: #0050c0;
  --vival-red-press: #003890;
  --vival-red-soft: #eef5ff;
  --vival-red-tint: #dbeafe;
  --vival-teal: #10a870;

  /* Neutrals */
  --ink-0: #0b0d0e;
  --ink-1: #1a1d1f;
  --ink-2: #3d4348;
  --ink-3: #6b7378;
  --ink-4: #9aa3a9;
  --line-1: #e8eaec;
  --line-2: #f0f2f4;
  --surface-0: #ffffff;
  --surface-1: #fafbfc;
  --surface-2: #f4f6f8;
  --surface-3: #eef1f4;

  /* Semantic */
  --success: #0a8f4a;
  --success-soft: #e8f6ee;
  --warning: #b45309;
  --warning-soft: #fef3e0;
  --danger: #c01818;
  --danger-soft: #fdecec;
  --info: #1565d8;
  --info-soft: #e8f1fd;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.06);
  --shadow-md: 0 2px 8px rgba(15, 20, 25, 0.08);
  --shadow-lg: 0 8px 32px rgba(15, 20, 25, 0.12);
  --shadow-overlay: 0 24px 64px rgba(15, 20, 25, 0.18);

  /* Spacing */
  --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;

  /* Type */
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Motion */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.34,1.3,.64,1);
}

/* Dark theme override */
[data-theme="dark"] {
  --ink-0: #ffffff;
  --ink-1: #f0f2f4;
  --ink-2: #c0c6cb;
  --ink-3: #858d93;
  --ink-4: #5c646a;
  --line-1: #2a2e31;
  --line-2: #1e2124;
  --surface-0: #0f1214;
  --surface-1: #14181b;
  --surface-2: #1a1e21;
  --surface-3: #232729;
  --vival-red-soft: #102540;
  --vival-red-tint: #143055;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--ink-1);
  background: var(--surface-1);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
button { font-family: inherit; }

.icon { display: inline-block; vertical-align: middle; width: 20px; height: 20px; stroke: currentColor; fill: none; }

/* Density */
[data-density="compact"] { --s-3: 8px; --s-4: 12px; --s-5: 14px; --s-6: 18px; }

/* Variante "soft" : bleu plus pastel (peu utilisee) */
[data-red="soft"] { --vival-red: #4a8fea; --vival-red-hover: #3a7dd0; }

/* Utility */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }