/* Eons after hours: warm charcoal, soft ivory, and the signature orange. */
:root {
  color-scheme: light;
  --surface: #fcfaf6;
  --surface-raised: #eeebe6;
  --surface-soft: #e9e5df;
  --soft-ink: #706a63;
  --accent-ink: #bd3616;
  --focus-ring: #ff9b75;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #191919;
  --ink: #f5f0e8;
  --muted: #bdb8b0;
  --orange: #ff835d;
  --orange-dark: #ff9b75;
  --line: #42413e;
  --cream: #f1e7d8;
  --surface: #242423;
  --surface-raised: #30302e;
  --surface-soft: #2c2b29;
  --soft-ink: #c5c4c2;
  --accent-ink: #ff9b75;
  --focus-ring: #ff9b75;
}

/* Shared accent details tie the neutral surfaces to the orange card. */
.telegram-tile svg { color: var(--orange-dark); }
.round-sticker { background: #f0dfc6; border-color: #dfcbb0; }
.wallet-card { background: #30302e; }
.wallet-art span { background: #e8c7a8; }
.demo-loyalty-card { background: #30302e; }
.demo-stamp.filled { background: #f0dfc6; border-color: #f0dfc6; color: #30302e; }
.demo-stamp.reward { color: #f0dfc6; }
.demo-stamp.filled.reward { color: #30302e; }
.process-status-label > span:first-child { background: var(--orange); }
html { background: var(--paper); }
.theme-toggle {
  display: inline-grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  color: var(--ink);
  touch-action: manipulation;
}
.theme-toggle:hover { background: var(--surface-raised); }
.theme-icon {
  grid-area: 1 / 1;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-icon-sun { display: none; }
html[data-theme="dark"] .theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-icon-sun { display: block; }
html[data-theme="dark"] ::selection { background: #e9e7e6; color: #2b2a28; }
html[data-theme="dark"] :is(button, a, input, summary):focus-visible {
  outline-color: var(--focus-ring);
}

/* Text stays comfortably readable across all storefront pages. */
html[data-theme="dark"] :is(
  .desktop-nav a, .hero-description, .hero-footnote, .tiny-orbit,
  .benefit-strip, .benefit-strip .icon, .section-kicker, .section-heading > p,
  .project-info > p, .placeholder-info p, .next-copy p, .preview-label,
  .category-label, .coming-label, .placeholder-footer, .next-top, .next-bottom,
  .collection-note, .how-intro > p, .step p, .footer-main p, .back-top,
  .footer-bottom, .footer-links, .domain-label, .dialog-description,
  .concept-features, .launch-note p, .saved-note, .demo-disclaimer,
  .demo-reset, .demo-topline > span:last-child, .page-breadcrumbs,
  .page-eyebrow, .page-lead, .company-story-copy p, .company-principle p,
  .process-status p, .process-step-copy p, .process-future-note,
  .faq-intro > p:last-child, .faq-answer p, .home-intro p,
  .product-usecases p, .not-found p, #motion-toggle
) { color: var(--muted); }
html[data-theme="dark"] :is(
  .desktop-nav a:hover, .desktop-nav .active, .mobile-nav a.active,
  .benefit-strip .benefit-intro, .company-story-copy p:first-child,
  .page-breadcrumbs [aria-current], .next-copy h3
) { color: var(--ink); }
html[data-theme="dark"] :is(.dialog-eyebrow, .step-number) { color: var(--accent-ink); }
html[data-theme="dark"] .mobile-nav a.active { text-decoration-color: var(--orange); }
html[data-theme="dark"] .button-orange {
  background: #ff835d;
  color: #302117;
  box-shadow: none;
}
html[data-theme="dark"] .button-orange:hover { background: #ff9b75; }
html[data-theme="dark"] .button-dark:hover { background: #dfdedc; color: #272624; }
html[data-theme="dark"] .button-cream { color: #363533; }
html[data-theme="dark"] .save-dialog.is-saved { background: #dfdedc; color: #272624; }
html[data-theme="dark"] .dialog-status { color: #dfdedc; }
html[data-theme="dark"] .concept-features .icon { stroke: #d3d2d0; }
html[data-theme="dark"] :is(.project-card, .placeholder-card) {
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"] .project-card:hover { box-shadow: 0 16px 28px #15141230; }
html[data-theme="dark"] :is(.project-card-footer, .placeholder-footer, .next-bottom) { border-top-color: var(--line); }
html[data-theme="dark"] .category-label { border-color: #676664; }
html[data-theme="dark"] :is(.preview-label > span:first-child, .collection-note .live-dot) { background: #c7c5c4; }
html[data-theme="dark"] .project-badge { color: #4f4e4c; }
html[data-theme="dark"] .save-project { color: #3a3937; }
html[data-theme="dark"] .save-project:hover,
html[data-theme="dark"] .save-project[aria-pressed="true"] { background: #ff835d; color: #302117; border-color: #ff835d; }

/* Search and filters retain obvious selection and focus states. */
html[data-theme="dark"] .filter { color: var(--muted); }
html[data-theme="dark"] .filter:not(.active):hover { background: var(--surface-raised); color: var(--ink); }
html[data-theme="dark"] .filter.active { background: var(--ink); color: var(--paper); }
html[data-theme="dark"] .catalog-motion-ready > .filter.active { background: transparent; }
html[data-theme="dark"] .filter-count { background: #d8d7d5; color: #393836; }
html[data-theme="dark"] .search-field { background: var(--surface); border-color: #747371; }
html[data-theme="dark"] .search-field .icon,
html[data-theme="dark"] .search-field input::placeholder { color: var(--muted); }
html[data-theme="dark"] .search-field kbd { border-color: #6e6d6b; color: var(--muted); }
html[data-theme="dark"] .empty-symbol { color: #d1d0ce; }
html[data-theme="dark"] .soon-dot { background: #abaaa8; }

/* The transparent 3D canvas sits on a charcoal stage. Product art keeps its own colors. */
html[data-theme="dark"] .hero-art { background: #292827; }
html[data-theme="dark"] :is(.art-top, .art-bottom) { color: #e4e3e1; }
html[data-theme="dark"] .art-edition { opacity: .8; }
html[data-theme="dark"] .art-ring { border-color: #5f5e5c; }
html[data-theme="dark"] .round-sticker { color: #363533; }
html[data-theme="dark"] .round-arrow { background: #373634; color: #e7e6e4; border-color: #838280; }
html[data-theme="dark"] .round-arrow:hover { background: #e7e6e4; color: #373634; }
html[data-theme="dark"] .scene-hint { color: #dbdad8; }
html[data-theme="dark"] .scene-controls button { background: #373634; color: #e7e6e4; border-color: #838280; }
html[data-theme="dark"] .scene-controls button:hover { background: #e7e6e4; color: #373634; }
html[data-theme="dark"] .scene-controls button:disabled { background: #373634; color: #cac8c7; opacity: .7; }

/* Coming-soon artwork remains quieter than the first available project. */
html[data-theme="dark"] .telegram-art { background: #373634; }
html[data-theme="dark"] .placeholder-pill { background: #41403e; color: #dcdad9; border-color: #747271; }
html[data-theme="dark"] .telegram-tile { background: #4f4e4c; border-color: #797876; box-shadow: 7px 8px 0 #2e2d2b; }
html[data-theme="dark"] .telegram-tile svg { color: var(--orange); }
html[data-theme="dark"] .telegram-orbit { border-color: #5f5e5c; }
html[data-theme="dark"] .placeholder-plus { color: #a7a6a4; }
html[data-theme="dark"] .next-card { background: #343331; border-color: #72716f; }
html[data-theme="dark"] .big-asterisk { color: #8f8e8c; }
html[data-theme="dark"] .small-asterisk { color: #bab9b7; }
html[data-theme="dark"] .next-copy .coming-label { color: #cccbc9; }
html[data-theme="dark"] .next-bottom > span:first-child > span { color: #d1d0ce; }
html[data-theme="dark"] .home-intro-flower { color: #42413f; }

/* The demo is a tactile charcoal card on a distinct, darker surface. */
html[data-theme="dark"] .demo-pane { background: #32312f; border: 1px solid #545351; }
html[data-theme="dark"] .demo-loyalty-card { background: #343331; box-shadow: 0 20px 32px #18171540; }
html[data-theme="dark"] .demo-stamp { border-color: #aeadab; }
html[data-theme="dark"] .demo-stamp.filled { border-color: #f0dfc6; }
html[data-theme="dark"] .dialog-close { background: var(--surface-raised); border-color: var(--line); }
html[data-theme="dark"] .dialog-close:hover { background: #565553; }

/* About and process illustrations share the neutral palette without losing orange. */
html[data-theme="dark"] .company-brand-art { background: #373634; color: #dcdad9; }
html[data-theme="dark"] .company-brand-orbit { border-color: #747271; }
html[data-theme="dark"] .company-brand-flower { color: #706f6d; }
html[data-theme="dark"] .company-brand-ticket { background: #ef542e; border-color: #ff9067; box-shadow: 12px 17px 0 #25242275; }
html[data-theme="dark"] .company-manifesto-inner { background: #373634; color: #f7f2de; }
html[data-theme="dark"] .company-manifesto p > span:nth-child(2) { color: #dbd9d8; }
html[data-theme="dark"] .company-manifesto-flower { color: #7d7b7a; }
html[data-theme="dark"] .process-status { background: #373634; }
html[data-theme="dark"] .process-status-mark { color: #605f5d; }
html[data-theme="dark"] .process-status-label { color: #e1e0de; }
html[data-theme="dark"] .process-status-label > span:first-child { background: var(--orange); }
html[data-theme="dark"] .process-step-index > span:first-child { color: #acaaa9; }
html[data-theme="dark"] .process-state { background: #373634; color: #cdccca; border-color: #72706f; }
html[data-theme="dark"] .process-state-now { background: #484745; color: #e7e6e4; border-color: #807f7d; }
html[data-theme="dark"] .process-art-browse { background: #473c2e; }
html[data-theme="dark"] .process-art-card { background: #ef542e; }
html[data-theme="dark"] .process-art-card-back { background: #b4b3b1; border-color: #d6d5d3; }
html[data-theme="dark"] .process-art-stamps { background: #403f3d; }
html[data-theme="dark"] .process-art-stamps i { background: #686765; color: #e9e8e6; border-color: #999796; }
html[data-theme="dark"] .process-art-stamps i:last-child { background: transparent; color: #cdccca; }
html[data-theme="dark"] .process-art-stamps > span { color: #d9d8d6; }
html[data-theme="dark"] .process-art-grow { background: #3a3937; }
html[data-theme="dark"] .process-art-grow > span { color: #c7c6c4; }
html[data-theme="dark"] .process-art-grow i { background: #737270; border-color: #999896; }
html[data-theme="dark"] .process-art-grow i:nth-last-child(2) { background: #959492; }
html[data-theme="dark"] .process-art-grow i:last-child { background: #cac8c7; }
html[data-theme="dark"] .faq-item summary > span:last-child { color: #d3d2d0; }
html[data-theme="dark"] .not-found-code { color: #b1b0ae; }
html[data-theme="dark"] .toast { background: #e9e7e6; color: #2e2d2b; box-shadow: 0 8px 30px #16151350; }

@media (max-width: 1150px) and (min-width: 901px) {
  .header-actions { gap: 11px; }
  .desktop-nav { gap: 19px; }
  .header-cta { gap: 11px; padding-inline: 12px; }
}
@media (max-width: 700px) {
  .site-header { gap: 10px; }
  .header-actions { gap: 9px; }
  .theme-toggle { flex-basis: 36px; width: 36px; }
}
@media (max-width: 380px) {
  .header-actions { gap: 5px; }
  .language-button { gap: 4px; }
  .theme-toggle { flex-basis: 32px; width: 32px; }
}