html.dark,
[data-theme="dark"],
[data-mode="dark"] {
  --flowayz-gold: #FFD980;         /* Gold ajusté +10% luminosité */

  /* === BUTTONS === */
  /* Primary Button - Uses accent color system */
  --btn-primary-bg: var(--accent);
  --btn-primary-text: var(--accent-contrast);
  --btn-primary-shadow: var(--btn-accent-shadow);
  --btn-primary-hover-bg: var(--accent-hover);
  --btn-primary-hover-shadow: var(--btn-accent-hover-shadow);

  /* Secondary Button */
  --btn-secondary-bg: var(--flowayz-teal);
  --btn-secondary-text: var(--text-inverse);
  --btn-secondary-shadow: var(--shadow-teal);
  --btn-secondary-hover-bg: #2d9a94; /* Slightly darker teal */
  --btn-secondary-hover-shadow: 0 6px 20px rgba(56, 178, 172, 0.4);

  /* Outline Button */
  --btn-outline-bg: transparent;
  --btn-outline-text: var(--text-primary);
  --btn-outline-border: var(--border-default);
  --btn-outline-hover-bg: var(--bg-surface-hover);
  --btn-outline-hover-text: var(--text-primary);
  --btn-outline-hover-border: var(--border-default);

  /* Ghost Button - Uses accent color */
  --btn-ghost-bg: transparent;
  --btn-ghost-text: var(--accent);
  --btn-ghost-hover-bg: var(--accent-10);

  /* === SIDEBAR === */
  --sidebar-width: 280px; /* Default width for dark mode */
  --sidebar-bg: #0A0F1C;           /* Fond plus sombre pour sidebar en dark mode */
  --sidebar-border: #1E293B;       /* Border plus sombre */
  --sidebar-header-border: #1E293B; /* Border pour header sidebar */
  --logo-text-color: var(--text-primary);
  --sidebar-toggle-bg: var(--bg-surface-hover);
  --sidebar-toggle-color: var(--text-primary);
  --sidebar-toggle-hover-bg: var(--bg-accent);
  --sidebar-scrollbar-thumb: var(--border-default);

  --nav-item-color: var(--text-secondary);
  --nav-item-hover-bg: rgba(255, 255, 255, 0.05);
  --nav-item-hover-color: var(--text-primary);
  --nav-item-active-bg: var(--accent);
  --nav-item-active-color: var(--accent-contrast);
  --nav-item-active-accent-color: var(--accent);

  --nav-action-bg: var(--accent-20);
  --nav-action-color: var(--accent);
  --nav-action-border: var(--accent);
  --nav-action-hover-bg: var(--accent);
  --nav-action-hover-color: var(--accent-contrast);

  /* === CARDS === */
  --card-bg: var(--bg-secondary);
  --card-text-color: var(--text-primary);
  --card-shadow: var(--shadow-md);
  --card-border: var(--border);
  --card-hover-shadow: var(--shadow-lg);

  --card-flat-border: var(--border-default);
  --card-flat-hover-border: var(--accent);

  --card-premium-bg: linear-gradient(135deg, var(--flowayz-navy) 0%, #2a5a9a 100%);
  --card-premium-text-color: var(--text-inverse);
  --card-premium-border: none;
  --card-premium-heading-color: var(--text-inverse);

  --card-selected-border: var(--accent);
  --card-selected-shadow: var(--btn-accent-shadow);

  /* === FORMS === */
  --form-input-color: var(--text-primary);
  --form-input-bg: var(--bg-tertiary);
  --form-input-border: var(--border);
  --form-input-focus-border: var(--accent);
  --form-input-focus-shadow: 0 0 0 3px var(--accent-20);
  --form-input-placeholder-color: var(--text-tertiary);
  --form-label-color: var(--text-primary);
  --form-error-color: #e53e3e; /* Red error color */

  /* Form Section Headers */
  --form-section-header-bg: linear-gradient(to right, var(--flowayz-navy), rgba(26, 60, 107, 0.8));
  --form-section-header-color: #FFFFFF;
  --form-section-header-border: none;

  --form-section-header-navy-bg: linear-gradient(to right, var(--flowayz-navy), rgba(26, 60, 107, 0.8));
  --form-section-header-navy-color: #FFFFFF;
  --form-section-header-navy-border: none;

  --form-section-header-teal-bg: linear-gradient(to right, var(--flowayz-teal), rgba(56, 178, 172, 0.8));
  --form-section-header-teal-color: #FFFFFF;
  --form-section-header-teal-border: none;

  --form-section-header-gold-bg: linear-gradient(to right, var(--flowayz-gold), rgba(255, 209, 102, 0.8));
  --form-section-header-gold-color: #FFFFFF;
  --form-section-header-gold-border: none;

  /* === MODALS === */
  --modal-backdrop-bg: rgba(0, 0, 0, 0.7);
  --modal-bg: var(--bg-secondary);
  --modal-shadow: var(--shadow-xl);
  --modal-border: var(--border);
  --modal-text-color: var(--text-primary);

  /* === TABLES === */
  --table-bg: var(--bg-surface);
  --table-text-color: var(--text-primary);
  --table-shadow: none;
  --table-border-color: var(--border);
  --table-cell-border-color: var(--border-light);
  --table-header-bg: var(--bg-surface-hover);
  --table-header-text-color: var(--text-primary);
  --table-row-hover-bg: var(--bg-surface-hover);

  /* Prose table specific variables (dark mode) */
  --prose-table-header-bg: linear-gradient(to bottom, #2d3748 0%, #1a202c 100%);
  --prose-table-row-hover-bg: rgba(45, 55, 72, 0.5);

  /* === DROPDOWNS === */
  --dropdown-menu-bg: var(--bg-secondary);
  --dropdown-menu-shadow: var(--shadow-lg);
  --dropdown-menu-border: var(--border);
  --dropdown-item-color: var(--text-secondary);
  --dropdown-item-hover-bg: var(--bg-accent);
  --dropdown-item-hover-color: var(--accent);
  --dropdown-divider-bg: var(--flowayz-gray-700);

  /* === BREADCRUMBS === */
  --breadcrumb-color: var(--text-secondary);
  --breadcrumb-link-color: var(--text-secondary);
  --breadcrumb-link-hover-color: var(--accent);
  --breadcrumb-active-color: var(--text-primary);

  /* === TABS === */
  --tabs-border-color: var(--border-default);
  --tab-color: var(--text-secondary);
  --tab-hover-color: var(--accent);
  --tab-active-color: var(--accent);
  --tab-active-border-color: var(--accent);

  /* === AVATARS === */
  --avatar-bg: var(--accent);
  --avatar-text-color: var(--accent-contrast);

  /* === TOASTS === */
  --toast-bg: var(--bg-secondary);
  --toast-shadow: var(--shadow-lg);
  --toast-border: var(--border);
  --toast-text-color: var(--text-primary);
  --toast-success-border-color: var(--flowayz-teal);
  --toast-error-border-color: var(--flowayz-coral);
  --toast-info-border-color: var(--flowayz-navy);

  /* === TOOLTIPS === */
  --tooltip-bg: var(--flowayz-gray-900);
  --tooltip-text-color: white;

  /* === LOADING === */
  --skeleton-bg-gradient: linear-gradient(90deg, var(--flowayz-gray-700) 25%, var(--flowayz-gray-800) 50%, var(--flowayz-gray-700) 75%);
  --loading-wave-color: var(--accent);

  /* === DRAG & DROP === */
  --dropzone-border-color: var(--flowayz-gray-600);
  --dropzone-hover-border-color: var(--flowayz-teal);
  --dropzone-hover-bg: rgba(56, 178, 172, 0.1);

  /* === MARKDOWN PROSE === */
  --markdown-preview-bg: var(--bg-surface);
  --markdown-preview-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  --prose-code-block-border: 1px solid rgba(107, 114, 128, 0.3);
  --prose-code-block-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  --prose-blockquote-bg: linear-gradient(to right, rgba(56, 178, 172, 0.1) 0%, transparent 100%);
  --prose-blockquote-icon-color: rgba(56, 178, 172, 0.4);
  --prose-inline-code-border: 1px solid rgba(107, 114, 128, 0.5);
  --prose-inline-code-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

  /* === LOGO VISIBILITY === */
  --logo-light-display: none;
  --logo-dark-display: block;

  /* === QUOTE AI BUILDER === */
  --mode-btn-ripple-bg: rgba(255, 255, 255, 0.2); /* Same as light mode */
  --mode-btn-ai-glow-start: 0 0 20px rgba(56, 178, 172, 0.3); /* Same as light mode */
  --mode-btn-ai-glow-end: 0 0 40px rgba(56, 178, 172, 0.6); /* Same as light mode */
  --confidence-badge-bg-gradient: linear-gradient(135deg, var(--flowayz-teal), var(--flowayz-gold)); /* Same as light mode */
  --mode-btn-manual-dark-border: var(--flowayz-gray-600);
  --mode-btn-manual-dark-hover-bg: var(--flowayz-gray-700);
  --mode-btn-manual-dark-hover-border: var(--flowayz-teal);
  --quote-item-row-bg: var(--bg-surface); /* Same as light mode */
  --quote-item-row-border: var(--border); /* Same as light mode */
  --quote-item-row-hover-border: var(--flowayz-teal); /* Same as light mode */
  --quote-item-row-hover-shadow: 0 4px 12px rgba(56, 178, 172, 0.1); /* Same as light mode */
}