:host {
  /* Theme-aware variables (light theme by default) */
  --plg-cc-bg-color: #ffffff;
  --plg-cc-text-color: #000000;
  --plg-cc-placeholder-color: rgba(0, 0, 0, 0.3);
  --plg-cc-border-color: #c6c8ce;
  --plg-cc-focus-outline-color: #000000;
  --plg-cc-input-border-color: transparent;

  /* Button colors - Primary */
  --plg-cc-color-primary: #2a86e9;
  --plg-cc-color-primary-hover: #1265bd;
  --plg-cc-color-primary-light: #d4e7fb;
  --plg-cc-color-primary-light-hover: #bfdbf8;
  --plg-cc-color-primary-disabled: #e9f3fd;
  --plg-cc-color-primary-text: #ffffff;

  /* Button colors - Secondary */
  --plg-cc-color-secondary: #e6e8f0;
  --plg-cc-color-secondary-hover: #c5c8d6;
  --plg-cc-color-secondary-light: #fdfdfe;
  --plg-cc-color-secondary-light-hover: #fbfbfd;
  --plg-cc-color-secondary-disabled: #fcfcfd;
  --plg-cc-color-secondary-text: #000000;

  /* Button colors - Yellow */
  --plg-cc-color-yellow: #ffb200;
  --plg-cc-color-yellow-hover: #ffd54f;
  --plg-cc-color-yellow-light: #fff0cc;
  --plg-cc-color-yellow-light-hover: #ffe8b3;
  --plg-cc-color-yellow-disabled: #fff3d6;
  --plg-cc-color-yellow-text: #000000;

  /* Button colors - Orange */
  --plg-cc-color-orange: #fd4b23;
  --plg-cc-color-orange-hover: #e63e1a;
  --plg-cc-color-orange-light: #ffe5e0;
  --plg-cc-color-orange-light-hover: #ffd1c7;
  --plg-cc-color-orange-disabled: #e6e8f0;
  --plg-cc-color-orange-text: #ffffff;

  /* Text colors for specific contexts */
  --plg-cc-text-muted: #8e9097;
  --plg-cc-text-link: #a5a7ad;
  --plg-cc-error-color: #df3517;
  --plg-cc-close-button-color: #000000;

  /* Spinner colors */
  --plg-cc-spinner-color-primary: var(--plg-cc-text-color);
  --plg-cc-spinner-color-orange: var(--plg-cc-color-orange);
  --plg-cc-spinner-color-yellow: var(--plg-cc-color-yellow);
}

[data-theme="dark"] {
  --plg-cc-bg-color: #10121a;
  --plg-cc-text-color: #f3f5fc;
  --plg-cc-placeholder-color: #4a4b52;
  --plg-cc-border-color: #4a4b52;
  --plg-cc-focus-outline-color: #f3f5fc;
  --plg-cc-input-border-color: #4a4b52;
  --plg-cc-error-color: #fd5937;

  --plg-cc-close-button-color: #f3f5fc;

  /* redefine vars using vars for dark theme, or it won't grab the new color */
  --plg-cc-spinner-color-primary: var(--plg-cc-text-color);
}