/* Voozeo Design System v3 — octobre 2026
   Thème unique : sombre. Couleurs en OKLCH (hex en commentaire).
   Couches : primitives (interdites dans l'UI) → sémantiques → échelles. */

:root {
  /* 1. Primitives */
  --vz-steel-50: oklch(97% 0.02 252); /* #ecf6ff */
  --vz-steel-100: oklch(93% 0.04 252); /* #d5eaff */
  --vz-steel-200: oklch(86% 0.07 252); /* #b0d5fe */
  --vz-steel-300: oklch(79% 0.105 252); /* #88bffc */
  --vz-steel-400: oklch(71% 0.135 252); /* #5ea5f3 */
  --vz-steel-500: oklch(62% 0.15 252); /* #3689dd */
  --vz-steel-600: oklch(53% 0.14 252); /* #1f6db9 */
  --vz-steel-700: oklch(45% 0.12 252); /* #165695 */
  --vz-steel-800: oklch(36% 0.09 252); /* #123e6a */
  --vz-steel-900: oklch(27% 0.06 252); /* #0e2743 */
  --vz-steel-950: oklch(20% 0.04 252); /* #071728 */
  --vz-ink-0: oklch(99% 0.003 258); /* #fafcfe */
  --vz-ink-50: oklch(95.5% 0.006 258); /* #eef0f4 */
  --vz-ink-100: oklch(89% 0.01 258); /* #d7dbe1 */
  --vz-ink-200: oklch(79% 0.014 258); /* #b5bbc4 */
  --vz-ink-300: oklch(67% 0.018 258); /* #8f96a1 */
  --vz-ink-400: oklch(55% 0.02 258); /* #6a727e */
  --vz-ink-500: oklch(43% 0.02 258); /* #49505b */
  --vz-ink-600: oklch(33% 0.018 258); /* #30363f */
  --vz-ink-700: oklch(26.5% 0.016 258); /* #20262d */
  --vz-ink-800: oklch(21.5% 0.014 258); /* #151a20 */
  --vz-ink-850: oklch(19% 0.013 258); /* #10141a */
  --vz-ink-900: oklch(16.5% 0.012 258); /* #0b0f14 */
  --vz-ink-950: oklch(14% 0.01 258); /* #07090d */
  --vz-ink-1000: oklch(12% 0.008 258); /* #040608 */
  --vz-green: oklch(74% 0.16 152); /* #4ac777 */
  --vz-amber: oklch(81% 0.14 78); /* #f2b54a */
  --vz-red: oklch(69% 0.17 25); /* #f26a64 */
  --vz-teal: oklch(75% 0.11 190); /* #45c4bd */
  --vz-violet: oklch(68% 0.14 295); /* #9f85e5 */
  --vz-rose: oklch(70% 0.15 10); /* #eb7289 */

  /* 2. Sémantiques */
  /* Fonds — la profondeur vient de la luminance */
  --vz-bg-canvas: var(--vz-ink-1000);
  --vz-bg-page: var(--vz-ink-950);
  --vz-surface-1: var(--vz-ink-900);
  --vz-surface-2: var(--vz-ink-850);
  --vz-surface-3: var(--vz-ink-800);
  --vz-surface-4: var(--vz-ink-700);
  --vz-scrim: oklch(8% 0.01 258 / 0.72);
  --vz-glass: oklch(14% 0.01 258 / 0.72);

  /* Bordures — alpha, s'adaptent à toute surface */
  --vz-border-subtle: oklch(100% 0 0 / 0.06);
  --vz-border: oklch(100% 0 0 / 0.09);
  --vz-border-strong: oklch(100% 0 0 / 0.14);
  --vz-border-control: var(--vz-ink-400);
  --vz-highlight: oklch(100% 0 0 / 0.05);

  /* Texte */
  --vz-text: var(--vz-ink-50);
  --vz-text-2: var(--vz-ink-200);
  --vz-text-3: var(--vz-ink-300);
  --vz-text-disabled: var(--vz-ink-400);

  /* Accent — un seul */
  --vz-accent: var(--vz-steel-400);
  --vz-accent-hover: var(--vz-steel-300);
  --vz-accent-text: var(--vz-steel-300);
  --vz-on-accent: var(--vz-ink-1000);
  --vz-accent-subtle: color-mix(in oklch, var(--vz-steel-400) 14%, transparent);
  --vz-accent-border: color-mix(in oklch, var(--vz-steel-400) 38%, transparent);
  --vz-focus: var(--vz-steel-400);

  /* Marque */
  --vz-brand: var(--vz-steel-600);
  --vz-brand-on: #ffffff;
  --vz-brand-link: var(--vz-ink-1000);

  /* États */
  --vz-success: var(--vz-green);
  --vz-warning: var(--vz-amber);
  --vz-danger: var(--vz-red);
  --vz-success-subtle: color-mix(in oklch, var(--vz-green) 12%, transparent);
  --vz-warning-subtle: color-mix(in oklch, var(--vz-amber) 12%, transparent);
  --vz-danger-subtle: color-mix(in oklch, var(--vz-red) 12%, transparent);
  --vz-success-border: color-mix(in oklch, var(--vz-green) 32%, transparent);
  --vz-warning-border: color-mix(in oklch, var(--vz-amber) 32%, transparent);
  --vz-danger-border: color-mix(in oklch, var(--vz-red) 32%, transparent);

  /* Données (graphiques, catégories) — ordre fixe */
  --vz-viz-1: var(--vz-steel-400);
  --vz-viz-2: var(--vz-teal);
  --vz-viz-3: var(--vz-violet);
  --vz-viz-4: var(--vz-amber);
  --vz-viz-5: var(--vz-rose);

  /* 3. Typographie */
  --vz-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --vz-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Interface — fixe */
  --vz-fs-11: 11px;
  --vz-fs-12: 12px;
  --vz-fs-13: 13px;
  --vz-fs-14: 14px;
  --vz-fs-15: 15px;
  --vz-fs-16: 16px;
  --vz-fs-18: 18px;

  /* Display — fluide de 375 à 1440 px */
  --vz-display-sm: clamp(18px, 16.59px + 0.376vw, 22px);
  --vz-display-md: clamp(22px, 19.18px + 0.751vw, 30px);
  --vz-display-lg: clamp(28px, 22.37px + 1.502vw, 44px);
  --vz-display-xl: clamp(36px, 26.14px + 2.629vw, 64px);
  --vz-display-2xl: clamp(48px, 31.10px + 4.507vw, 96px);

  --vz-tracking-2xl: -0.05em;
  --vz-tracking-xl: -0.045em;
  --vz-tracking-lg: -0.035em;
  --vz-tracking-md: -0.025em;
  --vz-tracking-sm: -0.015em;
  --vz-tracking-caps: 0.06em;

  --vz-leading-display: 1.02;
  --vz-leading-title: 1.12;
  --vz-leading-heading: 1.3;
  --vz-leading-body: 1.55;

  /* 4. Espacement & mise en page */
  --vz-space-0: 0px;
  --vz-space-0-5: 2px;
  --vz-space-1: 4px;
  --vz-space-1-5: 6px;
  --vz-space-2: 8px;
  --vz-space-3: 12px;
  --vz-space-4: 16px;
  --vz-space-5: 20px;
  --vz-space-6: 24px;
  --vz-space-8: 32px;
  --vz-space-10: 40px;
  --vz-space-12: 48px;
  --vz-space-16: 64px;

  --vz-gutter: clamp(16px, 10.37px + 1.502vw, 32px);
  --vz-section-y: clamp(40px, 20.28px + 5.258vw, 96px);
  --vz-stack: clamp(20px, 15.77px + 1.127vw, 32px);
  --vz-container: 1240px;
  --vz-container-text: 680px;
  --vz-header-h: 60px;
  --vz-scrollbar-size: 8px;

  /* 5. Formes, élévation, mouvement, mobile */
  --vz-radius-xs: 6px;
  --vz-radius-sm: 8px;
  --vz-radius-md: 10px;
  --vz-radius-lg: 14px;
  --vz-radius-xl: 20px;
  --vz-radius-2xl: 28px;
  --vz-radius-full: 999px;
  --vz-radius-mark: 22%;

  /* Élévation — lumière du haut + ombre portée douce */
  --vz-elev-1: inset 0 1px 0 0 var(--vz-highlight);
  --vz-elev-2: inset 0 1px 0 0 var(--vz-highlight), 0 1px 2px oklch(0% 0 0 / 0.4), 0 8px 24px -12px oklch(0% 0 0 / 0.6);
  --vz-elev-3: inset 0 1px 0 0 oklch(100% 0 0 / 0.08), 0 0 0 1px var(--vz-border), 0 24px 64px -16px oklch(0% 0 0 / 0.75);
  --vz-glow-accent: 0 0 0 1px var(--vz-accent-border), 0 8px 28px -8px color-mix(in oklch, var(--vz-steel-400) 55%, transparent);
  --vz-ring: 0 0 0 2px var(--vz-bg-page), 0 0 0 4px var(--vz-focus);
  --vz-ring-soft: 0 0 0 4px color-mix(in oklch, var(--vz-steel-400) 28%, transparent);
  --vz-blur: 16px;

  /* Mouvement */
  --vz-dur-1: 100ms;
  --vz-dur-2: 160ms;
  --vz-dur-3: 240ms;
  --vz-dur-4: 420ms;
  --vz-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --vz-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --vz-ease-spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
  --vz-press-scale: 0.98;

  /* Mobile */
  --vz-touch-min: 44px;
  --vz-touch-row: 56px;
  --vz-touch-cta: 52px;
  --vz-tabbar-h: 56px;
  --vz-fab-h: 52px;
  --vz-radius-sheet: 24px;
  --vz-safe-top: env(safe-area-inset-top, 0px);
  --vz-safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-reduced-motion: reduce) {
  :root { --vz-dur-1: 0ms; --vz-dur-2: 0ms; --vz-dur-3: 0ms; --vz-dur-4: 0ms; --vz-press-scale: 1; }
  html { scroll-behavior: auto; }
}

