:root {
  /* =========================
     Couleurs principales
  ========================= */
  --nf-primary: #0d6efd;
  --nf-primary-dark: #0a58ca;
  --nf-primary-soft: #e7f1ff;
  --nf-primary-extra-soft: #f4f9ff;

  /* =========================
     Couleurs de fond
  ========================= */
  --nf-bg: #f8fbff;
  --nf-bg-alt: #eef5ff;
  --nf-surface: #ffffff;
  --nf-surface-soft: #fdfefe;

  /* =========================
     Couleurs de texte
  ========================= */
  --nf-text: #1f2937;
  --nf-text-soft: #4b5563;
  --nf-text-muted: #6b7280;
  --nf-text-light: #9ca3af;
  --nf-text-white: #ffffff;

  /* =========================
     Bordures
  ========================= */
  --nf-border: #dbe7f5;
  --nf-border-soft: #e9f1fb;

  /* =========================
     États système
  ========================= */
  --nf-success: #198754;
  --nf-success-soft: #e8f7ef;

  --nf-danger: #dc3545;
  --nf-danger-soft: #fdecef;

  --nf-warning: #ffc107;
  --nf-warning-soft: #fff8dd;

  --nf-info: #0dcaf0;
  --nf-info-soft: #e7fafe;

  /* =========================
     Rayons
  ========================= */
  --nf-radius-xl: 28px;
  --nf-radius-lg: 22px;
  --nf-radius-md: 16px;
  --nf-radius-sm: 12px;
  --nf-radius-xs: 8px;

  /* =========================
     Ombres
  ========================= */
  --nf-shadow-sm: 0 4px 12px rgba(13, 110, 253, 0.06);
  --nf-shadow-md: 0 10px 30px rgba(13, 110, 253, 0.08);
  --nf-shadow-lg: 0 16px 40px rgba(13, 110, 253, 0.12);

  /* =========================
     Transitions
  ========================= */
  --nf-transition-fast: 0.2s ease;
  --nf-transition-normal: 0.3s ease;

  /* =========================
     Largeurs utiles
  ========================= */
  --nf-max-width-mobile: 520px;

  /* =========================
     Espacements utiles
  ========================= */
  --nf-space-xs: 6px;
  --nf-space-sm: 10px;
  --nf-space-md: 16px;
  --nf-space-lg: 24px;
  --nf-space-xl: 32px;
}

:root[data-theme="dark"] {
  --nf-primary: #4c8dff;
  --nf-primary-dark: #3a79e8;
  --nf-primary-soft: #1c2b45;
  --nf-primary-extra-soft: #162235;

  --nf-bg: #0f1724;
  --nf-bg-alt: #111c2d;
  --nf-surface: #182334;
  --nf-surface-soft: #1c2940;

  --nf-text: #f3f7ff;
  --nf-text-soft: #d4dceb;
  --nf-text-muted: #9fb0c7;
  --nf-text-light: #7f90a8;
  --nf-text-white: #ffffff;

  --nf-border: #27364d;
  --nf-border-soft: #213149;

  --nf-success-soft: #173326;
  --nf-danger-soft: #3a1d23;
  --nf-warning-soft: #3c3317;

  --nf-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.25);
  --nf-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.28);
  --nf-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.35);
}