:root {
  /* Base Colors */
  --color-main: #2eb3c1;
  --color-main-light: #5ecbd9;       /* adjusted for contrast & vibrancy */
  --color-main-lighter: #7be0ed;  
  --color-main-dark: #1a7e89;

  --color-secondary: #084064;
  --color-secondary-light: #3b6c90;
  --color-secondary-dark: #042539;

  --color-white: #ffffff;
  --color-offwhite: #f5f5f5;
  --color-gray: #999999;
  --color-black: #000000;

  --color-red: #e44a46;
  --color-red-dark: #c53a3a;

  --overlay-bg: rgba(0, 0, 0, 0.7);
  --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);

  /* Rebased layout */
  --sidebar-width: 12vw;
  --base-bg: var(--color-white);
  --base-text: var(--color-secondary);
  --base-title-box-bg: var(--color-offwhite);
  --base-title-box-border: var(--color-main);
  --base-title-box-text: var(--color-secondary);

  /* Buttons */
  --button-bg: var(--color-main-light);
  --button-text: var(--color-secondary);
  --button-border: var(--color-main-dark);
  --button-bg-focus: var(--color-main);
  --button-text-focus: var(--color-white);

  /* Sidebar */
  --sidebar-bg: var(--color-offwhite);
  --sidebar-hover-bg: var(--color-main-light);
  --sidebar-border: var(--color-main);
  --sidebar-expandable-bg: var(--color-offwhite);
  --sidebar-expandable-hover-bg: var(--color-main-light);
  --sidebar-expandable-text: var(--color-secondary);
  --sidebar-expandable-border: rgba(0, 0, 0, 0.05);
  --sidebar-link: var(--color-secondary);
  --sidebar-link-focus: var(--color-secondary-light);
  --logout-button-bg: var(--color-main-light);
  --logout-button-bg-focus: var(--color-red);
  --sidebar-scrollbar-thumb: var(--color-main);
  --sidebar-scrollbar-track: var(--color-main-lighter);
  --sidebar-arrow: var(--color-main);

  /* Control Cards */
  --control-card-gradient-start: var(--color-offwhite);
  --control-card-gradient-end: var(--color-offwhite);
  --control-border: var(--color-main);
  --control-header: var(--color-secondary);
  --control-label: var(--color-main);

  /* Tables */
  --table-bg: var(--color-white);
  --table-text: var(--color-secondary);
  --table-border: var(--color-main);
  --table-header-bg: var(--color-main-light);
  --table-header-bg-focus: var(--color-main);
  --table-cell-bg: var(--color-offwhite);
  --table-cell-alt-bg: var(--color-white);
  --table-cell-bg-hover: var(--color-main-light);
  --search-input-bg: var(--color-offwhite);
  --search-input-text: var(--color-secondary);
  --search-input-border: var(--color-main);
  --search-input-border-hover: var(--color-main-dark);
  --date-input-bg: var(--color-offwhite);
  --date-input-text: var(--color-secondary);
  --date-input-border: var(--color-main);
  --date-input-border-hover: var(--color-main-dark);
  --date-input-label-text: var(--color-secondary);
  --pagination-text: var(--color-secondary);

  /* Forms */
  --form-input-border: var(--color-main-dark);
  --form-input-border-focus: var(--color-secondary);
  --form-input-bg: var(--color-offwhite);
  --form-input-bg-focus: var(--color-main-light);
  --form-text: var(--color-secondary);
  --form-label-text: var(--color-secondary);

  /* Modals */
  --modal-bg: rgba(255, 255, 255, 0.9);
  --modal-content-bg: var(--color-offwhite);
  --modal-content-text: var(--color-secondary);
  --modal-title-text: var(--color-secondary);
  --modal-close-text: var(--color-secondary);

  /* Tabs */
  --nav-link-text: var(--color-secondary);
  --nav-link-text-focus: var(--color-secondary-light);
  --nav-link-bg: var(--color-offwhite);
  --nav-link-bg-focus: var(--color-main-light);
  --nav-link-scrollbar-track: var(--color-main-lighter);
  --nav-link-scrollbar-thumb: var(--color-main);
  --nav-link-text-active: var(--color-white);
  --nav-link-bg-active: var(--color-main);

  /* Spinner */
  --spinner-text: var(--color-main-dark);

  /* Dealer Quote */
  --dealer-bg: var(--color-offwhite);
  --dealer-text: var(--color-secondary);
  --dealer-title-text: var(--color-secondary);
  --dealer-slider-bg: var(--color-main-light);
  --dealer-slider-border: var(--color-main);
  --dealer-slider-thumb: var(--color-secondary);

  /* Watermark */
  --watermark-text: rgba(46, 179, 193, 0.2);
  --watermark-text-paused: rgba(255, 0, 0, 0.3);
}