/* Shared post-bundle palette for the approved Home-preview shell.  It leaves
   gold controls and the transparent logo/media untouched; only the existing
   cyan, purple, and purple-glow accents resolve through these exact tokens. */
:root {
  --samia-theme-cyan: #80eaff;
  --samia-theme-purple: #f891ff;
  --samia-theme-purple-glow: #b341dd;
}

/* Keep CSS-originated theme accents consistent without touching approved
   video/poster assets or intentional gold and night treatments. */

:focus-visible {
  outline-color: var(--samia-theme-cyan);
}

.brand {
  filter: drop-shadow(0 0 14px var(--samia-theme-purple-glow));
}

.icon-button {
  color: var(--samia-theme-purple);
}

.icon-button svg {
  filter: drop-shadow(0 0 5px var(--samia-theme-purple-glow));
}

.header-tools .language,
.sidebar-bottom .language,
html[lang] .preview-account-panel [data-account-icon="language"],
html[lang] .preview-account-panel [data-account-icon="language"] > span {
  color: var(--samia-theme-cyan);
}

.avatar {
  background: radial-gradient(
    circle at 45% 35%,
    var(--samia-theme-purple),
    var(--samia-theme-purple-glow) 65%,
    #10071e
  );
  box-shadow:
    0 0 0 3px var(--samia-theme-purple-glow),
    0 0 0 5px #f4b268,
    0 0 16px var(--samia-theme-purple-glow);
}

.notification-dot {
  background: var(--samia-theme-purple);
  box-shadow: 0 0 7px var(--samia-theme-purple-glow);
}

@media (max-width: 768px) {
  #navigation {
    box-shadow:
      inset 0 0 0 1px rgb(248 145 255 / 18%),
      0 8px 28px rgb(9 3 20 / 30%);
  }
}

.preview-account-panel {
  border-color: rgb(248 145 255 / 28%);
  box-shadow: 0 8px 28px rgb(179 65 221 / 28%);
}

.preview-account-panel [data-account-icon] > svg {
  color: var(--samia-theme-purple);
  filter: drop-shadow(0 0 3px var(--samia-theme-purple-glow));
}

.nav-item svg {
  color: var(--samia-theme-purple);
  filter: drop-shadow(0 0 3px var(--samia-theme-purple-glow));
}

.nav-item.active {
  color: var(--samia-theme-purple);
}

h1 em,
.page-art-headline em,
.reference-foreground .page-art-headline em,
.mobile-reference-copy.page-art-headline em {
  color: var(--samia-theme-purple);
}

.benefits svg {
  color: var(--samia-theme-purple);
  filter: drop-shadow(0 0 5px var(--samia-theme-purple-glow));
}

.reference-foreground .ink-lotus,
.reference-foreground .ink-eye,
.reference-foreground .ink-stars {
  filter: drop-shadow(0 0 5px var(--samia-theme-purple-glow));
}

.heart,
html[lang] .social-count .heart,
.signature,
.section-heading h2,
.all-services,
.service-card > .round-arrow {
  color: var(--samia-theme-purple);
}

.heart,
html[lang] .social-count .heart,
.signature {
  text-shadow: 0 0 8px var(--samia-theme-purple-glow);
}

.service-card {
  box-shadow:
    0 0 0 2px rgb(248 145 255 / 34%),
    inset 0 0 10px rgb(179 65 221 / 28%),
    0 0 9px rgb(179 65 221 / 40%);
}

.service-card > .round-arrow {
  color: var(--samia-theme-purple);
}

.preview-site-footer {
  border-top-color: rgb(248 145 255 / 27%);
}

.preview-site-footer h2,
.preview-site-footer h3 {
  color: var(--samia-theme-purple);
}

.preview-footer-credit {
  border-top-color: rgb(248 145 255 / 20%);
}

@keyframes gem-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 3px rgb(179 65 221 / 32%));
  }

  50% {
    filter: drop-shadow(0 0 10px var(--samia-theme-purple-glow));
  }
}

@keyframes orb-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 2px rgb(179 65 221 / 42%));
  }

  50% {
    filter: drop-shadow(0 0 9px var(--samia-theme-purple-glow));
  }
}

@media (hover: hover) {
  .nav-item:hover svg,
  .icon-button:hover,
  .avatar:hover,
  .language:hover,
  .all-services:hover,
  .bottom-nav > a:hover,
  .bottom-nav > button:hover {
    color: var(--samia-theme-cyan);
    filter: drop-shadow(0 0 8px var(--samia-theme-purple-glow));
  }
}

@media (max-width: 768px) {
  .header-tools .avatar {
    box-shadow:
      0 0 0 2px var(--samia-theme-purple-glow),
      0 0 9px var(--samia-theme-purple-glow);
  }

  .service-card {
    border-color: var(--samia-theme-purple);
    box-shadow:
      inset 0 0 7px rgb(179 65 221 / 36%),
      0 0 8px rgb(179 65 221 / 26%);
  }

  .bottom-nav > a,
  .bottom-nav > button,
  .bottom-nav .bottom-home {
    color: var(--samia-theme-purple);
  }

  .home-orb {
    border-color: var(--samia-theme-purple);
    background: radial-gradient(
      circle at 50% 65%,
      var(--samia-theme-purple),
      var(--samia-theme-purple-glow) 55%,
      #42094c
    );
    box-shadow:
      0 0 0 3px #3c1446,
      0 0 0 5px var(--samia-theme-purple-glow),
      0 0 17px var(--samia-theme-purple-glow);
  }
}