:root,
[data-theme="light"],
[data-mode="light"] {
  --shadow-xl: 0 12px 60px rgba(0, 0, 0, 0.20);

  /* === 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 light mode */
  --sidebar-bg: #FFFFFF;           /* Fond blanc pour sidebar en light mode */
  --sidebar-border: #E2E8F0;       /* Border claire */
  --sidebar-header-border: #E2E8F0; /* 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: var(--bg-surface-hover);
  --nav-item-hover-color: var(--flowayz-navy);
  --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, #f0f9ff 0%, #e0f2fe 100%);
  --card-premium-text-color: var(--text-primary);
  --card-premium-border: 2px solid #bae6fd; /* Sky blue border */
  --card-premium-heading-color: var(--text-primary);

  --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-10);
  --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-cream), rgba(255, 245, 228, 0.9));
  --form-section-header-color: var(--flowayz-navy);
  --form-section-header-border: 2px solid rgba(26, 60, 107, 0.2);

  --form-section-header-navy-bg: linear-gradient(to right, var(--flowayz-cream), rgba(255, 245, 228, 0.9));
  --form-section-header-navy-color: var(--flowayz-navy);
  --form-section-header-navy-border: 2px solid rgba(26, 60, 107, 0.2);

  --form-section-header-teal-bg: linear-gradient(to right, var(--flowayz-cream), rgba(255, 245, 228, 0.9));
  --form-section-header-teal-color: var(--flowayz-navy);
  --form-section-header-teal-border: 2px solid rgba(56, 178, 172, 0.2);

  --form-section-header-gold-bg: linear-gradient(to right, var(--flowayz-cream), rgba(255, 245, 228, 0.9));
  --form-section-header-gold-color: var(--flowayz-navy);
  --form-section-header-gold-border: 2px solid rgba(255, 209, 102, 0.2);

  /* === MODALS === */
  --modal-backdrop-bg: rgba(0, 0, 0, 0.5);
  --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; /* Tables usually don't need heavy shadows */
  --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 (light mode) */
  --prose-table-header-bg: linear-gradient(to bottom, var(--bg-surface-hover) 0%, var(--bg-surface) 100%);
  --prose-table-row-hover-bg: var(--bg-surface-hover);

  /* === 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-200);

  /* === BREADCRUMBS === */
  --breadcrumb-color: var(--flowayz-gray-600);
  --breadcrumb-link-color: var(--flowayz-gray-600);
  --breadcrumb-link-hover-color: var(--accent);
  --breadcrumb-active-color: var(--flowayz-navy);

  /* === TABS === */
  --tabs-border-color: var(--flowayz-gray-200);
  --tab-color: var(--flowayz-gray-600);
  --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-200) 25%, var(--flowayz-gray-100) 50%, var(--flowayz-gray-200) 75%);
  --loading-wave-color: var(--accent);

  /* === DRAG & DROP === */
  --dropzone-border-color: var(--flowayz-gray-300);
  --dropzone-hover-border-color: var(--accent);
  --dropzone-hover-bg: var(--accent-5);

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

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

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

  /* === BADGES === */
  --badge-coral-bg: rgba(255, 123, 84, 0.1);
  --badge-coral-text: var(--flowayz-coral);
  --badge-teal-bg: rgba(56, 178, 172, 0.1);
  --badge-teal-text: var(--flowayz-teal);
  --badge-gold-bg: rgba(255, 209, 102, 0.2);
  --badge-gold-text: var(--flowayz-gold);
  --badge-navy-bg: rgba(26, 60, 107, 0.1);
  --badge-navy-text: var(--flowayz-navy);
}