:root {
  /* Base Colors */
  --color-main: #bc9c22;
  --color-main-light: #eec317;
  --color-main-dark: #937721;
  /* --color-secondary: #d01616;
  --color-secondary_light: #ff0000;
  --color-secondary_dark: #750c0c; */

  --color-white: white;
  --color-offwhite: #eeeeee;
  --color-grey-1: #999999;
  --color-grey-2: #888888;
  --color-grey-3: #777777;
  --color-grey-4: #666666;
  --color-grey-5: #555555;
  --color-grey-6: #444444;
  --color-grey-7: #333333;
  --color-grey-8: #222222;
  --color-grey-9: #111111;
  --color-black: black;

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

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

  /* base.css */
  --sidebar-width: 12vw;
  --base-text: var(--color-white);
  --base-bg: var(--color-offwhite);
  --base-title-box-bg: var(--color-grey-6);
  --base-title-box-border: var(--color-main);
  --base-title-box-text: var(--color-main);

  /* buttons.css */
  --button-bg: var(--color-main);
  --button-text: var(--color-white);
  --button-border: var(--color-main-light);
  --button-bg-focus: var(--color-main-dark);

  /* sidebar.css */
  --sidebar-bg: var(--color-grey-6);
  --sidebar-hover-bg: var(--color-grey-5);
  --sidebar-border: var(--color-main);
  --sidebar-expandable-bg: var(--color-grey-7);
  --sidebar-expandable-hover-bg: var(--color-grey-6);
  --sidebar-expandable-text: var(--color-main);
  --sidebar-expandable-border: rgba(255, 255, 255, 0.05);
  --sidebar-link: var(--color-white);
  --sidebar-link-focus: var(--color-main);
  --logout-button-text: var(--color-white);
  --logout-button-bg: var(--color-main);
  --logout-button-bg-focus: var(--color-red);
  --sidebar-scrollbar-thumb: var(--color-main);
  --sidebar-scrollbar-track: var(--color-grey-6);
  --sidebar-arrow: var(--color-main);

  /* control_card.css */
  --control-card-gradient-start: var(--color-grey-6);
  --control-card-gradient-end: var(--color-grey-6); 
  --control-border: var(--color-main);
  --control-header: var(--color-main);
  --control-label: var(--color-main);

  /* tables.css */
  --table-bg: var(--color-grey-6);
  --table-text: var(--color-white);
  --table-border: var(--color-main);
  --table-header-bg: var(--color-grey-6);
  --table-header-bg-focus: var(--color-grey-5);
  --table-cell-bg: var(--color-grey-8);
  --table-cell-alt-bg: var(--color-grey-7);
  --table-cell-bg-hover: var(--color-grey-5);
  --search-input-bg: var(--color-grey-6);
  --search-input-text: var(--color-white);
  --search-input-border: var(--color-main);
  --search-input-border-hover: var(--color-main-light);
  --date-input-bg: var(--color-grey-6);
  --date-input-text: var(--color-white);
  --date-input-border: var(--color-main);
  --date-input-border-hover: var(--color-main-light);
  --date-input-label-text: var(--color-black);
  --pagination-text: var(--color-black);

  /* form.css */
  --form-input-border: var(--color-main);
  --form-input-border-focus: var(--color-main-light);
  --form-input-bg: var(--color-grey-7);
  --form-input-bg-focus: var(--color-grey-6);
  --form-text: var(--color-white);
  --form-label-text: var(--color-main);  

  /* modal.css */
  --modal-bg: rgba(44, 44, 44, 0.9);
  --modal-content-bg: var(--color-grey-8);
  --modal-content-text: var(--color-white);
  --modal-title-text: var(--color-main);
  --modal-close-text: var(--color-white);

  /* nav_tabs.css */
  --nav-link-text: var(--color-main);
  --nav-link-text-focus: var(--color-main-light);
  --nav-link-bg: var(--color-grey-6);
  --nav-link-bg-focus: var(--color-grey-5);
  --nav-link-scrollbar-track: var(--color-grey-5);
  --nav-link-scrollbar-thumb: var(--color-main);
  --nav-link-text-active: var(--color-white);
  --nav-link-bg-active: var(--color-main);
  
  /* spinner.css */
  --spinner-text: var(--color-white);

  /* dealer_quote.css */
  --dealer-bg: var(--color-offwhite);
  --dealer-text: var(--color-white);
  --dealer-title-text: var(--color-main);
  --dealer-slider-bg: var(--color-grey-5);
  --dealer-slider-border: var(--color-main);
  --dealer-slider-thumb: var(--color-main);

  /* watermark.css */
  --watermark-text: rgba(188, 156, 34, 0.5);
  --watermark-text-paused: rgba(255, 0, 0, 0.5);
}