/**
 * SAT Portal – Color reference for Light Mode and Dark Mode (Night Mode).
 * Single source of truth for all colors used across the app.
 * Body class: .light-mode (default) or .night-mode (ThemeContext).
 */

export const lightMode = {
  // ----- Brand / Primary -----
  primary: '#f21b23',
  primaryDark: '#d91820',
  secondary: '#f21b23',
  accent: '#f21b23',
  success: '#4caf50',

  // ----- Backgrounds -----
  bgPrimary: '#e5e5e5',
  bgSecondary: '#e5e5e5',
  bgCard: '#ffffff',
  bgGray: '#e5e5e5',
  bgLightGray: '#fafafa',
  body: '#e5e5e5',

  // ----- Text -----
  textPrimary: '#4d4d4f',
  textSecondary: '#4d4d4f',
  textMuted: '#4d4d4f',

  // ----- Borders -----
  border: '#e5e5e5',
  hoverOverlay: '#e5e5e5',

  // ----- Navbar (shared dark bar in both modes) -----
  navbarBg: 'rgba(0, 0, 0, 0.95)',
  navbarText: 'rgba(255, 255, 255, 0.95)',
  navbarBorder: 'rgba(255, 255, 255, 0.15)',
  menuToggleBg: 'rgba(255, 255, 255, 0.2)',
  menuToggleBgHover: 'rgba(255, 255, 255, 0.3)',
  brandText: '#ffffff',
  brandIcon: '#f87171',

  // ----- User pill (light mode) -----
  userProfileBg: 'rgba(255, 255, 255, 0.7)',
  userProfileBgHover: 'rgba(255, 255, 255, 0.95)',
  userProfileBorder: 'rgba(0, 0, 0, 0.06)',
  userName: '#334155',

  // ----- Sidebar (theme vars; default light-style sidebar uses dark bar) -----
  sidebarBg: 'rgba(0, 0, 0, 0.95)',
  sidebarText: '#ffffff',
  sidebarActiveBg: '#e5e5e5',
  sidebarActiveText: '#f21b23',
  sidebarHoverBg: '#e5e5e5',
  sidebarHeaderBg: '#910404e0',
  submenuBg: '#fafafa',
  submenuLink: '#4d4d4f',
  submenuNestedBg: 'rgba(0, 0, 0, 0.05)',

  // ----- Main content -----
  mainContentBg: '#e5e5e5',

  // ----- Login page -----
  loginWrapperBg: '#ffffff',
  formSectionBg: '#ffffff',
  loginSubtitle: '#4d4d4f',
  loginInputLabel: '#4d4d4f',
  loginInputFocusLabel: '#e5e5e5',
  loginInputBorder: 'transparent',
  loginDivider: '#4d4d4f',
  loginDividerLine: 'rgba(229, 229, 229, 0.4)',
  loginErrorBg: '#fef2f2',
  loginErrorText: '#f21b23',

  // ----- Login image section -----
  imageSectionGradient: 'linear-gradient(135deg, #f21b23 0%, #d91820 50%, #4d4d4f 100%)',
  imageOverlay: 'rgba(180, 15, 20, 0.76)',
  overlayContentText: '#ffffff',
  overlayContentMuted: '#ebebeb',

  // ----- Dashboard -----
  dashboardContainerBg: '#e5e5e5',
  dashboardContainerText: '#1a1a1a',
  dashboardHeaderBorder: '#e5e5e5',
  dashboardTitle: '#1a1a1a',
  dashboardSubtitle: '#666',
  dashboardControlLabel: '#666',
  dashboardSelectBorder: '#d0d0d0',
  dashboardSelectBg: '#ffffff',
  dashboardSelectText: '#1a1a1a',
  dashboardSectionBorder: '#e5e5e5',
  dashboardSectionTitle: '#1a1a1a',
  dashboardSectionDescription: '#757575',
  auditTrendsFilterLabel: '#616161',
  auditTrendsSelectBg: '#f0f0f0',
  auditTrendsSelectBorder: '#e0e0e0',
  auditTrendsSelectText: '#1a1a1a',
  auditTrendsLoadingBg: 'rgba(255, 255, 255, 0.9)',
  auditTrendsLoadingBorder: '#e0e0e0',
  auditTrendsLoadingText: '#757575',
  chartCardBg: 'rgba(255, 255, 255, 0.9)',
  chartCardBorder: '#e5e5e5',
  chartSubtitle: '#757575',
  dashboardLoadingText: '#757575',
  dashboardErrorText: '#1a1a1a',

  // ----- Forms / Tables (user-create, generic) -----
  formSectionBg: 'var(--bg-card)',
  inputLabel: 'var(--text-primary)',
  inputFieldBg: 'var(--bg-card)',
  inputFieldBorder: 'var(--border-color)',
  inputFieldFocusBorder: 'var(--primary-color)',

  // ----- CreateForm (primary scale) -----
  primary50: '#fff7ed',
  primary100: '#ffedd5',
  primary200: '#fed7aa',
  primary400: '#fb923c',
  primary500: '#f21b23',
  primary600: '#d91820',
  primary700: '#c2410c',

  // ----- Shadows -----
  shadowSm: '0 1px 3px rgba(0, 0, 0, 0.12)',
  shadowMd: '0 2px 6px rgba(0, 0, 0, 0.15)',
  shadowLg: '0 3px 12px rgba(0, 0, 0, 0.18)',
};

