/* Marketing night study. Semantic colors follow packages/design/tokens.json. */
html.luvi-night,
html.luvi-night body.playground {
  color-scheme: dark;
  --brand: #F8BD52;
  --brand-subtle: #3A3021;
  --on-brand: #202124;
  --text-primary: #FAF7F1;
  --text-secondary: #BDB6AC;
  --background: #1C1B19;
  --surface: #282623;
  --separator: #423D36;
  --focus-ring: #F2C578;
  --luvi-light: #F8BD52;
}
html.luvi-night body,
html.luvi-night body.playground { background: var(--background); color: var(--text-primary); }
html.luvi-night h1,
html.luvi-night h2,
html.luvi-night h3,
html.luvi-night label,
html.luvi-night .setup-toolbar .wordmark.compact,
html.luvi-night .site-footer .wordmark { color: var(--text-primary); }
html.luvi-night .eyebrow,
html.luvi-night .play-main > .eyebrow,
html.luvi-night .work-label { color: var(--focus-ring); }
html.luvi-night .hero-description,
html.luvi-night .section-heading > p,
html.luvi-night .faq-list p,
html.luvi-night .companion p:not(.eyebrow),
html.luvi-night .play-lead,
html.luvi-night .work-panel p,
html.luvi-night .work-bottom > span,
html.luvi-night .play-note,
html.luvi-night .play-header,
html.luvi-night .site-footer,
html.luvi-night .platform-note,
html.luvi-night .social-line,
html.luvi-night .lumi-note div > span,
html.luvi-night .sidebar-item,
html.luvi-night .sidebar-task > span,
html.luvi-night .sidebar-task p,
html.luvi-night .sidebar-sites > div,
html.luvi-night .demo-caption,
html.luvi-night .demo-top,
html.luvi-night .demo-content > p:not(.eyebrow),
html.luvi-night .demo-content p.demo-footnote,
html.luvi-night .request-meta,
html.luvi-night .demo-progress,
html.luvi-night .setup-toolbar,
html.luvi-night .setup-hint,
html.luvi-night .site-option small,
html.luvi-night .preview-times label,
html.luvi-night .schedule-explanation p,
html.luvi-night .setup-summary div > span,
html.luvi-night .setup-note,
html.luvi-night .setup-number { color: var(--text-secondary); }
html.luvi-night .button.secondary,
html.luvi-night .button.small,
html.luvi-night .social-tile,
html.luvi-night .demo-shell,
html.luvi-night .setup-shell,
html.luvi-night .site-option,
html.luvi-night .preview-days span,
html.luvi-night .work-scene { background: var(--surface); border-color: var(--separator); }
html.luvi-night .button:focus-visible,
html.luvi-night a:focus-visible,
html.luvi-night summary:focus-visible { outline-color: var(--focus-ring); }
html.luvi-night .demo-shell,
html.luvi-night .setup-shell,
html.luvi-night .work-scene { box-shadow: 0 16px 60px #00000020; }
html.luvi-night .demo-sidebar,
html.luvi-night .companion-section,
html.luvi-night .work-bar { background: var(--background); border-color: var(--separator); }
html.luvi-night .lumi-note,
html.luvi-night .sidebar-item.active,
html.luvi-night .work-message { background: var(--surface); border-color: var(--separator); color: var(--text-primary); }
html.luvi-night .lumi-note { box-shadow: 0 12px 30px #00000024; }
html.luvi-night .orbit { border-color: #423d3670; }
html.luvi-night .note-dot { box-shadow: 0 0 12px #f8bd5260; }
html.luvi-night .demo-top,
html.luvi-night .sidebar-sites,
html.luvi-night .faq-list details,
html.luvi-night .site-footer,
html.luvi-night .setup-toolbar,
html.luvi-night .setup-summary,
html.luvi-night .work-bottom { border-color: var(--separator); }
html.luvi-night .demo-top > span:last-child,
html.luvi-night .site-option:has(:checked),
html.luvi-night .preview-days input:checked + span {
  background: var(--brand-subtle); border-color: #665237; color: var(--text-primary);
}
html.luvi-night .site-option input { accent-color: var(--brand); }
html.luvi-night .site-option:focus-within,
html.luvi-night .preview-days input:focus-visible + span {
  border-color: var(--focus-ring); box-shadow: inset 0 0 0 1px var(--focus-ring);
}
html.luvi-night .preview-days span,
html.luvi-night .schedule-explanation,
html.luvi-night .setup-summary-mark,
html.luvi-night .demo-progress span.current,
html.luvi-night .companion p.lumi-quote,
html.luvi-night .luvi-preview-link { color: var(--focus-ring); }
html.luvi-night .preview-times input {
  color-scheme: dark; background: var(--surface) !important;
  color: var(--text-primary) !important; border-color: var(--separator);
}
html.luvi-night .preview-times input:focus { border-color: var(--focus-ring) !important; box-shadow: inset 0 0 0 1px var(--focus-ring) !important; }
html.luvi-night #demo-reason,
html.luvi-night .work-input { background: var(--background); color: var(--text-secondary); border-color: var(--separator); }
html.luvi-night .setup-summary { background: var(--background); }
html.luvi-night .setup-summary p,
html.luvi-night .work-bar,
html.luvi-night .work-input span,
html.luvi-night .editor-lines code { color: var(--text-secondary); }
html.luvi-night .work-bar i { background: var(--separator); }
html.luvi-night .social-tile img[src$="/x.svg"],
html.luvi-night .site-option img[src$="/x.svg"],
html.luvi-night .sidebar-sites img[src$="/x.svg"],
html.luvi-night .social-tile img[src$="/tiktok.svg"],
html.luvi-night .site-option img[src$="/tiktok.svg"],
html.luvi-night .sidebar-sites img[src$="/tiktok.svg"] { filter: brightness(0) invert(1); }
/* Light originates at the tail, rotating with her body instead of the cursor. */
html.luvi-night .luvi-companion .luvi-tail-light {
  opacity: 1; filter: blur(3px);
  box-shadow: 0 0 12px 3px #ffd779b0, 0 0 34px 12px #f8bd5240;
}
html.luvi-night .luvi-companion .luvi-tail-light::before {
  content: ''; position: absolute; width: 360px; height: 360px;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #ffd77c45 0, #ffc66324 18%, #efb84b10 40%, transparent 70%);
}
html.luvi-night .luvi-companion-toggle { background: var(--surface); color: var(--text-secondary); border-color: var(--separator); }
html.luvi-night .hero-scene::before,
html.luvi-night .companion-portrait::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 38% 70%, #f8bd5218, transparent 60%);
}
@media (hover:hover) and (pointer:fine) {
html.luvi-night .site-option:hover { border-color: #82653b; background: var(--brand-subtle); }
html.luvi-night .text-link:hover { color: var(--focus-ring); }
}
@media (forced-colors:active) {
html.luvi-night .hero-scene::before,
html.luvi-night .companion-portrait::before { display: none; }
}