:root {
  --fv-brand-coral: #FF4F70;
  --fv-brand-dark: #B62D4F;
  --fv-brand-hover: #98203F;
  --fv-brand-soft: #FFF0F3;
  --fv-canvas: #F7F7F5;
  --fv-surface: #FDFDFB;
  --fv-ink: #24272C;
  --fv-muted: #606770;
  --fv-border: #DADDDD;
  --fv-disabled: #E9EAEB;
  --fv-success: #276B55;
  --fv-success-soft: #EDF6F1;
  --fv-warning: #885310;
  --fv-warning-soft: #FFF4DF;
  --fv-error: #AE263F;
  --fv-error-soft: #FFF0F2;
  --fv-info: #365F91;
  --fv-info-soft: #EEF3FA;
  --fv-space-4: 4px;
  --fv-space-8: 8px;
  --fv-space-12: 12px;
  --fv-space-16: 16px;
  --fv-space-24: 24px;
  --fv-space-32: 32px;
  --fv-space-48: 48px;
  --fv-space-64: 64px;
  --fv-radius-small: 8px;
  --fv-radius-medium: 12px;
  --fv-radius-large: 20px;
  --fv-font-ui: "Open Sans", system-ui, sans-serif;
  --fv-font-brand: "Josefin Sans", system-ui, sans-serif;
}
/* Couleurs HEX conservées pour partager les valeurs exactes avec Figma. */
.fv-button { font: inherit; min-height:44px; border-radius:var(--fv-radius-small); padding:12px 20px; background:var(--fv-brand-dark); color:var(--fv-surface); border:1px solid transparent; cursor:pointer; }
.fv-button:hover { background:var(--fv-brand-hover); }
.fv-button.secondary { background:var(--fv-surface); color:var(--fv-brand-dark); border-color:var(--fv-brand-dark); }
.fv-button:focus-visible, .fv-input:focus-visible { outline:3px solid var(--fv-brand-dark); outline-offset:3px; }
.fv-button:disabled { background:var(--fv-disabled); color:var(--fv-muted); cursor:default; }
.fv-input { min-height:44px; padding:12px 16px; border:1px solid var(--fv-muted); border-radius:8px; color:var(--fv-ink); background:var(--fv-surface); font:inherit; }
.fv-badge { display:inline-flex; gap:6px; padding:6px 10px; border-radius:8px; background:var(--fv-brand-soft); color:var(--fv-brand-dark); font-size:12px; }

.fv-button.secondary:hover { background:var(--fv-brand-soft); }