.theme-dark {
  /* Main theme color */
  --main-theme-color: #ffd166;

  /* Header theme variables */
  --header-background-color: #111634;
  --header-height: 64px;

  /* Text color variables - Dark theme */
  --primary-text-color: #ffd166;
  --secondary-text-color: #e7ecff;
  --standard-primary-site-text-color: #ffffff;
  --standard-secondary-site-text-color: #9aa5cf;
  --standard-site-font-size: 16px;
  --standard-site-font-weight: 400;
  --blockquote-border-color: #ffd166;
  --blockquote-bg: #161c40;
  --blockquote-quote-color: #ffd166;

  /* Global page */
  --site-body-bg: #0e1230;
  --site-body-text: var(--standard-primary-site-text-color);
  --site-overlay-bg: rgba(8, 11, 30, 0.72);

  /* Footer */
  --footer-bg: #0a0d24;
  --footer-curtain-height-offset: -25px;

  /* Services */
  --services-divider-color: rgba(255, 255, 255, 0.12);
  --services-bg: linear-gradient(180deg, #0c0c0c 0%, var(--site-body-bg) 100%);

  /* Button theme variables - Dark theme */
  --button-theme-dark-bg: transparent;
  --button-theme-dark-text: #ffd166;
  --button-theme-dark-border: #ffd166;
  --button-theme-dark-hover-bg: #ffd166;
  --button-theme-dark-hover-text: #111634;

  /* CTA Pill Button - Dark theme */
  --cta-pill-dark-bg: #ffd166;
  --cta-pill-dark-text: #111634;
  --cta-pill-dark-hover-bg: #ffdd8c;
  --cta-pill-dark-icon-bg: #111634;
  --cta-pill-dark-icon-color: #ffd166;
  /* CTA Pill base variables (mapped from dark theme) */
  --cta-pill-bg: var(--cta-pill-dark-bg);
  --cta-pill-text: var(--cta-pill-dark-text);
  --cta-pill-hover-bg: var(--cta-pill-dark-hover-bg);
  --cta-pill-icon-bg: var(--cta-pill-dark-icon-bg);
  --cta-pill-icon-color: var(--cta-pill-dark-icon-color);

  /* TwoToneTextTeaser */
  --two-tone-text-teaser-bg: var(--site-body-bg);

  /* Lead Banner gradient variables - Dark theme */
  --lead-banner-height: 620px;
  --lead-banner-height-mobile: 480px;
  --lead-banner-gradient-start: #0e1230;
  --lead-banner-gradient-stop-25: #3a4488;
  --lead-banner-gradient-stop-50: #ffd166;
  --lead-banner-gradient-stop-75: #3a4488;
  --lead-banner-gradient-end: #0e1230;
  --lead-banner-text-primary: #ffffff;
  --lead-banner-text-secondary: #111634;
  --lead-banner-secondary-text-color: #e7ecff;
  --lead-banner-char-fade-duration: 0.3s;

  /* Article tiles (Header overlay) */
  --article-tile-overlay-bg: rgba(0, 0, 0, 0.8);

  /* Header overlay */
  --header-overlay-column-divider-color: rgba(255, 255, 255, 0.12);
  --header-overlay-hover-bg: rgba(255, 209, 102, 0.12);

  /* Site banner */
  --site-banner-bg: #363535;
  --site-banner-text-color: var(--primary-text-color);
  --site-banner-marquee-duration: 5s;
  --site-banner-cycle-duration: 10s;
  --site-banner-font-size: 20px;

  /* Quote */
  --quote-bg: #363535;
  --quote-card-glow: radial-gradient(closest-side at 82% 28%, rgba(246, 255, 0, 0.34), transparent 60%), radial-gradient(closest-side at 92% 10%, rgba(255, 196, 0, 0.22), transparent 58%);

  /* LoopingCircleGallery overlay */
  --looping-circle-gallery-overlay-bg: rgba(255, 255, 255, 0.5);
  --looping-circle-gallery-overlay-text: #000000;

  /* CountUp */
  --count-up-bg: linear-gradient(180deg, #0c0c0c 0%, var(--site-body-bg) 100%);
  --count-up-card-bg: #2a2a2a;

  /* SubscriptionPlans */
  --subscription-plans-bg: linear-gradient(180deg, #0c0c0c 0%, var(--site-body-bg) 100%);
  --subscription-plans-card-bg: #2a2a2a;
  --subscription-plans-card-border: #404040;
  --subscription-plans-toggle-bg: #374151;
  --subscription-plans-toggle-active-bg: var(--primary-text-color);
  --subscription-plans-toggle-active-text: #ffffff;
  --subscription-plans-save-badge-bg: rgba(34, 197, 94, 0.2);
  --subscription-plans-save-badge-text: #4ade80;
  --subscription-plans-price-color: var(--primary-text-color);
  --subscription-plans-highlight-border: var(--primary-text-color);
  --subscription-plans-divider: #404040;
  --subscription-plans-credits-icon: var(--primary-text-color);
  --subscription-plans-feature-check: #4ade80;
  --subscription-plans-cta-primary-bg: #02c36f;
  --subscription-plans-cta-primary-hover: #02a25d;

  /* CompareSubscription */
  --compare-subscription-bg: linear-gradient(180deg, #0c0c0c 0%, var(--site-body-bg) 100%);
  --compare-subscription-table-bg: #2a2a2a;
  --compare-subscription-border: #404040;
  --compare-subscription-features-bg: #1f1f1f;
  --compare-subscription-row-alt-bg: rgba(255, 255, 255, 0.02);
  --compare-subscription-section-bg: #262626;
  --compare-subscription-highlight-bg: rgba(255, 200, 70, 0.08);
  --compare-subscription-highlight-accent: var(--primary-text-color);
  --compare-subscription-price-color: var(--primary-text-color);
  --compare-subscription-check-color: #4ade80;
  --compare-subscription-cross-color: #ef4444;
  --compare-subscription-cta-primary-bg: #02c36f;
  --compare-subscription-cta-primary-hover: #02a25d;

  /* Rating */
  --rating-bg: linear-gradient(180deg, #0c0c0c 0%, var(--site-body-bg) 100%);
  --rating-avatar-border: #2a2a2a;
  --rating-avatar-bg: #404040;
  --rating-star-color: #fbbf24;
  --rating-star-empty-color: #525252;
  --rating-cta-bg: #ffffff;
  --rating-cta-text: #000000;
  --rating-cta-hover-bg: #e0e0e0;
  --rating-cta-icon-bg: #000000;
  --rating-cta-icon-color: #ffffff;

  /* MarqueeCarousel */
  --marquee-carousel-bg: linear-gradient(180deg, #0c0c0c 0%, var(--site-body-bg) 100%);
  --marquee-carousel-fade-color: var(--site-body-bg);
  --marquee-carousel-card-bg: #404040;
  --marquee-carousel-cta-bg: #ffffff;
  --marquee-carousel-cta-text: #000000;
  --marquee-carousel-cta-hover-bg: #e0e0e0;
  --marquee-carousel-cta-icon-bg: #000000;
  --marquee-carousel-cta-icon-color: #ffffff;
  --marquee-carousel-duration: 35s;

  /* MasonryGallery */
  --masonry-gallery-bg: linear-gradient(180deg, #0c0c0c 0%, var(--site-body-bg) 100%);
  --masonry-gallery-item-bg: rgba(255, 255, 255, 0.05);
  --masonry-gallery-lightbox-bg: rgba(10, 10, 10, 0.95);
  --masonry-gallery-lightbox-title-color: #ffffff;
  --masonry-gallery-lightbox-title-bg: rgba(0, 0, 0, 0.7);

  /* Comparison */
  --comparison-bg: linear-gradient(180deg, #0c0c0c 0%, var(--site-body-bg) 100%);
  --comparison-col-bg: #2a2a2a;

  /* FAQ */
  --faq-bg: linear-gradient(180deg, #0c0c0c 0%, var(--site-body-bg) 100%);
  --faq-item-bg: #2a2a2a;
  --faq-item-hover-bg: #333333;

  /* Cards */
  --cards-bg: var(--site-body-bg, #1e1e1e);
  --cards-muted-bg: linear-gradient(180deg, #0c0c0c 0%, var(--site-body-bg) 100%);
  --cards-item-bg: #2a2a2a;
  --cards-item-border: rgba(255, 255, 255, 0.08);
  --cards-item-icon-bg: rgba(255, 255, 255, 0.06);

  /* Call to Action */
  --call-to-action-bg: linear-gradient(180deg, #0c0c0c 0%, var(--site-body-bg) 100%);

  /* Data Table */
  --data-table-bg: linear-gradient(180deg, #0c0c0c 0%, var(--site-body-bg) 100%);
  --data-table-header-bg: rgba(255, 255, 255, 0.06);
  --data-table-cell-border: rgba(255, 255, 255, 0.1);
  --data-table-row-hover-bg: rgba(255, 255, 255, 0.04);

  /* Hero */
  --hero-bg: linear-gradient(135deg, var(--lead-banner-gradient-start, #212020) 0%, var(--lead-banner-gradient-stop-25, #aa7802) 50%, var(--lead-banner-gradient-end, #212020) 100%);

  /* BlobImageSection */
  --blob-image-section-bg: linear-gradient(180deg, #0c0c0c 0%, var(--site-body-bg) 100%);
  --blob-image-section-card-bg: #2a2a2a;
  --blob-image-section-badge-bg: #363636;
  --blob-image-section-badge-border: #404040;
  --blob-image-section-badge-text: var(--primary-text-color);
  --blob-image-section-icon-badge-bg: #8b5cf6;
  --blob-image-section-icon-badge-color: #ffffff;
  --blob-image-section-overlay-card-bg: #363636;

  /* LeadMediaSection */
  --lead-media-section-bg: linear-gradient(180deg, #0c0c0c 0%, var(--site-body-bg) 100%);
  --lead-media-section-card-bg: #2a2a2a;
  --lead-media-section-icon-badge-bg: #3a3a3a;
  --lead-media-section-icon-badge-color: #ffffff;
  --lead-media-section-cta-bg: #ffffff;
  --lead-media-section-cta-text: #000000;
  --lead-media-section-cta-hover-bg: #e0e0e0;
  --lead-media-section-cta-icon-bg: #3b82f6;
  --lead-media-section-cta-icon-color: #ffffff;
  --lead-media-section-media-bg: #1a1a1a;
  --lead-media-section-media-border: rgba(180, 180, 180, 0.4);

  /* GridControl */
  --grid-control-bg: linear-gradient(180deg, #0c0c0c 0%, var(--site-body-bg) 100%);
  --grid-control-column-bg: linear-gradient(180deg, #0c0c0c 0%, var(--site-body-bg) 100%);

  /* FormBuilder */
  --form-builder-bg: linear-gradient(180deg, #0c0c0c 0%, var(--site-body-bg) 100%);
  --form-field-bg: rgba(255, 255, 255, 0.05);
  --form-field-border: rgba(255, 255, 255, 0.15);
  --form-field-hover-border: rgba(255, 255, 255, 0.3);
  --form-field-focus-bg: rgba(255, 255, 255, 0.08);
  --form-dropdown-bg: #2a2a2a;
  --form-builder-card-bg: #2a2a2a;

  /* VideoArticleGrid */
  --video-article-grid-bg: linear-gradient(180deg, #0c0c0c 0%, var(--site-body-bg) 100%);
  --video-article-grid-card-bg: #1a1a2e;
  --video-article-grid-card-border: rgba(255, 255, 255, 0.08);
  --video-article-grid-thumb-bg: #0d0d1a;
  --video-article-grid-thumb-overlay: rgba(0, 0, 0, 0.15);
  --video-article-grid-play-btn-bg: rgba(255, 255, 255, 0.1);
  --video-article-grid-play-btn-border: rgba(255, 255, 255, 0.18);
  --video-article-grid-play-btn-color: rgba(255, 255, 255, 0.6);
  --video-article-grid-play-btn-hover-bg: rgba(255, 255, 255, 0.2);
  --video-article-grid-play-btn-hover-color: #ffffff;
  --video-article-grid-badge-bg: rgba(255, 255, 255, 0.06);
  --video-article-grid-badge-text: #9ca3af;
  --video-article-grid-badge-border: rgba(255, 255, 255, 0.08);
  --video-article-grid-search-bg: rgba(255, 255, 255, 0.05);
  --video-article-grid-search-border: rgba(255, 255, 255, 0.1);
  --video-article-grid-search-focus-border: rgba(255, 255, 255, 0.28);
  --video-article-grid-search-focus-ring: rgba(255, 255, 255, 0.06);
  --video-article-grid-page-btn-bg: transparent;
  --video-article-grid-page-btn-text: #ffffff;
  --video-article-grid-page-btn-border: #ffffff;
  --video-article-grid-page-btn-hover-bg: #ffffff;
  --video-article-grid-page-btn-hover-text: #000000;
  --video-article-grid-dropdown-bg: rgba(255, 255, 255, 0.06);
  --video-article-grid-dropdown-border: rgba(255, 255, 255, 0.1);
  --video-article-grid-dropdown-focus-border: rgba(255, 255, 255, 0.28);
  --video-article-grid-dropdown-focus-ring: rgba(255, 255, 255, 0.06);
  --video-article-grid-dropdown-option-bg: #1e1e1e;

  /* AnalyticsChart */
  --analytics-chart-bg: linear-gradient(180deg, #0c0c0c 0%, var(--site-body-bg, #1e1e1e) 100%);
  --analytics-chart-muted-bg: var(--site-body-bg, #1e1e1e);
  --analytics-chart-panel-bg: #2a2a2a;
  --analytics-chart-panel-border: rgba(255, 255, 255, 0.08);
  --analytics-chart-panel-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  --analytics-chart-panel-shadow-hover: 0 16px 44px rgba(0, 0, 0, 0.38);
  --analytics-chart-grid-color: rgba(255, 255, 255, 0.09);
  --analytics-chart-tick-color: rgba(255, 255, 255, 0.45);
  --analytics-chart-track-color: rgba(255, 255, 255, 0.08);
  --analytics-chart-badge-bg: rgba(74, 222, 128, 0.14);
  --analytics-chart-badge-border: rgba(74, 222, 128, 0.3);
  --analytics-chart-badge-text: #4ade80;
  --analytics-chart-cat-1: #f4c15e;
  --analytics-chart-cat-2: #5b9dff;
  --analytics-chart-cat-3: #4ecdc4;
  --analytics-chart-cat-4: #f2789f;
  --analytics-chart-cat-5: #a78bfa;
  --analytics-chart-cat-6: #ff9f5a;
  --analytics-chart-cat-7: #7ddf7d;
  --analytics-chart-cat-8: #d9d24f;

  /* MetricTiles */
  --metric-tiles-bg: linear-gradient(180deg, #0a0d24 0%, var(--site-body-bg, #0e1230) 100%);
  --metric-tiles-muted-bg: #0a0d24;
  --metric-tiles-card-bg: #161c40;
  --metric-tiles-card-border: rgba(255, 209, 102, 0.18);
  --metric-tiles-face-bg: linear-gradient(115deg, #1c2350 0%, #2b3570 45%, var(--metric-tiles-face-accent, #ffd166) 100%);
  --metric-tiles-face-accent: #ffd166;
  --metric-tiles-face-text: #ffffff;

  /* CodeSnippet */
  --code-snippet-bg: linear-gradient(180deg, #0c0c0c 0%, var(--site-body-bg, #1e1e1e) 100%);
  --code-snippet-muted-bg: var(--site-body-bg, #1e1e1e);
  --code-snippet-shell-bg: #16161d;
  --code-snippet-shell-border: rgba(255, 255, 255, 0.1);
  --code-snippet-bar-bg: rgba(255, 255, 255, 0.05);
  --code-snippet-text: #e6e6ef;
  --code-snippet-tab-text: rgba(255, 255, 255, 0.6);
  --code-snippet-tab-hover-bg: rgba(255, 255, 255, 0.07);
  --code-snippet-tab-active-bg: rgba(255, 255, 255, 0.13);
  --code-snippet-tab-active-text: #ffffff;
  --code-snippet-copy-bg: rgba(255, 255, 255, 0.08);
  --code-snippet-copy-hover-bg: rgba(255, 255, 255, 0.16);
  --code-snippet-copied-color: #4ade80;
  --code-snippet-gutter-color: rgba(255, 255, 255, 0.25);
  --code-snippet-tok-key: #c792ea;
  --code-snippet-tok-str: #a5e075;
  --code-snippet-tok-num: #f78c6c;
  --code-snippet-tok-comment: #6b7789;
  --code-snippet-tok-tag: #7fd1f7;
  --code-snippet-tok-attr: #ffcb6b;

  /* StepsTimeline */
  --steps-timeline-bg: linear-gradient(180deg, #0a0d24 0%, var(--site-body-bg, #0e1230) 100%);
  --steps-timeline-muted-bg: #0a0d24;
  --steps-timeline-rail-bg: rgba(255, 255, 255, 0.12);
  --steps-timeline-rail-fill: var(--main-theme-color, #e3a002);
  --steps-timeline-marker-bg: #161c40;
  --steps-timeline-marker-border: rgba(255, 255, 255, 0.14);
  --steps-timeline-marker-active-border: var(--main-theme-color, #e3a002);
  --steps-timeline-marker-glow: rgba(255, 209, 102, 0.20);
  --steps-timeline-meta-bg: rgba(56, 189, 248, 0.14);
  --steps-timeline-meta-text: #7dd3fc;
  --steps-timeline-code-bg: rgba(255, 209, 102, 0.12);

  /* FlowDiagram */
  --flow-diagram-bg: linear-gradient(180deg, #0c0c0c 0%, var(--site-body-bg, #1e1e1e) 100%);
  --flow-diagram-muted-bg: var(--site-body-bg, #1e1e1e);
  --flow-diagram-node-bg: #2a2a2a;
  --flow-diagram-node-border: rgba(255, 255, 255, 0.1);
  --flow-diagram-node-hover-border: var(--main-theme-color, #e3a002);
  --flow-diagram-node-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
  --flow-diagram-node-shadow-hover: 0 14px 36px rgba(0, 0, 0, 0.4);
  --flow-diagram-link-color: rgba(255, 255, 255, 0.16);
  --flow-diagram-pulse-color: var(--main-theme-color, #e3a002);
  --flow-diagram-tag-bg: rgba(74, 222, 128, 0.13);
  --flow-diagram-tag-text: #4ade80;

  /* ScreenshotShowcase */
  --screenshot-showcase-bg: linear-gradient(180deg, #0c0c0c 0%, var(--site-body-bg, #1e1e1e) 100%);
  --screenshot-showcase-muted-bg: var(--site-body-bg, #1e1e1e);
  --screenshot-showcase-frame-bg: #16161d;
  --screenshot-showcase-frame-border: rgba(255, 255, 255, 0.12);
  --screenshot-showcase-frame-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  --screenshot-showcase-frame-shadow-hover: 0 30px 90px rgba(0, 0, 0, 0.55);
  --screenshot-showcase-chrome-bg: rgba(255, 255, 255, 0.06);
  --screenshot-showcase-dot-color: rgba(255, 255, 255, 0.22);
  --screenshot-showcase-url-bg: rgba(0, 0, 0, 0.3);
  --screenshot-showcase-url-text: rgba(255, 255, 255, 0.6);
  --screenshot-showcase-media-bg: #0e0e14;
  --screenshot-showcase-badge-bg: rgba(74, 222, 128, 0.13);
  --screenshot-showcase-badge-text: #4ade80;
}

.theme-light {
  /* Main theme color */
  --main-theme-color: #2b3570;

  /* Header theme variables */
  --header-background-color: #ffffff;
  --header-height: 64px;

  /* Text color variables - Light theme */
  --primary-text-color: #111634;
  --secondary-text-color: #4b5563;
  --standard-primary-site-text-color: #111827;
  --standard-secondary-site-text-color: #4b5563;
  --standard-site-font-size: 16px;
  --standard-site-font-weight: 400;
  --blockquote-border-color: #2b3570;
  --blockquote-bg: #f4f6fc;
  --blockquote-quote-color: #2b3570;

  /* Global page */
  --site-body-bg: #ffffff;
  --site-body-text: var(--standard-primary-site-text-color);
  --site-overlay-bg: rgba(17, 22, 52, 0.62);

  /* Footer */
  --footer-bg: #f4f6fc;
  --footer-curtain-height-offset: -25px;

  /* Services */
  --services-divider-color: rgba(0, 0, 0, 0.12);
  --services-bg: linear-gradient(180deg, var(--site-body-bg) 0%, #aafbff 10%, var(--main-theme-color) 50%, #aafbff 90%, var(--site-body-bg) 100%);

  /* Button theme variables - Light theme */
  --button-theme-light-bg: transparent;
  --button-theme-light-text: #2b3570;
  --button-theme-light-border: #2b3570;
  --button-theme-light-hover-bg: #2b3570;
  --button-theme-light-hover-text: #ffffff;

  /* CTA Pill Button - Light theme */
  --cta-pill-light-bg: #2b3570;
  --cta-pill-light-text: #ffffff;
  --cta-pill-light-hover-bg: #1c2350;
  --cta-pill-light-icon-bg: #ffd166;
  --cta-pill-light-icon-color: #111634;
  /* CTA Pill base variables (mapped from light theme) */
  --cta-pill-bg: var(--cta-pill-light-bg);
  --cta-pill-text: var(--cta-pill-light-text);
  --cta-pill-hover-bg: var(--cta-pill-light-hover-bg);
  --cta-pill-icon-bg: var(--cta-pill-light-icon-bg);
  --cta-pill-icon-color: var(--cta-pill-light-icon-color);

  /* TwoToneTextTeaser */
  --two-tone-text-teaser-bg: var(--site-body-bg);

  /* Lead Banner gradient variables - Light theme */
  --lead-banner-height: 620px;
  --lead-banner-height-mobile: 480px;
  --lead-banner-gradient-start: #ffffff;
  --lead-banner-gradient-stop-25: #c3caea;
  --lead-banner-gradient-stop-50: #4453a5;
  --lead-banner-gradient-stop-75: #c3caea;
  --lead-banner-gradient-end: #ffffff;
  --lead-banner-text-primary: #111634;
  --lead-banner-text-secondary: #6b7280;
  --lead-banner-secondary-text-color: #374151;
  --lead-banner-char-fade-duration: 0.3s;

  /* Article tiles (Header overlay) */
  --article-tile-overlay-bg: #42f4fd75;

  /* Header overlay */
  --header-overlay-column-divider-color: rgba(17, 22, 52, 0.16);
  --header-overlay-hover-bg: rgba(43, 53, 112, 0.08);

  /* Site banner */
  --site-banner-bg: var(--main-theme-color);
  --site-banner-text-color: var(--primary-text-color);
  --site-banner-marquee-duration: 10s;
  --site-banner-cycle-duration: 20s;
  --site-banner-font-size: 20px;

  /* Quote */
  --quote-bg: var(--site-body-bg);
  --quote-card-glow: radial-gradient(closest-side at 82% 28%, var(--main-theme-color)ad, transparent 60%), radial-gradient(closest-side at 92% 10%, var(--main-theme-color)5e, transparent 58%);

  /* LoopingCircleGallery overlay */
  --looping-circle-gallery-overlay-bg: linear-gradient(180deg, #ffffff53 0%, var(--main-theme-color) 50%, #ffffff53 100%);
  --looping-circle-gallery-overlay-text: var(--primary-text-color);

  /* CountUp */
  --count-up-bg: linear-gradient(180deg, var(--site-body-bg) 0%, var(--main-theme-color) 50%, var(--site-body-bg) 100%);
  --count-up-card-bg: #ffffff;

  /* SubscriptionPlans */
  --subscription-plans-bg: linear-gradient(180deg, var(--site-body-bg) 0%, var(--main-theme-color) 50%, var(--site-body-bg) 100%);
  --subscription-plans-card-bg: #ffffff;
  --subscription-plans-card-border: #e5e7eb;
  --subscription-plans-toggle-bg: #e5e7eb;
  --subscription-plans-toggle-active-bg: #3b82f6;
  --subscription-plans-toggle-active-text: #ffffff;
  --subscription-plans-save-badge-bg: #dcfce7;
  --subscription-plans-save-badge-text: #16a34a;
  --subscription-plans-price-color: #3b82f6;
  --subscription-plans-highlight-border: #3b82f6;
  --subscription-plans-divider: #e5e7eb;
  --subscription-plans-credits-icon: #3b82f6;
  --subscription-plans-feature-check: #22c55e;
  --subscription-plans-cta-primary-bg: #3b82f6;
  --subscription-plans-cta-primary-hover: #2563eb;

  /* CompareSubscription */
  --compare-subscription-bg: linear-gradient(180deg, var(--site-body-bg) 0%, var(--main-theme-color) 50%, var(--site-body-bg) 100%);
  --compare-subscription-table-bg: #ffffff;
  --compare-subscription-border: #e5e7eb;
  --compare-subscription-features-bg: #f9fafb;
  --compare-subscription-row-alt-bg: rgba(0, 0, 0, 0.02);
  --compare-subscription-section-bg: #f3f4f6;
  --compare-subscription-highlight-bg: rgba(59, 130, 246, 0.05);
  --compare-subscription-highlight-accent: #3b82f6;
  --compare-subscription-price-color: #3b82f6;
  --compare-subscription-check-color: #22c55e;
  --compare-subscription-cross-color: #ef4444;
  --compare-subscription-cta-primary-bg: #3b82f6;
  --compare-subscription-cta-primary-hover: #2563eb;

  /* Rating */
  --rating-bg: linear-gradient(180deg, var(--site-body-bg) 0%, var(--main-theme-color) 50%, var(--site-body-bg) 100%);
  --rating-avatar-border: #ffffff;
  --rating-avatar-bg: #e5e7eb;
  --rating-star-color: #fbbf24;
  --rating-star-empty-color: #d1d5db;
  --rating-cta-bg: #000000;
  --rating-cta-text: #ffffff;
  --rating-cta-hover-bg: #333333;
  --rating-cta-icon-bg: #ffffff;
  --rating-cta-icon-color: #000000;

  /* MarqueeCarousel */
  --marquee-carousel-bg: linear-gradient(180deg, var(--site-body-bg) 0%, var(--main-theme-color) 50%, var(--site-body-bg) 100%);
  --marquee-carousel-fade-color: #dbeeff;
  --marquee-carousel-card-bg: #e5e7eb;
  --marquee-carousel-cta-bg: #000000;
  --marquee-carousel-cta-text: #ffffff;
  --marquee-carousel-cta-hover-bg: #333333;
  --marquee-carousel-cta-icon-bg: #ffffff;
  --marquee-carousel-cta-icon-color: #000000;
  --marquee-carousel-duration: 35s;

  /* MasonryGallery */
  --masonry-gallery-bg: linear-gradient(180deg, var(--site-body-bg) 0%, var(--main-theme-color) 50%, var(--site-body-bg) 100%);
  --masonry-gallery-item-bg: rgba(0, 0, 0, 0.03);
  --masonry-gallery-lightbox-bg: rgba(10, 10, 10, 0.95);
  --masonry-gallery-lightbox-title-color: #ffffff;
  --masonry-gallery-lightbox-title-bg: rgba(0, 0, 0, 0.7);

  /* Comparison */
  --comparison-bg: linear-gradient(180deg, var(--site-body-bg) 0%, #aafbff 10%, var(--main-theme-color) 50%, #aafbff 90%, var(--site-body-bg) 100%);
  --comparison-col-bg: #ffffff;

  /* FAQ */
  --faq-bg: linear-gradient(180deg, #e8edfa 0%, #f6f8fd 45%, #ffffff 100%);
  --faq-item-bg: #f2fffd;
  --faq-item-hover-bg: #e5e7eb;

  /* Cards */
  --cards-bg: var(--site-body-bg, #ffffff);
  --cards-muted-bg: linear-gradient(180deg, var(--site-body-bg) 0%, var(--main-theme-color) 50%, var(--site-body-bg) 100%);
  --cards-item-bg: #ffffff;
  --cards-item-border: rgba(0, 0, 0, 0.08);
  --cards-item-icon-bg: rgba(0, 0, 0, 0.04);

  /* Call to Action */
  --call-to-action-bg: linear-gradient(180deg, #e8edfa 0%, #f6f8fd 45%, #ffffff 100%);

  /* Data Table */
  --data-table-bg: linear-gradient(180deg, #e8edfa 0%, #f6f8fd 45%, #ffffff 100%);
  --data-table-header-bg: rgba(0, 0, 0, 0.04);
  --data-table-cell-border: rgba(0, 0, 0, 0.1);
  --data-table-row-hover-bg: rgba(0, 0, 0, 0.03);

  /* Hero */
  --hero-bg: linear-gradient(135deg, var(--lead-banner-gradient-start, #ffffff) 0%, var(--lead-banner-gradient-stop-25, #aafbff) 50%, var(--lead-banner-gradient-end, #ffffff) 100%);

  /* BlobImageSection */
  --blob-image-section-bg: linear-gradient(180deg, var(--site-body-bg) 0%, #aafbff 10%, var(--main-theme-color) 50%, #aafbff 90%, var(--site-body-bg) 100%);
  --blob-image-section-card-bg: #f2fffd;
  --blob-image-section-badge-bg: #ffffff;
  --blob-image-section-badge-border: #e5e7eb;
  --blob-image-section-badge-text: #3b82f6;
  --blob-image-section-icon-badge-bg: #8b5cf6;
  --blob-image-section-icon-badge-color: #ffffff;
  --blob-image-section-overlay-card-bg: #ffffff;

  /* LeadMediaSection */
  --lead-media-section-bg: linear-gradient(180deg, var(--site-body-bg) 0%, var(--main-theme-color) 50%, var(--site-body-bg) 100%);
  --lead-media-section-card-bg: #f2fffd;
  --lead-media-section-icon-badge-bg: #e5e7eb;
  --lead-media-section-icon-badge-color: #374151;
  --lead-media-section-cta-bg: #000000;
  --lead-media-section-cta-text: #ffffff;
  --lead-media-section-cta-hover-bg: #333333;
  --lead-media-section-cta-icon-bg: #3b82f6;
  --lead-media-section-cta-icon-color: #ffffff;
  --lead-media-section-media-bg: #e5e7eb;
  --lead-media-section-media-border: rgba(180, 180, 180, 0.5);

  /* GridControl */
  --grid-control-bg: linear-gradient(180deg, var(--site-body-bg) 0%, var(--main-theme-color) 50%, var(--site-body-bg) 100%);
  --grid-control-column-bg: linear-gradient(180deg, var(--site-body-bg) 0%, var(--main-theme-color) 50%, var(--site-body-bg) 100%);

  /* FormBuilder */
  --form-builder-bg: linear-gradient(180deg, var(--site-body-bg) 0%, var(--main-theme-color) 50%, var(--site-body-bg) 100%);
  --form-field-bg: rgba(0, 0, 0, 0.03);
  --form-field-border: rgba(0, 0, 0, 0.15);
  --form-field-hover-border: rgba(0, 0, 0, 0.3);
  --form-field-focus-bg: rgba(0, 0, 0, 0.05);
  --form-dropdown-bg: #ffffff;
  --form-builder-card-bg: #f2fffd;

  /* VideoArticleGrid */
  --video-article-grid-bg: radial-gradient(circle, var(--main-theme-color) 0%, var(--site-body-bg) 70%);
  --video-article-grid-card-bg: #ffffff;
  --video-article-grid-card-border: #e5e7eb;
  --video-article-grid-thumb-bg: #e8f4f8;
  --video-article-grid-thumb-overlay: rgba(0, 0, 0, 0.04);
  --video-article-grid-play-btn-bg: rgba(0, 0, 0, 0.06);
  --video-article-grid-play-btn-border: rgba(0, 0, 0, 0.12);
  --video-article-grid-play-btn-color: rgba(0, 0, 0, 0.45);
  --video-article-grid-play-btn-hover-bg: rgba(0, 0, 0, 0.12);
  --video-article-grid-play-btn-hover-color: #000000;
  --video-article-grid-badge-bg: #f3f4f6;
  --video-article-grid-badge-text: #6b7280;
  --video-article-grid-badge-border: #e5e7eb;
  --video-article-grid-search-bg: rgba(0, 0, 0, 0.03);
  --video-article-grid-search-border: rgba(0, 0, 0, 0.12);
  --video-article-grid-search-focus-border: rgba(0, 0, 0, 0.3);
  --video-article-grid-search-focus-ring: rgba(0, 0, 0, 0.06);
  --video-article-grid-page-btn-bg: transparent;
  --video-article-grid-page-btn-text: #000000;
  --video-article-grid-page-btn-border: #000000;
  --video-article-grid-page-btn-hover-bg: #000000;
  --video-article-grid-page-btn-hover-text: #ffffff;
  --video-article-grid-dropdown-bg: rgba(0, 0, 0, 0.03);
  --video-article-grid-dropdown-border: rgba(0, 0, 0, 0.12);
  --video-article-grid-dropdown-focus-border: rgba(0, 0, 0, 0.3);
  --video-article-grid-dropdown-focus-ring: rgba(0, 0, 0, 0.06);
  --video-article-grid-dropdown-option-bg: #ffffff;

  /* AnalyticsChart */
  --analytics-chart-bg: linear-gradient(180deg, var(--site-body-bg, #ffffff) 0%, rgba(0, 0, 0, 0.03) 100%);
  --analytics-chart-muted-bg: var(--site-body-bg, #ffffff);
  --analytics-chart-panel-bg: #ffffff;
  --analytics-chart-panel-border: rgba(0, 0, 0, 0.08);
  --analytics-chart-panel-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
  --analytics-chart-panel-shadow-hover: 0 14px 38px rgba(0, 0, 0, 0.12);
  --analytics-chart-grid-color: rgba(0, 0, 0, 0.09);
  --analytics-chart-tick-color: rgba(0, 0, 0, 0.5);
  --analytics-chart-track-color: rgba(0, 0, 0, 0.08);
  --analytics-chart-badge-bg: rgba(5, 150, 105, 0.1);
  --analytics-chart-badge-border: rgba(5, 150, 105, 0.25);
  --analytics-chart-badge-text: #047857;
  --analytics-chart-cat-1: #b8860b;
  --analytics-chart-cat-2: #2f6bd8;
  --analytics-chart-cat-3: #12897d;
  --analytics-chart-cat-4: #c2456f;
  --analytics-chart-cat-5: #6d4bd8;
  --analytics-chart-cat-6: #cf5f18;
  --analytics-chart-cat-7: #2f8f3f;
  --analytics-chart-cat-8: #86811c;

  /* MetricTiles */
  --metric-tiles-bg: linear-gradient(180deg, var(--site-body-bg, #ffffff) 0%, #f4f6fc 100%);
  --metric-tiles-muted-bg: #f4f6fc;
  --metric-tiles-card-bg: #ffffff;
  --metric-tiles-card-border: rgba(17, 22, 52, 0.10);
  --metric-tiles-face-bg: linear-gradient(115deg, #ffffff 0%, #eef1fa 45%, var(--metric-tiles-face-accent, #2b3570) 100%);
  --metric-tiles-face-accent: #2b3570;
  --metric-tiles-face-text: #111634;

  /* CodeSnippet */
  --code-snippet-bg: linear-gradient(180deg, #f2f5fc 0%, #ffffff 100%);
  --code-snippet-muted-bg: var(--site-body-bg, #ffffff);
  --code-snippet-shell-bg: #1b1b25;
  --code-snippet-shell-border: rgba(0, 0, 0, 0.14);
  --code-snippet-bar-bg: rgba(255, 255, 255, 0.05);
  --code-snippet-text: #e6e6ef;
  --code-snippet-tab-text: rgba(255, 255, 255, 0.6);
  --code-snippet-tab-hover-bg: rgba(255, 255, 255, 0.07);
  --code-snippet-tab-active-bg: rgba(255, 255, 255, 0.13);
  --code-snippet-tab-active-text: #ffffff;
  --code-snippet-copy-bg: rgba(255, 255, 255, 0.08);
  --code-snippet-copy-hover-bg: rgba(255, 255, 255, 0.16);
  --code-snippet-copied-color: #4ade80;
  --code-snippet-gutter-color: rgba(255, 255, 255, 0.25);
  --code-snippet-tok-key: #c792ea;
  --code-snippet-tok-str: #a5e075;
  --code-snippet-tok-num: #f78c6c;
  --code-snippet-tok-comment: #6b7789;
  --code-snippet-tok-tag: #7fd1f7;
  --code-snippet-tok-attr: #ffcb6b;

  /* StepsTimeline */
  --steps-timeline-bg: linear-gradient(180deg, var(--site-body-bg, #ffffff) 0%, #f4f6fc 100%);
  --steps-timeline-muted-bg: #f4f6fc;
  --steps-timeline-rail-bg: rgba(0, 0, 0, 0.1);
  --steps-timeline-rail-fill: var(--main-theme-color, #42f4fd);
  --steps-timeline-marker-bg: #ffffff;
  --steps-timeline-marker-border: rgba(17, 22, 52, 0.12);
  --steps-timeline-marker-active-border: var(--main-theme-color, #42f4fd);
  --steps-timeline-marker-glow: rgba(43, 53, 112, 0.18);
  --steps-timeline-meta-bg: rgba(43, 53, 112, 0.10);
  --steps-timeline-meta-text: #2b3570;
  --steps-timeline-code-bg: rgba(43, 53, 112, 0.08);

  /* FlowDiagram */
  --flow-diagram-bg: linear-gradient(180deg, #f2f5fc 0%, #ffffff 100%);
  --flow-diagram-muted-bg: var(--site-body-bg, #ffffff);
  --flow-diagram-node-bg: #ffffff;
  --flow-diagram-node-border: rgba(0, 0, 0, 0.09);
  --flow-diagram-node-hover-border: var(--main-theme-color, #42f4fd);
  --flow-diagram-node-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
  --flow-diagram-node-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.12);
  --flow-diagram-link-color: rgba(0, 0, 0, 0.16);
  --flow-diagram-pulse-color: var(--main-theme-color, #42f4fd);
  --flow-diagram-tag-bg: rgba(5, 150, 105, 0.1);
  --flow-diagram-tag-text: #047857;

  /* ScreenshotShowcase */
  --screenshot-showcase-bg: linear-gradient(180deg, #f2f5fc 0%, #ffffff 100%);
  --screenshot-showcase-muted-bg: var(--site-body-bg, #ffffff);
  --screenshot-showcase-frame-bg: #ffffff;
  --screenshot-showcase-frame-border: rgba(0, 0, 0, 0.1);
  --screenshot-showcase-frame-shadow: 0 18px 50px rgba(0, 0, 0, 0.13);
  --screenshot-showcase-frame-shadow-hover: 0 26px 70px rgba(0, 0, 0, 0.18);
  --screenshot-showcase-chrome-bg: rgba(0, 0, 0, 0.04);
  --screenshot-showcase-dot-color: rgba(0, 0, 0, 0.16);
  --screenshot-showcase-url-bg: rgba(0, 0, 0, 0.05);
  --screenshot-showcase-url-text: rgba(0, 0, 0, 0.55);
  --screenshot-showcase-media-bg: #f3f4f6;
  --screenshot-showcase-badge-bg: rgba(5, 150, 105, 0.1);
  --screenshot-showcase-badge-text: #047857;
}