:root {
  /* Foundational Colors */
  --primary-color: #e65100; /* Main color for brand and CTAs */
  --primary-contrast-color: #ffffff;
  --secondary-color: #ff9800; /* Supporting color or alternative primary color */
  --secondary-contrast-color: #ffffff;
  --tertiary-color: #ffcc80; /* Additional accent color, often used for less critical actions or indicators */
  --tertiary-contrast-color: #ffffff;

  /* Feedback Colors */
  --success-color: #4caf50; /* Indication of a successful action or positive message */
  --danger-color: #f44336; /* Indication of an error or negative message */
  --warning-color: #ffeb3b; /* Indication of caution or a potential issue */
  --info-color: #2196f3; /* Indication of general information */
  --ripple-color: rgba(0, 0, 0, 0.16);

  /* Interactive States */
  --hover-color: #e64a19; /* Color change on mouse hover */
  --active-color: #ff5722; /* Color when the element is being clicked or tapped */
  --focus-color: #ffab91; /* Color when the element is in focus (important for accessibility) */
  --disabled-color: #888888; /* Color indication that an element is inactive or non-interactable */

  /* Background Colors */
  --sidebar: #ebebeb;
  --background: #f2f2f2; /* Main background color for the app or website */
  --background-primary: #fff; /* Main background color for the app or website */
  --background-secondary: #e0e0e0; /* Darkened alternative background color, used for UI differentiation */
  --background-tertiary: rgba(0, 0, 0, 0.04); /* Often used for subtle distinctions in the UI */
  --background-tertiary-alt: rgba(255, 255, 255, 0.04);
  --background-disabled: #dcdcdc;

  /* Text Colors */
  --text-primary: #212121; /* Main text color */
  --text-secondary: #757575; /* Secondary or lighter text color, often used for metadata or less important information */
  --text-tertiary: #bdbdbd; /* Even lighter text color for non-critical information */
  --text-on-primary: #ffffff; /* Color of text that will appear on top of the primary color (important for contrast) */
  --text-on-secondary: #212121; /* Color of text that will appear on top of the secondary color */
  --text-on-danger: #ffffff; /* Color of text that will appear on top of the secondary color */

  /* Borders and Dividers */
  --border-primary: #e0e0e0; /* Main color for borders */
  --border-secondary: #eeeeee; /* Alternative or lighter border color */
  --border-radius: 4px;
  --border-width: 1px;
  --divider-color: #bdbdbd; /* Color for separating sections or elements */

  /* Special Cases */
  --inverse-color: #ffffff; /* Color for elements on dark backgrounds */
  --highlight-color: #ffeb3b; /* Color for highlighting text or elements */
  --muted-color: #fafafa; /* Extremely light color, often used for background areas to be less pronounced */

  /* Gradient Colors (if using gradients) */
  --gradient-start: #e65100; /* Gradient start color */
  --gradient-end: #ff9800; /* Gradient end color */

  /* Shadows (though not a color, still relevant) */
  --shadow-color: rgba(
    0,
    0,
    0,
    0.16
  ); /* Color for shadows to ensure consistent depth cues across UI */
}