/* Premium theme extension — LUX / NOIR */
:root {
  --noir-canvas: #0a0a09;
  --noir-surface: #12120f;
  --noir-raised: #1a1915;
  --noir-hover: #242018;
  --noir-text: #ece9e1;
  --noir-muted: #aaa69c;
  --noir-line: rgba(236, 233, 225, 0.13);
  --theme-origin-x: 50vw;
  --theme-origin-y: 2rem;
}

html:not(.dark) {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

body.premium-home,
body.premium-shell,
.capabilities,
.journal,
.projects-main,
.blog-filter,
.blog-articles,
.newsletter,
.article-card,
.filter-wrapper,
.project-detail-page #main-content,
.project-detail-page .product-section,
.project-detail-page .screenshots-section,
.project-detail-page .project-cta-section {
  transition: background-color 620ms var(--ease-out), color 620ms var(--ease-out), border-color 620ms var(--ease-out);
}

::view-transition-old(root) {
  animation: none;
}

::view-transition-new(root) {
  animation: theme-reveal 720ms var(--ease-out) both;
}

@keyframes theme-reveal {
  from { clip-path: circle(0 at var(--theme-origin-x) var(--theme-origin-y)); }
  to { clip-path: circle(150vmax at var(--theme-origin-x) var(--theme-origin-y)); }
}

/* The control is a signal-state readout, not a conventional sun/moon switch. */
button.signal-theme-toggle {
  position: relative;
  width: 6.35rem;
  height: 2.9rem;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.8rem;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.34rem 0.42rem 0.34rem 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(240, 238, 231, 0.16);
  border-radius: 999px;
  color: var(--paper);
  background: rgba(240, 238, 231, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  cursor: pointer;
  transition: width 500ms var(--ease-out), border-color 450ms var(--ease-out), background-color 450ms var(--ease-out), transform 450ms var(--ease-out);
}

button.signal-theme-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(212, 174, 135, 0.2), transparent 42%);
  opacity: 0;
  transition: opacity 450ms ease;
}

button.signal-theme-toggle:hover {
  border-color: rgba(212, 174, 135, 0.54);
  background: rgba(185, 140, 99, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

button.signal-theme-toggle:hover::before {
  opacity: 1;
}

button.signal-theme-toggle:active {
  transform: scale(0.97);
}

.signal-theme-toggle__copy,
.signal-theme-toggle__dial {
  position: relative;
  z-index: 1;
}

.signal-theme-toggle__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--mono);
  line-height: 1;
}

.signal-theme-toggle__copy small {
  margin-bottom: 0.24rem;
  color: rgba(240, 238, 231, 0.48);
  font-size: 0.42rem;
  font-weight: 400;
  letter-spacing: 0.13em;
}

