: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 - CTA (orange in dark theme, black in light theme) */
  --plg-cc-cta-color: #fd4b23;
  --plg-cc-cta-color-hover: #e63e1a;
  --plg-cc-cta-color-light: #ffe5e0;
  --plg-cc-cta-color-light-hover: #ffd1c7;
  --plg-cc-cta-color-disabled: #e6e8f0;
  --plg-cc-cta-color-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-cta: var(--plg-cc-cta-color);
  --plg-cc-spinner-color-yellow: var(--plg-cc-color-yellow);
}

[data-theme="light"] {
  --plg-cc-cta-color: #10121a;
  --plg-cc-cta-color-hover: #2a2c36;
  --plg-cc-cta-color-light: #e6e8f0;
  --plg-cc-cta-color-light-hover: #d1d3db;
  --plg-cc-cta-color-disabled: #e6e8f0;
  --plg-cc-cta-color-text: #ffffff;
  --plg-cc-spinner-color-cta: var(--plg-cc-cta-color-text);
}

[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);
  --plg-cc-spinner-color-cta: var(--plg-cc-cta-color-text);
}