@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");

:root {
  /* Button Colors */
  --eb-color-start: #ffcc29;
  --eb-color-mid: #ffa227;
  --eb-color-end: #f1bf20;
  --eb-color-hover-start: #ffe182;
  --eb-color-hover-mid: #ffcc29;
  --eb-color-hover-end: #ffa227;
  --eb-color-active-start: #f1bf20;
  --eb-color-active-mid: #ffa227;
  --eb-color-active-end: #c99900;

  /* Popup Colors */
  --eb-popup-bg-base: #17161c;
  --eb-popup-bg-start: #23212c;
  --eb-popup-bg-mid: #18171c;
  --eb-popup-bg-end: #17161c;
  --eb-popup-header-bg-start: #23212c;
  --eb-popup-header-bg-end: #17161c;
  --eb-popup-cta-bg-start: #ffcc29;
  --eb-popup-cta-bg-end: #ffa227;

  /* Border Colors */
  --eb-popup-border-top-start: #ffcc29;
  --eb-popup-border-top-mid: #ffe182;
  --eb-popup-border-top-end: #ffa227;
  --eb-popup-border-bottom-start: #ffa227;
  --eb-popup-border-bottom-mid: #ffcc29;
  --eb-popup-border-bottom-end: #f1bf20;

  /* Banner Specific Colors */
  --eb-banner-gr-start: #17161c;
  --eb-banner-gr-mid: #23212c;
  --eb-banner-gr-end: #151312;

  /* Composite Variables (auto-calculated from colors above) */
  --eb-popup-bg: #17161c linear-gradient(180deg, #23212c 0%, #18171c 50%, #17161c 100%);
  --eb-popup-header-bg: linear-gradient(180deg, #23212c 0%, #17161c 100%);
  --eb-popup-cta-bg: linear-gradient(90deg, #ffcc29 0%, #ffa227 100%);
  --eb-popup-border-top: linear-gradient(90deg, #ffcc29, #ffe182, #ffa227);
  --eb-popup-border-bottom: linear-gradient(90deg, #ffa227, #ffcc29, #f1bf20);
  --eb-banner-gr: linear-gradient(90deg, #17161c 0%, #23212c 50%, #151312 100%);

  /* Typography & Layout (static values) */
  --eb-font-family: "Poppins", sans-serif;
  --eb-radius: 60px;
  --eb-padding: 14px 16px;
  --eb-font-size: 14px;
  --eb-line-height: 21px;
  --eb-icon-size: 24px;
  --eb-popup-width: 480px;
  --eb-popup-radius: 16px;
  --eb-popup-cta-shadow: 0 4px 20px rgba(255, 136, 0, 0.5);
}