.signal-theme-toggle__copy strong {
  color: var(--paper);
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.signal-theme-toggle__dial {
  width: 1.72rem;
  height: 1.72rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(240, 238, 231, 0.18);
  border-radius: 50%;
  background: rgba(11, 11, 10, 0.34);
}

.signal-theme-toggle__dial::before,
.signal-theme-toggle__dial::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.signal-theme-toggle__dial::before {
  width: 0.6rem;
  height: 0.6rem;
  background: var(--bronze-light);
  box-shadow: 0 0 0 0.18rem rgba(185, 140, 99, 0.12), 0 0 1rem rgba(212, 174, 135, 0.28);
  transition: transform 650ms var(--ease-spring), background-color 450ms ease, box-shadow 450ms ease;
}

.signal-theme-toggle__dial::after {
  width: 0.62rem;
  height: 0.62rem;
  background: var(--ink);
  opacity: 0;
  transform: translate(0.22rem, -0.18rem) scale(0.6);
  transition: opacity 400ms ease, transform 650ms var(--ease-out);
}

html.dark .signal-theme-toggle__dial::before {
  background: var(--paper);
  box-shadow: 0 0 0 0.18rem rgba(240, 238, 231, 0.08), 0 0 1.1rem rgba(212, 174, 135, 0.2);
  transform: scale(0.92);
}

html.dark .signal-theme-toggle__dial::after {
  opacity: 1;
  transform: translate(0.22rem, -0.18rem) scale(1);
}

/* Keep desktop navigation as typography within the glass header, not a second bar. */
@media (min-width: 881px) {
  body.premium-shell .site-header .main-nav {
    background: transparent !important;
    box-shadow: none !important;
  }

  body.premium-shell .site-header .main-nav a:hover,
  body.premium-shell .site-header .main-nav a.active {
    background: transparent !important;
  }
}

/* Home: warm-paper chapters become a continuous, dimensional noir canvas. */
html.dark body.premium-home {
  background: var(--noir-canvas);
}

html.dark .capabilities,
html.dark .journal {
  color: var(--noir-text);
  background:
    radial-gradient(circle at 78% 12%, rgba(185, 140, 99, 0.105), transparent 27rem),
    linear-gradient(rgba(240, 238, 231, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 238, 231, 0.025) 1px, transparent 1px),
    var(--noir-canvas);
  background-size: auto, 8.333vw 8.333vw, 8.333vw 8.333vw, auto;
}

html.dark .capabilities__head > p {
  color: var(--noir-muted);
}

html.dark .capability-accordion {
  border: 1px solid var(--noir-line);
  background: #080807;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 3rem 8rem rgba(0, 0, 0, 0.28);
}

html.dark .capability-panel {
  border-right-color: var(--noir-line);
  background: #141411;
}

html.dark .capability-panel.is-active,
html.dark .capability-panel:hover,
html.dark .capability-panel:focus-visible {
  background: radial-gradient(circle at 75% 25%, rgba(185, 140, 99, 0.12), transparent 35%), #1d1a15;
}

html.dark .work-card:not(.work-card--billing):not(.work-card--mobile) {
  color: var(--noir-text);
  background: var(--noir-raised);
}

html.dark .work-card:not(.work-card--billing)::before {
  border-color: var(--noir-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html.dark .art-erp {
  background: radial-gradient(circle at center, rgba(185, 140, 99, 0.2), transparent 25%), repeating-radial-gradient(circle at center, transparent 0 42px, rgba(240, 238, 231, 0.09) 43px 44px);
}

html.dark .erp-orbit {
  border-color: rgba(240, 238, 231, 0.2);
}

html.dark .erp-orbit::before {
  background: var(--bronze-light);
}

html.dark .art-system {
  background: repeating-linear-gradient(90deg, transparent 0 calc(8.333% - 1px), rgba(240, 238, 231, 0.055) calc(8.333% - 1px) 8.333%);
}

html.dark .art-system span {
  border-color: var(--noir-line);
  background: rgba(240, 238, 231, 0.035);
}

html.dark .work-card:hover .art-system span:nth-child(even) {
  color: var(--ink);
  background: var(--bronze-light);
}

html.dark .journal-card {
  color: var(--noir-text);
  background: var(--noir-raised);
}

html.dark .journal-card::before {
  border-color: var(--noir-line);
}

html.dark .journal-card--feature {
  background: radial-gradient(circle at 78% 20%, rgba(185, 140, 99, 0.18), transparent 32%), #17130f;
}

html.dark .journal-card:hover,
html.dark .journal-card--feature:hover {
  background: var(--noir-hover);
}

html.dark .intro-loader {
  color: var(--noir-text);
  background: var(--noir-canvas);
}

html.dark .intro-loader__logo-shell,
html.dark .intro-loader__logo-core {
  border-color: var(--noir-line);
  background: var(--noir-raised);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 1.8rem 4.5rem rgba(0, 0, 0, 0.34);
}

html.dark .intro-loader__logo-shell::before,
html.dark .intro-loader__bar {
  border-color: var(--noir-line);
  background: var(--noir-line);
}

html.dark .intro-loader__logo-shell::after {
  border-color: var(--noir-canvas);
}

html.dark .intro-loader__bar span {
  background: var(--bronze-light);
}

/* Archive: preserve its imagery while moving its editorial surfaces into noir. */
html.dark body.projects-page .projects-main {
  color: var(--noir-text);
  background:
    linear-gradient(rgba(240, 238, 231, 0.027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 238, 231, 0.027) 1px, transparent 1px),
    var(--noir-canvas);
  background-size: 8.333vw 8.333vw;
}

html.dark .project-toolbar {
  border-color: var(--noir-line);
  background: rgba(24, 23, 19, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1.2rem 3rem rgba(0, 0, 0, 0.2);
}

html.dark body.projects-page .project-toolbar .project-filters {
  border-color: transparent;
  background: transparent;
}

html.dark .project-toolbar__label,
html.dark .project-toolbar__count,
html.dark body.projects-page .filter-btn {
  color: var(--noir-muted);
}

html.dark body.projects-page .filter-btn:hover {
  color: var(--noir-text);
  background: rgba(240, 238, 231, 0.07);
}

html.dark body.projects-page .filter-btn.active {
  color: var(--ink);
  background: var(--bronze-light);
}

html.dark .projects-page .project-card,
html.dark .projects-page .project-card.featured {
  color: var(--noir-text);
  background: var(--noir-raised);
}

html.dark .projects-page .project-card.is-clickable:focus-within {
  box-shadow: 0 0 0 2px var(--noir-canvas), 0 0 0 4px rgba(212, 174, 135, 0.76), 0 1.8rem 4rem rgba(0, 0, 0, 0.3);
}

html.dark .projects-page .project-content,
html.dark .projects-page .project-card.featured .project-content,
html.dark .projects-page .project-title,
html.dark .projects-page .project-card.featured .project-title,
html.dark .projects-page .project-link {
  color: var(--noir-text);
}

html.dark .projects-page .project-description,
html.dark .projects-page .project-content__eyebrow,
html.dark .projects-page .project-tech__label {
  color: var(--noir-muted);
}

html.dark .projects-page .project-content__aside {
  border-color: var(--noir-line);
}

html.dark .projects-page .tech-tag {
  border-color: var(--noir-line);
  color: #c8c4ba;
  background: rgba(240, 238, 231, 0.035);
}

html.dark .projects-page .project-link.disabled {
  border-bottom-color: var(--noir-line);
}

/* Journal: the paper archive becomes a continuous graphite editorial field. */
html.dark body.blog-page {
  color: var(--noir-text);
  background: var(--noir-canvas);
}

html.dark body.blog-page .blog-filter,
html.dark body.blog-page .blog-articles,
html.dark body.blog-page .newsletter {
  color: var(--noir-text);
  background-color: var(--noir-canvas);
}

html.dark body.blog-page .blog-filter,
html.dark body.blog-page .blog-articles {
  background-image:
    linear-gradient(rgba(240, 238, 231, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 238, 231, 0.026) 1px, transparent 1px);
  background-size: 8.333vw 8.333vw;
}

html.dark body.blog-page .filter-wrapper {
  border-color: var(--noir-line);
  background: rgba(25, 24, 20, 0.9);
  box-shadow: 0 1.2rem 3.5rem rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

html.dark body.blog-page .filter-title,
html.dark body.blog-page .journal-toolbar__count,
html.dark body.blog-page .search-results-indicator {
  color: var(--noir-muted);
}

html.dark body.blog-page .filter-search {
  border-color: var(--noir-line);
  color: var(--noir-text);
  background: rgba(240, 238, 231, 0.045);
}

html.dark body.blog-page .search-input {
  color: var(--noir-text);
  background: transparent !important;
  border-color: transparent;
}

html.dark body.blog-page .search-input::placeholder,
html.dark body.blog-page .search-icon {
  color: #8f8b82;
}

html.dark body.blog-page .filter-tag {
  color: var(--noir-muted);
  background: transparent;
}

html.dark body.blog-page .filter-tag:hover {
  color: var(--noir-text);
  background: rgba(240, 238, 231, 0.065);
}

html.dark body.blog-page .filter-tag.active {
  color: var(--ink);
  background: var(--bronze-light);
}

html.dark body.blog-page .clear-search-btn {
  border-color: var(--noir-line);
  color: var(--noir-text);
}

html.dark body.blog-page .journal-index__head .micro-label,
html.dark body.blog-page .journal-index__head > p {
  color: var(--noir-muted);
}

html.dark body.blog-page .journal-index__head h2 {
  color: var(--noir-text);
}

html.dark body.blog-page .journal-index__head h2 em {
  color: var(--bronze-light);
}

html.dark body.blog-page .article-card,
html.dark body.blog-page .article-card.featured {
  color: var(--noir-text) !important;
  background:
    radial-gradient(circle at 82% 4%, rgba(185, 140, 99, 0.09), transparent 30%),
    var(--noir-raised) !important;
  box-shadow: inset 0 0 0 1px var(--noir-line);
}

@media (hover: hover) and (pointer: fine) {
  html.dark body.blog-page .article-card:hover,
  html.dark body.blog-page .article-card.featured:hover {
    background:
      radial-gradient(circle at 82% 4%, rgba(185, 140, 99, 0.14), transparent 34%),
      var(--noir-hover) !important;
    box-shadow: inset 0 0 0 1px rgba(212, 174, 135, 0.2), 0 1.8rem 4rem rgba(0, 0, 0, 0.22);
  }
}

html.dark body.blog-page .article-content,
html.dark body.blog-page .article-card.featured .article-content {
  color: var(--noir-text) !important;
  background: transparent !important;
}

html.dark body.blog-page .article-title,
html.dark body.blog-page .article-card.featured .article-title,
html.dark body.blog-page .article-card:hover .article-title,
html.dark body.blog-page .article-link,
html.dark body.blog-page .article-link:hover {
  color: var(--noir-text) !important;
}

html.dark body.blog-page .article-meta,
html.dark body.blog-page .article-excerpt {
  color: var(--noir-muted) !important;
}

html.dark body.blog-page .article-card .tag {
  border-color: var(--noir-line);
  color: #c8c4ba;
  background: rgba(240, 238, 231, 0.035);
}

html.dark body.blog-page .article-skeleton {
  background:
    linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.055) 38%, transparent 56%) 0 0 / 240% 100%,
    var(--noir-raised);
}

html.dark body.blog-page .no-articles {
  border-color: var(--noir-line);
  color: var(--noir-muted);
  background: var(--noir-raised);
}

html.dark body.blog-page .load-more-btn {
  border-color: var(--noir-line);
  color: var(--noir-text);
}

html.dark body.blog-page .load-more-btn:hover {
  border-color: var(--bronze-light);
  color: var(--ink);
  background: var(--bronze-light);
}

html.dark body.blog-page .newsletter-content {
  border: 1px solid var(--noir-line);
  background:
    radial-gradient(circle at 78% 25%, rgba(185, 140, 99, 0.4), transparent 19%),
    repeating-radial-gradient(circle at 78% 25%, transparent 0 3.4rem, rgba(240, 238, 231, 0.065) 3.45rem 3.5rem),
    var(--noir-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 2.5rem 7rem rgba(0, 0, 0, 0.28);
}

/* Case studies: all content chapters use the same dark material system. */
html.dark body.project-detail-page,
html.dark .project-detail-page #main-content {
  color: var(--noir-text);
  background: var(--noir-canvas);
}

html.dark body.premium-shell.product-page.project-detail-page .product-section,
html.dark body.premium-shell.product-page.project-detail-page .project-cta-section {
  color: var(--noir-text) !important;
  background: var(--noir-canvas) !important;
}

html.dark body.premium-shell.product-page.project-detail-page .product-section .section-title,
html.dark body.premium-shell.product-page.project-detail-page .product-section h2,
html.dark body.premium-shell.product-page.project-detail-page .product-section h3,
html.dark body.premium-shell.product-page.project-detail-page .feature-card h3,
html.dark .project-detail-page .section-title,
html.dark .project-detail-page .benefits-section h3 {
  color: var(--noir-text) !important;
}

html.dark .project-detail-page .section-kicker,
html.dark body.premium-shell.product-page.project-detail-page .product-section .section-subtitle,
html.dark body.premium-shell.product-page.project-detail-page .feature-card p {
  color: var(--noir-muted) !important;
}

html.dark body.premium-shell.product-page.project-detail-page .feature-card,
html.dark .project-detail-page .feature-card {
  color: var(--noir-text);
  background: radial-gradient(circle at 83% 17%, rgba(185, 140, 99, 0.12), transparent 24%), var(--noir-raised);
}

html.dark .project-detail-page .feature-card:hover {
  background-color: var(--noir-hover);
}

html.dark .project-detail-page .feature-card::after {
  color: var(--noir-muted);
}

html.dark .project-detail-page .feature-icon {
  border-color: var(--noir-line);
  color: var(--bronze-light);
  background: rgba(240, 238, 231, 0.045);
}

html.dark .project-detail-page .benefits-section {
  border-top-color: var(--noir-line);
}

html.dark body.premium-shell.product-page.project-detail-page .benefit-item,
html.dark body.premium-shell.product-page.project-detail-page .benefit-item span {
  border-color: var(--noir-line);
  color: #c8c4ba !important;
  background: rgba(240, 238, 231, 0.035) !important;
}

html.dark body.premium-shell.product-page.project-detail-page .benefit-item:hover {
  border-color: rgba(212, 174, 135, 0.28);
  background: rgba(185, 140, 99, 0.085) !important;
}

html.dark .project-detail-page .benefit-icon {
  color: var(--ink);
  background: var(--bronze-light);
}

html.dark body.premium-shell.product-page.project-detail-page .screenshots-section {
  color: var(--noir-text);
  background:
    linear-gradient(rgba(240, 238, 231, 0.027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 238, 231, 0.027) 1px, transparent 1px),
    #0e0e0c;
  background-size: 8.333vw 8.333vw;
}

html.dark .project-detail-page .screenshots-section .section-title {
  color: var(--noir-text);
}

html.dark .project-detail-page .screenshots-section .section-subtitle {
  color: var(--noir-muted);
}

html.dark .project-detail-page .screenshot-item {
  border-radius: clamp(1.8rem, 2.6vw, 2.8rem);
  background: transparent;
}

html.dark .project-detail-page .screenshot-card {
  color: var(--noir-text);
  background: rgba(26, 25, 21, 0.92);
  box-shadow: inset 0 0 0 1px rgba(236, 233, 225, 0.09);
}

html.dark .project-detail-page .screenshot-card:hover,
html.dark .project-detail-page .screenshot-card.is-pointer-active {
  border-color: var(--noir-line);
  background: rgba(31, 29, 24, 0.74);
  box-shadow: inset 0 0 0 1px rgba(212, 174, 135, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html.dark .project-detail-page .screenshot-item:hover,
html.dark .project-detail-page .screenshot-item:focus-within,
html.dark .project-detail-page .screenshot-item.is-active {
  filter: drop-shadow(0 1.8rem 2.6rem rgba(0, 0, 0, 0.4));
}

html.dark .project-detail-page .screenshot-info {
  border-top: 1px solid rgba(236, 233, 225, 0.09);
  background:
    linear-gradient(135deg, rgba(240, 238, 231, 0.055), transparent 42%),
    rgba(18, 18, 15, 0.94);
  -webkit-backdrop-filter: blur(18px) saturate(112%);
  backdrop-filter: blur(18px) saturate(112%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

html.dark .project-detail-page .screenshot-card:hover .screenshot-info,
html.dark .project-detail-page .screenshot-card.is-pointer-active .screenshot-info {
  background:
    radial-gradient(circle at 82% 0%, rgba(185, 140, 99, 0.17), transparent 45%),
    rgba(24, 22, 18, 0.92);
  -webkit-backdrop-filter: blur(24px) saturate(118%);
  backdrop-filter: blur(24px) saturate(118%);
}

html.dark .project-detail-page .screenshot-info h3 {
  color: var(--noir-text);
}

html.dark .project-detail-page .screenshot-info p {
  color: var(--noir-muted);
}

html.dark .project-detail-page .feature-tag {
  border-color: var(--noir-line);
  color: #c8c4ba;
  background: rgba(240, 238, 231, 0.04);
}

html.dark body.premium-shell.product-page.project-detail-page .pricing-features-modern,
html.dark body.premium-shell.product-page.project-detail-page .included-feature,
html.dark body.premium-shell.product-page.project-detail-page .included-feature:hover {
  background: transparent !important;
  box-shadow: none;
}

html.dark body.premium-shell.product-page.project-detail-page .project-cta-section .cta-panel {
  box-shadow: inset 0 0 0 1px rgba(240, 238, 231, 0.1), 0 2rem 5rem rgba(0, 0, 0, 0.34);
}

html.dark body.premium-shell .page-loader {
  color: var(--noir-text);
  background: var(--noir-canvas);
}

html.dark body.premium-shell .page-loader .logo-circle {
  border-color: var(--noir-line);
  background: var(--noir-raised);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 1rem 3rem rgba(0, 0, 0, 0.3);
}

@media (max-width: 760px) {
  button.signal-theme-toggle {
    width: 2.9rem;
    grid-template-columns: 1fr;
    padding: 0.3rem;
  }

  .signal-theme-toggle__copy {
    display: none;
  }

  .signal-theme-toggle__dial {
    justify-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }

  button.signal-theme-toggle,
  .signal-theme-toggle__dial::before,
  .signal-theme-toggle__dial::after,
  body.premium-home,
  body.premium-shell,
  .capabilities,
  .journal,
  .projects-main,
  .blog-filter,
  .blog-articles,
  .newsletter,
  .article-card,
  .filter-wrapper,
  .project-detail-page #main-content,
  .project-detail-page .product-section,
  .project-detail-page .screenshots-section,
  .project-detail-page .project-cta-section {
    transition: none;
  }
}