:root,
html[data-theme="dark"]{
  color-scheme: dark;

  /* SpectraPortal.com portfolio palette */
  --sp-bg: #070A09;
  --sp-surface: #0D1211;
  --sp-surface-2: #121917;
  --sp-surface-raised: #121917;

  --sp-text: #EEF4F1;
  --sp-muted: #B8C3C8;
  --sp-border: #33403C;

  /* Green leads; blue supports links and secondary emphasis. */
  --sp-accent: #45D483;
  --sp-accent-1: #45D483;
  --sp-accent-2: #45D483;
  --sp-accent-3: #4C9FFF;

  --sp-link: #73B8FF;
  --sp-link-hover: #9ACBFF;
  --sp-link-active: #45D483;
  --sp-link-visited: #A7B8C8;

  --sp-focus: #45D483;
  --sp-selection: color-mix(in srgb, #45D483 32%, transparent);
}

::selection{
  background: var(--sp-selection);
  color: var(--sp-text);
}

/* Solid graphite header: distinct from the page without becoming a visual band. */
.sp-header{
  --sp-border: #2C3834;
  background: #0D1211;
  border-bottom: 1px solid #2C3834;
}

.sp-footer{
  --sp-border: #2C3834;
}

.sp-brand__text,
.sp-card h1,
.sp-card h2,
.sp-card h3{
  color: var(--sp-text);
}

/* Header labels stay silver; blue icons carry navigation identity. */
.sp-nav__link{
  color: var(--sp-muted);
}

.sp-nav__link:hover,
.sp-nav__link:focus-visible,
.demo-footer__link:hover,
.demo-footer__link:focus-visible{
  color: var(--sp-accent-1);
}

.sp-btn:not(.sp-btn--secondary){
  border-color: color-mix(in srgb, var(--sp-accent-1) 62%, var(--sp-border));
  background: color-mix(in srgb, var(--sp-accent-1) 18%, var(--sp-surface));
  color: var(--sp-text);
}

.sp-btn:not(.sp-btn--secondary):hover,
.sp-btn:not(.sp-btn--secondary):focus-visible{
  border-color: color-mix(in srgb, var(--sp-accent-1) 82%, white 4%);
  background: color-mix(in srgb, var(--sp-accent-1) 26%, var(--sp-surface));
}

.sp-btn--secondary{
  border-color: color-mix(in srgb, var(--sp-accent-3) 34%, var(--sp-border));
}

.sp-btn--secondary:hover,
.sp-btn--secondary:focus-visible{
  border-color: color-mix(in srgb, var(--sp-accent-3) 58%, var(--sp-border));
}