/* Base */
html {
  color-scheme: dark;
  background: var(--vz-bg-page);
  scrollbar-width: thin;
  scrollbar-color: var(--vz-surface-4) transparent;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--vz-bg-page);
  color: var(--vz-text);
  font-family: var(--vz-font-sans);
  font-size: var(--vz-fs-15);
  line-height: var(--vz-leading-body);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
:where(table, [data-numeric]) { font-variant-numeric: tabular-nums; }
::selection { background: var(--vz-brand); color: var(--vz-brand-on); }
:focus-visible { outline: none; box-shadow: var(--vz-ring); border-radius: inherit; }
a { color: var(--vz-accent-text); text-decoration: none; transition: color var(--vz-dur-2) var(--vz-ease-out); }
a:hover { color: var(--vz-text); }

::-webkit-scrollbar { width: var(--vz-scrollbar-size); height: var(--vz-scrollbar-size); }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--vz-surface-4); border-radius: var(--vz-radius-full); border: 2px solid var(--vz-bg-page); }
::-webkit-scrollbar-thumb:hover { background: var(--vz-ink-500); }

@media (max-width: 767px) {
  body { font-size: var(--vz-fs-16); }
  input, select, textarea { font-size: var(--vz-fs-16); }
}

/* Barre d'onglets mobile */
.vz-tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 6px 8px max(8px, var(--vz-safe-bottom));
  background: var(--vz-glass);
  backdrop-filter: blur(var(--vz-blur)) saturate(1.4);
  border-top: 1px solid var(--vz-border);
}
.vz-tabbar__item {
  min-height: var(--vz-tabbar-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--vz-text-3); font-size: var(--vz-fs-12);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--vz-dur-1) var(--vz-ease-out);
}
.vz-tabbar__item:active { transform: scale(var(--vz-press-scale)); }
.vz-tabbar__icon {
  width: 56px; height: 30px; border-radius: var(--vz-radius-full);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--vz-dur-2) var(--vz-ease-out);
}
.vz-tabbar__item[aria-current="page"] { color: var(--vz-text); font-weight: 600; }
.vz-tabbar__item[aria-current="page"] .vz-tabbar__icon { background: var(--vz-accent-subtle); color: var(--vz-accent-text); }
.vz-has-tabbar { padding-bottom: calc(var(--vz-tabbar-h) + 14px + var(--vz-safe-bottom)); }

