:root {
  --bop-color-bg: #050b14;
  --bop-color-bg-alt: #091325;
  --bop-color-surface: #0d1728;
  --bop-color-surface-alt: #13233a;
  --bop-color-surface-strong: #06111f;
  --bop-color-surface-elevated: #182941;
  --bop-color-text: #eff4ff;
  --bop-color-text-soft: #9fadc7;
  --bop-color-text-muted: #6e7d99;
  --bop-color-text-inverse: #08111d;
  --bop-color-border: rgba(167, 189, 225, 0.16);
  --bop-color-border-strong: rgba(183, 204, 237, 0.28);
  --bop-color-primary: #6ea8ff;
  --bop-color-primary-strong: #97c1ff;
  --bop-color-accent-blue: #33c3ff;
  --bop-color-accent-white: #eef4ff;
  --bop-color-accent-red: #ff5d74;
  --bop-color-shadow: rgba(0, 6, 18, 0.58);
  --bop-color-glass: rgba(12, 22, 38, 0.72);
  --bop-color-glass-strong: rgba(8, 16, 28, 0.88);
  --bop-color-highlight: rgba(118, 171, 255, 0.18);
  --bop-header-offset: 6.5rem;
  --bop-scroll-offset: calc(var(--bop-header-offset) + var(--bop-space-5));

  --bop-font-sans: "Figtree", system-ui, sans-serif;
  --bop-font-display: "Figtree", system-ui, sans-serif;
  --bop-font-mono: "DM Mono", monospace;

  --bop-space-1: 0.25rem;
  --bop-space-2: 0.5rem;
  --bop-space-3: 0.75rem;
  --bop-space-4: 1rem;
  --bop-space-5: 1.5rem;
  --bop-space-6: 2rem;
  --bop-space-7: 3rem;
  --bop-space-8: 4rem;
  --bop-space-9: 6rem;

  --bop-radius-sm: 0.625rem;
  --bop-radius-md: 1rem;
  --bop-radius-lg: 1.5rem;
  --bop-radius-xl: 2rem;

  --bop-shadow-sm: 0 14px 32px -22px var(--bop-color-shadow);
  --bop-shadow-md: 0 24px 60px -34px rgba(0, 6, 18, 0.72);
  --bop-shadow-lg: 0 42px 120px -52px rgba(0, 6, 18, 0.82);

  --bop-container-sm: 42rem;
  --bop-container: 72rem;
  --bop-container-lg: 82rem;

  --bop-transition-fast: 160ms ease;
  --bop-transition-base: 240ms ease;
  --bop-breakpoint-sm: 40rem;
  --bop-breakpoint-md: 64rem;

  --bop-theme-bg: var(--bop-color-bg);
  --bop-theme-bg-alt: var(--bop-color-bg-alt);
  --bop-theme-surface: var(--bop-color-surface);
  --bop-theme-surface-alt: var(--bop-color-surface-alt);
  --bop-theme-surface-elevated: var(--bop-color-surface-elevated);
  --bop-theme-text: var(--bop-color-text);
  --bop-theme-text-soft: var(--bop-color-text-soft);
  --bop-theme-text-muted: var(--bop-color-text-muted);
  --bop-theme-border: var(--bop-color-border);
  --bop-theme-accent: var(--bop-color-primary);
  --bop-theme-accent-strong: var(--bop-color-primary-strong);
  --bop-theme-shadow: var(--bop-shadow-md);
  --bop-theme-map-bg: #08111f;

  --bop-body-background:
    radial-gradient(circle at 12% 18%, rgba(66, 132, 255, 0.16), transparent 24%),
    radial-gradient(circle at 82% 8%, rgba(51, 195, 255, 0.12), transparent 18%),
    radial-gradient(circle at 70% 78%, rgba(255, 93, 116, 0.08), transparent 22%),
    linear-gradient(180deg, #030813 0%, #08111f 28%, #0a1526 68%, #060d18 100%),
    var(--bop-theme-bg);
  --bop-front-background:
    radial-gradient(circle at 12% 14%, rgba(72, 135, 255, 0.2), transparent 30%),
    radial-gradient(circle at 86% 18%, rgba(51, 195, 255, 0.12), transparent 26%),
    radial-gradient(circle at 62% 82%, rgba(255, 93, 116, 0.08), transparent 26%),
    linear-gradient(128deg, #040915 0%, #081120 34%, #0a1830 62%, #07111d 100%);

  --bop-header-bg: rgba(8, 16, 28, 0.84);
  --bop-header-border: rgba(183, 204, 237, 0.18);
  --bop-header-text: var(--bop-theme-text);
  --bop-header-link-hover: var(--bop-color-accent-white);
  --bop-header-menu-hover: rgba(118, 171, 255, 0.12);
  --bop-header-shadow: 0 18px 46px -32px rgba(0, 6, 18, 0.8);

  --bop-hero-stage-bg: #0a1628;
  --bop-hero-overlay-before:
    linear-gradient(
      90deg,
      rgba(7, 14, 28, 0.88) 0%,
      rgba(9, 18, 35, 0.74) 34%,
      rgba(12, 23, 43, 0.38) 58%,
      rgba(13, 23, 40, 0.14) 78%,
      rgba(13, 23, 40, 0.02) 100%
    ),
    radial-gradient(circle at 78% 24%, rgba(51, 195, 255, 0.14), transparent 28%);
  --bop-hero-overlay-after:
    linear-gradient(0deg, rgba(5, 11, 20, 0.12), rgba(5, 11, 20, 0.12)),
    radial-gradient(circle at 74% 76%, rgba(255, 93, 116, 0.1), rgba(255, 93, 116, 0) 18%);
  --bop-hero-title: var(--bop-theme-text);
  --bop-hero-lede: var(--bop-theme-text-soft);

  --bop-button-primary-bg: linear-gradient(135deg, #2d6cff 0%, #39bfff 100%);
  --bop-button-primary-bg-hover: linear-gradient(135deg, #3d7cff 0%, #50caff 100%);
  --bop-button-primary-text: #f8fbff;
  --bop-button-secondary-bg: rgba(12, 22, 38, 0.72);
  --bop-button-secondary-bg-hover: rgba(18, 31, 52, 0.9);
  --bop-button-secondary-border: rgba(183, 204, 237, 0.24);
  --bop-button-secondary-text: var(--bop-theme-text);
  --bop-button-light-bg: rgba(255, 255, 255, 0.96);
  --bop-button-light-bg-hover: #f5f7fb;
  --bop-button-light-text: #08111d;
  --bop-button-ghost-border: rgba(255, 255, 255, 0.24);
  --bop-button-ghost-bg: transparent;
  --bop-button-ghost-bg-hover: rgba(255, 255, 255, 0.08);
  --bop-button-ghost-text: #ffffff;

  --bop-footer-bg: rgba(5, 11, 20, 0.92);
  --bop-footer-panel: rgba(10, 18, 32, 0.82);
  --bop-footer-border: rgba(183, 204, 237, 0.18);
  --bop-footer-text: var(--bop-theme-text);
  --bop-footer-text-soft: rgba(223, 233, 248, 0.76);
  --bop-footer-link: rgba(238, 244, 255, 0.88);
  --bop-footer-link-hover: var(--bop-color-accent-white);
  --bop-footer-toggle-border: rgba(183, 204, 237, 0.22);
  --bop-footer-toggle-bg: rgba(255, 255, 255, 0.04);
  --bop-footer-toggle-bg-hover: rgba(255, 255, 255, 0.1);
  --bop-footer-toggle-text: var(--bop-theme-text);
}

html[data-bop-theme="light"] {
  --bop-theme-bg: #f4f7fc;
  --bop-theme-bg-alt: #ebf1f9;
  --bop-theme-surface: #ffffff;
  --bop-theme-surface-alt: #f4f7fb;
  --bop-theme-surface-elevated: #ffffff;
  --bop-theme-text: #10264f;
  --bop-theme-text-soft: #39506f;
  --bop-theme-text-muted: #62718c;
  --bop-theme-border: rgba(16, 38, 79, 0.12);
  --bop-theme-accent: #16528f;
  --bop-theme-accent-strong: #0f447b;
  --bop-theme-shadow: 0 24px 60px -34px rgba(16, 38, 79, 0.18);
  --bop-theme-map-bg: #e9edf2;

  --bop-body-background:
    radial-gradient(circle at 14% 18%, rgba(54, 112, 214, 0.12), transparent 24%),
    radial-gradient(circle at 84% 10%, rgba(51, 195, 255, 0.1), transparent 18%),
    radial-gradient(circle at 70% 82%, rgba(255, 93, 116, 0.07), transparent 22%),
    linear-gradient(180deg, #f8fbff 0%, #f2f6fc 28%, #edf2fa 68%, #f7f9fd 100%),
    var(--bop-theme-bg);
  --bop-front-background:
    radial-gradient(circle at 12% 14%, rgba(63, 121, 222, 0.12), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(51, 195, 255, 0.1), transparent 24%),
    radial-gradient(circle at 62% 82%, rgba(255, 93, 116, 0.06), transparent 24%),
    linear-gradient(128deg, #f8fbff 0%, #f0f5fc 34%, #e8eef8 62%, #f5f8fd 100%);

  --bop-header-bg: rgba(248, 251, 255, 0.82);
  --bop-header-border: rgba(18, 33, 63, 0.08);
  --bop-header-text: #10264f;
  --bop-header-link-hover: #184fa5;
  --bop-header-menu-hover: rgba(22, 82, 143, 0.08);
  --bop-header-shadow: 0 18px 40px -30px rgba(16, 38, 79, 0.14);

  --bop-hero-stage-bg: #eef3fb;
  --bop-hero-overlay-before:
    linear-gradient(
      90deg,
      rgba(8, 21, 46, 0.28) 0%,
      rgba(8, 21, 46, 0.14) 30%,
      rgba(243, 247, 252, 0.08) 48%,
      rgba(243, 247, 252, 0.84) 66%,
      rgba(243, 247, 252, 0.96) 80%,
      rgba(243, 247, 252, 1) 100%
    ),
    radial-gradient(circle at 82% 24%, rgba(36, 99, 191, 0.12), transparent 28%);
  --bop-hero-overlay-after:
    linear-gradient(0deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)),
    radial-gradient(circle at 74% 76%, rgba(191, 35, 51, 0.08), rgba(191, 35, 51, 0) 18%);
  --bop-hero-title: #10264f;
  --bop-hero-lede: #2d3d5a;

  --bop-button-primary-bg: #16528f;
  --bop-button-primary-bg-hover: #0f447b;
  --bop-button-primary-text: #ffffff;
  --bop-button-secondary-bg: rgba(255, 255, 255, 0.88);
  --bop-button-secondary-bg-hover: #ffffff;
  --bop-button-secondary-border: rgba(18, 33, 63, 0.16);
  --bop-button-secondary-text: #16233c;
  --bop-button-light-bg: #ffffff;
  --bop-button-light-bg-hover: #f5f7fb;
  --bop-button-light-text: #17243d;
  --bop-button-ghost-border: rgba(16, 38, 79, 0.18);
  --bop-button-ghost-bg: transparent;
  --bop-button-ghost-bg-hover: rgba(22, 82, 143, 0.08);
  --bop-button-ghost-text: #10264f;

  --bop-footer-bg: rgba(247, 250, 255, 0.92);
  --bop-footer-panel: rgba(255, 255, 255, 0.86);
  --bop-footer-border: rgba(18, 33, 63, 0.12);
  --bop-footer-text: #10264f;
  --bop-footer-text-soft: #52627e;
  --bop-footer-link: #28456d;
  --bop-footer-link-hover: #184fa5;
  --bop-footer-toggle-border: rgba(18, 33, 63, 0.14);
  --bop-footer-toggle-bg: rgba(255, 255, 255, 0.82);
  --bop-footer-toggle-bg-hover: #ffffff;
  --bop-footer-toggle-text: #10264f;
}