/* Project accents preserve hue with enough luminance for small text. */
:root[data-project='axis'] {
  --accent: #ef82b3;
  --project-accent: #ef82b3;
  --project-accent-soft: #ef82b324;
  --project-accent-wash: #ef82b308;
  --accent-ink: #191919;
  --background: #080908;
  --heading: #f6f6f4;
  --text: #c8c9c0;
  --tag: #151515;
  --highlight: #ef82b324;
}
:root[data-project='zoca'] {
  --accent: #b5a0ff;
  --project-accent: #b5a0ff;
  --project-accent-soft: #b5a0ff24;
  --project-accent-wash: #b5a0ff08;
  --accent-ink: #191919;
  --background: #080908;
  --heading: #f6f6f4;
  --text: #c8c9c0;
  --tag: #151515;
  --highlight: #b5a0ff24;
}
:root[data-project='glukit'] {
  --accent: #78b7ff;
  --project-accent: #78b7ff;
  --project-accent-soft: #78b7ff24;
  --project-accent-wash: #78b7ff08;
  --accent-ink: #191919;
  --background: #080908;
  --heading: #f6f6f4;
  --text: #c8c9c0;
  --tag: #151515;
  --highlight: #78b7ff24;
}
:root[data-project='kmrl'] {
  --accent: #69cfb4;
  --project-accent: #69cfb4;
  --project-accent-soft: #69cfb424;
  --project-accent-wash: #69cfb408;
  --accent-ink: #191919;
  --background: #080908;
  --heading: #f6f6f4;
  --text: #c8c9c0;
  --tag: #151515;
  --highlight: #69cfb424;
}
:root[data-project='my-pet'] {
  --accent: #71c9dd;
  --project-accent: #71c9dd;
  --project-accent-soft: #71c9dd24;
  --project-accent-wash: #71c9dd08;
  --accent-ink: #191919;
  --background: #080908;
  --heading: #f6f6f4;
  --text: #c8c9c0;
  --tag: #151515;
  --highlight: #71c9dd24;
}

:root[data-project] body {
  background:
    radial-gradient(ellipse at 95% 0%, var(--project-accent-wash), transparent 55%), #080908;
}
:root[data-project] .case-eyebrow,
:root[data-project] .case-facts dt,
:root[data-project] .case-content p a,
:root[data-project] .case-principles li::before,
:root[data-project] .status {
  color: var(--accent);
}
:root[data-project] .case-toc a {
  color: var(--accent);
}
:root[data-project] .case-toc a[aria-current] {
  color: var(--accent);
  border-color: var(--accent);
}
:root[data-project] .case-toc:has(.case-nav-active) a[aria-current] {
  color: var(--accent-ink);
}
:root[data-project] .case-nav-active {
  background: var(--accent);
}
:root[data-project] .case-nav-hover {
  background: var(--project-accent-soft);
}
:root[data-project] .case-section-toggle,
:root[data-project] .case-demo-toggle,
:root[data-project] a.portfolio-back,
:root[data-project] a.portfolio-back:hover,
:root[data-project] a.portfolio-back:focus-visible {
  color: var(--accent);
}
:root[data-project] .case-statement {
  border-color: var(--accent);
  background: var(--project-accent-wash);
}
:root[data-project] a.portfolio-back::after,
:root[data-project] :where(button, [role='button'], .button, .btn)::after {
  background: var(--project-accent-soft);
}
:root[data-project] a:focus-visible,
:root[data-project] button:focus-visible {
  outline-color: var(--accent);
}
:root[data-project] ::selection {
  background: var(--accent);
  color: var(--accent-ink);
}
:root[data-project] .case-end .project-surface .case-eyebrow {
  color: #ffffffb3;
}
:root[data-project] .case-end .project-surface .case-project-name {
  color: #f6f6f4;
}
:root[data-project] main > a:not(.portfolio-back) {
  color: var(--accent);
}
@media (max-width: 900px) {
  :root[data-project] .case-toc {
    background:
      linear-gradient(125deg, #ffffff05, transparent 45%, var(--project-accent-wash)), #151515cc;
  }
}
/* Keep text contrast stable when menus pass over bright case-study images. */
:root[data-project] .case-toc,
:root[data-project] .case-section-toggle {
  background-color: #151515f2;
}
@media (max-width: 900px) {
  :root[data-project] .case-toc {
    background:
      linear-gradient(125deg, #ffffff05, transparent 45%, var(--project-accent-wash)), #151515f2;
  }
}