/* Vival PWA — Design tokens */
:root {
  /* Brand — couleurs officielles Vival by Casino */
  --vival-red: #e2001a;
  --vival-red-hover: #c50016;
  --vival-red-press: #a80012;
  --vival-red-soft: #fff0f1;
  --vival-red-tint: #fde4e6;
  --vival-teal: #027373;

  /* 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: #2a1213;
  --vival-red-tint: #3d1a1c;
}

* { 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; }

/* Red variant */
[data-red="soft"] { --vival-red: #c4363d; --vival-red-hover: #a8282f; }

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