.vz-fab {
  position: fixed; right: var(--vz-gutter); z-index: 21;
  bottom: calc(var(--vz-tabbar-h) + 14px + var(--vz-safe-bottom) + var(--vz-space-4));
  height: var(--vz-fab-h); padding: 0 20px 0 16px; border: 0; border-radius: var(--vz-radius-lg);
  display: inline-flex; align-items: center; gap: var(--vz-space-2);
  background: var(--vz-accent); color: var(--vz-on-accent);
  font: 600 var(--vz-fs-16)/1 var(--vz-font-sans);
  box-shadow: var(--vz-glow-accent), var(--vz-elev-2);
  transition: transform var(--vz-dur-1) var(--vz-ease-out);
}
.vz-fab:active { transform: scale(var(--vz-press-scale)); }

.vz-sheet {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  background: var(--vz-surface-2);
  border-radius: var(--vz-radius-sheet) var(--vz-radius-sheet) 0 0;
  padding: 8px 0 max(16px, var(--vz-safe-bottom));
  box-shadow: var(--vz-elev-3);
  animation: vz-sheet-in var(--vz-dur-4) var(--vz-ease-spring);
}
.vz-sheet__handle { display: block; width: 36px; height: 5px; border-radius: 3px; background: var(--vz-ink-500); margin: 0 auto 12px; }
.vz-scrim { position: fixed; inset: 0; z-index: 29; background: var(--vz-scrim); backdrop-filter: blur(4px); }
@keyframes vz-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }