:root {
  color-scheme: light;

  /* Couleurs de marque */
  --ff-color-brand-50: #fff5ed;
  --ff-color-brand-100: #ffe8d5;
  --ff-color-brand-200: #ffcda9;
  --ff-color-brand-300: #f8aa76;
  --ff-color-brand-400: #ed8844;
  --ff-color-brand-500: #e87525;
  --ff-color-brand-600: #E26916;
  --ff-color-brand-700: #bd4f0e;
  --ff-color-brand-800: #913d0d;
  --ff-color-brand-900: #6e2f0b;
  --ff-color-brand-btn-hover: #F1A167;
  --ff-color-brand-btn-pressed: #F0B386;

  /* Couleurs neutres */
  --ff-color-white: #ffffff;
  --ff-color-gray-50: #f8fafc;
  --ff-color-gray-100: #f1f5f9;
  --ff-color-gray-200: #e2e8f0;
  --ff-color-gray-300: #cbd5e1;
  --ff-color-gray-500: #64748b;
  --ff-color-gray-700: #334155;
  --ff-color-gray-900: #0f172a;

  /* Couleurs fonctionnelles */
  --ff-color-success: #16865c;
  --ff-color-success-soft: #e8f8f1;
  --ff-color-warning: #b65c08;
  --ff-color-warning-soft: #fff4dc;
  --ff-color-danger: #d13438;
  --ff-color-danger-soft: #fff0f0;

  /* Rôles sémantiques */
  --ff-color-background: var(--ff-color-gray-50);
  --ff-color-surface: var(--ff-color-white);
  --ff-color-overlay-surface: var(--ff-color-white);
  --ff-color-text: var(--ff-color-gray-900);
  --ff-color-text-muted: var(--ff-color-gray-500);
  --ff-color-border: var(--ff-color-gray-200);
  --ff-color-focus: var(--ff-color-brand-600);

  /* Typographie */
  --ff-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ff-text-xs: 0.75rem;
  --ff-text-sm: 0.875rem;
  --ff-text-md: 1rem;
  --ff-text-lg: 1.125rem;
  --ff-text-xl: 1.375rem;
  --ff-text-2xl: clamp(1.75rem, 4vw, 2.5rem);
  --ff-leading-tight: 1.2;
  --ff-leading-normal: 1.55;

  /* Espacements */
  --ff-space-1: 0.25rem;
  --ff-space-2: 0.5rem;
  --ff-space-3: 0.75rem;
  --ff-space-4: 1rem;
  --ff-space-5: 1.5rem;
  --ff-space-6: 2rem;
  --ff-space-7: 3rem;
  --ff-space-8: 4rem;

  /* Formes et profondeur */
  --ff-radius-sm: 0.5rem;
  --ff-radius-md: 0.75rem;
  --ff-radius-btn: 2rem;
  --ff-radius-lg: 1rem;
  --ff-radius-pill: 999px;
  --ff-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06);
  --ff-shadow-md: 0 10px 30px rgb(15 23 42 / 0.1);
  --ff-transition: 160ms ease;

}

[data-ff-theme="dark"] {
  color-scheme: dark;
  --ff-color-background: #07111f;
  --ff-color-surface: #101d2f;
  --ff-color-overlay-surface: #1E1E1E;
  --ff-color-text: #f8fafc;
  --ff-color-text-muted: #a8b5c7;
  --ff-color-border: #27364a;
}