:root {
  --color-bg-primary: #ffffff; /* body background */
  --color-bg-secondary: #f9f9f9; /* sidebar background */
  --color-bg-secondary-alt: #fcfcfc; /* contrasting secondary background */
  --color-fg-primary: #000000; /* main text color */
  --color-bg-highlight: #ffd5fc;
  --color-fg-highlight: #ff00ed80; /* text color for highlighted text */
  --color-fg-secondary: #666666; /* text color for secondary bg */
  --color-fg-tertiary: #999999; /* text color for placeholder, etc. */
  --color-bg-disabled: #cccccc;
  --color-fg-disabled: #808080;
  --color-bg-muted: #dddddd;
  --color-fg-muted: #333333;
  --color-border: #dddddd; /* separates fg & bg */
  --color-border-secondary: #bfbfbf;
  --color-border-tertiary: #00000008;
  --color-border-alt: #333333; /* an alternative border color, for alternating borders for example */
  --color-border-pill: #00000030;
  --color-accent: #ff00ed; /* accent color for links, buttons, etc. */
  --color-accent-text: #ffffff; /* text color for elements with accent background */
  --color-accent-subtle: #00330f; /* a more subtle accent color, for less prominent elements */
  --color-accent-alt: #9500ff; /* accent on hover, etc */

  --color-card-border: #cccccc;
  --color-card-shadow: rgba(0, 0, 0, 0.2);

  --color-fg-message-info: #31708f;
  --color-bg-message-info: #eaf4fc;
  --color-fg-message-notice: #155724;
  --color-bg-message-notice: #e9f7ef;
  --color-fg-message-warn: #856404;
  --color-bg-message-warn: #fff3cd;
  --color-bg-message-error: #721c24;
  --color-bg-message-error: #f8d7da;

  --color-status-inactive: #cccccc; /* Inactive status color */
  --color-status-active: #7cec00; /* Active status color */
  --color-status-failed: #a30808;

  --color-levels-bar: #ffbcfa;
  --color-levels-green: #7cec00;
  --color-levels-red: #eb3d88;

  --color-transcript-low: #aaaaaa;
  --color-transcript-high: #000000;

  --color-avatar-1: #f984e5;
  --color-avatar-2: #c77ce5;
  --color-avatar-3: #f9a8d4;
  --color-avatar-4: #d672ac;
  --color-avatar-5: #68a2d2;
  --color-avatar-6: #8fc08c;
  --color-avatar-7: #a6a57a;
  --color-avatar-8: #7f6a93;
  --color-avatar-9: #c49a6c;
  --color-avatar-10: #718a79;

  --color-bg-can-create: #8fc08c30;
  --color-bg-can-update: #68a2d230;
  --color-bg-can-delete: #d672ac30;
  --color-bg-can-list: #ffffff;

  --font-weight-table-body: 400;

  --gradient-loading: linear-gradient(
    90deg,
    var(--color-accent),
    var(--color-accent-alt)
  );
  --font-family-primary: "IBM Plex Sans", system-ui, sans-serif;
}