export const darkMode = {
  // ----- Brand / Primary (red accent in night mode) -----
  primary: '#f21b23',
  primaryLight: '#f87171',
  primaryDark: '#d91820',

  // ----- Backgrounds -----
  bgBody: '#2e2c2c',
  bgMain: '#2e2c2c',
  bgCard: '#3a3838',
  bgSidebar: '#1e1d1d',

  // ----- Text -----
  textPrimary: 'rgba(255, 255, 255, 0.98)',
  textSecondary: 'rgba(255, 255, 255, 0.9)',
  textMuted: 'rgba(255, 255, 255, 0.75)',
  textPlaceholder: 'rgba(255, 255, 255, 0.5)',

  // ----- Borders -----
  border: 'rgba(255, 255, 255, 0.15)',
  borderStrong: 'rgba(255, 255, 255, 0.2)',
  borderLight: 'rgba(255, 255, 255, 0.1)',

  // ----- Scrollbar -----
  scrollbarTrack: '#2e2c2c',
  scrollbarThumb: 'rgba(255, 255, 255, 0.2)',
  scrollbarThumbHover: 'rgba(255, 255, 255, 0.35)',

  // ----- Navbar (same as light – dark bar) -----
  navbarBg: 'rgba(0, 0, 0, 0.95)',
  navbarText: 'rgba(255, 255, 255, 0.95)',

  // ----- User pill (night mode) -----
  userProfileBg: 'rgba(255, 255, 255, 0.18)',
  userProfileBgHover: 'rgba(255, 255, 255, 0.28)',
  userProfileBorder: 'rgba(255, 255, 255, 0.25)',
  userProfileBorderHover: 'rgba(255, 255, 255, 0.4)',
  userName: 'rgba(255, 255, 255, 0.95)',

  // ----- Sidebar (night mode) -----
  sidebarBg: '#1e1d1d',
  sidebarBorder: 'rgba(255, 255, 255, 0.1)',
  sidebarText: 'rgba(255, 255, 255, 0.9)',
  menuLinkHoverBg: 'rgba(255, 255, 255, 0.1)',
  menuLinkHoverText: '#f87171',
  menuLinkActiveBg: 'rgba(242, 27, 35, 0.2)',
  menuLinkActiveText: '#f87171',
  menuLinkActiveBorder: '#f87171',
  submenuBg: 'rgba(0, 0, 0, 0.25)',
  submenuLink: 'rgba(255, 255, 255, 0.8)',
  submenuLinkHoverBg: 'rgba(255, 255, 255, 0.08)',
  sidebarFooterBorder: 'rgba(255, 255, 255, 0.12)',
  sidebarScrollbarTrack: '#1e1d1d',

  // ----- Main content -----
  mainContentBg: '#2e2c2c',
  contentWrapperText: 'rgba(255, 255, 255, 0.95)',
  contentWrapperHeading: 'rgba(255, 255, 255, 0.98)',

  // ----- Login page (night mode) -----
  loginWrapperBg: '#2e2c2c',
  formSectionBg: '#2e2c2c',
  loginSubtitle: 'rgba(255, 255, 255, 0.9)',
  loginInputLabel: 'rgba(255, 255, 255, 0.9)',
  loginInputLabelHover: '#f87171',
  loginInputLabelFocus: 'rgba(255, 255, 255, 0.95)',
  loginInputBg: '#3a3838',
  loginInputBorder: 'rgba(255, 255, 255, 0.15)',
  loginInputText: 'rgba(255, 255, 255, 0.95)',
  loginInputPlaceholder: 'rgba(255, 255, 255, 0.5)',
  loginInputFocusBg: 'rgba(255, 255, 255, 0.08)',
  loginInputFocusBorder: '#f21b23',
  loginInputFocusShadow: '0 0 0 3px rgba(242, 27, 35, 0.25)',
  loginIcon: 'rgba(255, 255, 255, 0.6)',
  loginIconFocus: '#f87171',
  loginDivider: 'rgba(255, 255, 255, 0.75)',
  loginDividerLine: 'rgba(255, 255, 255, 0.2)',
  loginHeaderTitle: '#f87171',
  loginErrorBg: 'rgba(242, 27, 35, 0.2)',
  loginErrorText: '#f87171',
  loginErrorBorder: 'rgba(242, 27, 35, 0.4)',

  // ----- Dashboard (night mode) -----
  dashboardContainerBg: '#2e2c2c',
  dashboardContainerText: 'rgba(255, 255, 255, 0.9)',
  dashboardHeaderBorder: 'rgba(255, 255, 255, 0.2)',
  dashboardTitle: 'rgba(255, 255, 255, 0.98)',
  dashboardSubtitle: 'rgba(255, 255, 255, 0.7)',
  dashboardControlLabel: 'rgba(255, 255, 255, 0.75)',
  dashboardSelectBorder: 'rgba(255, 255, 255, 0.25)',
  dashboardSelectBg: '#3a3838',
  dashboardSelectText: 'rgba(255, 255, 255, 0.95)',
  dashboardSectionBorder: 'rgba(255, 255, 255, 0.15)',
  dashboardSectionTitle: 'rgba(255, 255, 255, 0.98)',
  dashboardSectionDescription: 'rgba(255, 255, 255, 0.75)',
  auditTrendsFilterLabel: 'rgba(255, 255, 255, 0.75)',
  auditTrendsSelectBg: '#3a3838',
  auditTrendsSelectBorder: 'rgba(255, 255, 255, 0.25)',
  auditTrendsSelectText: 'rgba(255, 255, 255, 0.95)',
  auditTrendsLoadingBg: '#3a3838',
  auditTrendsLoadingBorder: 'rgba(255, 255, 255, 0.18)',
  auditTrendsLoadingText: 'rgba(255, 255, 255, 0.75)',
  chartCardBg: '#3a3838',
  chartCardBorder: 'rgba(255, 255, 255, 0.18)',
  chartSubtitle: 'rgba(255, 255, 255, 0.7)',
  chartAxisTick: 'rgba(255, 255, 255, 0.9)',
  chartAxisLine: 'rgba(255, 255, 255, 0.35)',
  chartGridLine: 'rgba(255, 255, 255, 0.15)',
  dashboardLoadingText: 'rgba(255, 255, 255, 0.75)',
  dashboardErrorText: 'rgba(255, 255, 255, 0.9)',

  // ----- Form / Table sections (night mode) -----
  formSectionBg: '#3a3838',
  formSectionBorder: 'rgba(255, 255, 255, 0.12)',
  formHeaderBorder: 'rgba(255, 255, 255, 0.15)',
  formHeaderTitle: 'rgba(255, 255, 255, 0.98)',
  inputLabel: 'rgba(255, 255, 255, 0.85)',
  closeBtnIcon: 'rgba(255, 255, 255, 0.8)',
  closeBtnHoverBg: 'rgba(255, 255, 255, 0.1)',
  formActionsBorder: 'rgba(255, 255, 255, 0.12)',
  btnSecondaryBg: 'rgba(255, 255, 255, 0.1)',
  btnSecondaryText: 'rgba(255, 255, 255, 0.95)',
  btnSecondaryBorder: 'rgba(255, 255, 255, 0.2)',
  btnSecondaryHoverBg: 'rgba(255, 255, 255, 0.18)',
  btnSecondaryHoverBorder: 'rgba(242, 27, 35, 0.5)',
  controlBtnText: 'rgba(255, 255, 255, 0.85)',
  controlBtnHoverBg: 'rgba(255, 255, 255, 0.1)',
  controlBtnHoverText: '#f87171',
  inputFieldBg: 'var(--theme-input-bg)',
  inputFieldBorder: 'rgba(255, 255, 255, 0.2)',
  inputFieldText: 'rgba(255, 255, 255, 0.95)',
  inputFieldPlaceholder: 'rgba(255, 255, 255, 0.5)',
  defaultPasswordInfo: '#f87171',
};

// Alias for code that uses "nightMode" naming
export const nightMode = darkMode;

// CSS custom property names used by themeUtils (for reference)
export const themeVarNames = [
  '--theme-header-bg',
  '--theme-header-text',
  '--theme-header-brand',
  '--theme-sidebar-bg',
  '--theme-sidebar-text',
  '--theme-sidebar-active-bg',
  '--theme-sidebar-active-text',
  '--theme-sidebar-hover-bg',
  '--theme-content-bg',
  '--theme-text-primary',
  '--theme-text-secondary',
  '--theme-text-muted',
  '--theme-font-size',
  '--theme-font-family',
  '--theme-primary',
  '--theme-primary-dark',
  '--theme-radius',
  '--theme-body-bg',
  '--theme-border-color',
  '--theme-card-bg',
  '--theme-input-bg',
];

export default { lightMode, darkMode, nightMode, themeVarNames };
