/* Light mode adapts the canonical site palette; dark remains the base in landing.css. */
html[data-theme="light"] {
 color-scheme: light;
 --bg: #F6F8FC;
 --surface: #FFFFFF;
 --ink: #162235;
 --muted: #5F6C80;
 --brand: #365BD6;
 --tint: #E9EEFC;
 --line: #DCE3EE;
 --footer: #EFF3FB;
 --brand-hover: #284BBB;
 --brand-tint: #E9EEFC;
 --brand-line: #9EAEE3;
 --button-ink: #FFFFFF;
 --focus: #365BD6;
 --scroll-thumb: #778499;
 --scroll-track: var(--surface);
 --scroll-hover: #5F6C80;
 --scroll-active: var(--brand);
}

/* One compact native control, shared by the home, help, installation, and legal pages. */
[data-theme-toggle] {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex: 0 0 44px;
 width: 44px;
 height: 44px;
 min-height: 44px;
 padding: 11px;
 border: 1px solid var(--line);
 border-radius: 10px;
 background: var(--surface);
 color: var(--ink);
 cursor: pointer;
 transition: background .15s, border-color .15s, color .15s;
}
/* The early script reserves the control's space; without JS it stays hidden. */
html[data-theme] [data-theme-toggle][hidden] { display: inline-flex !important; visibility: hidden; }
[data-theme-toggle]:hover:not(:disabled) { background: var(--tint); border-color: var(--brand-line); color: var(--brand); }
[data-theme-toggle]:active:not(:disabled) { background: var(--brand-tint); border-color: var(--brand); }
[data-theme-toggle]:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[data-theme-toggle]:disabled { opacity: .55; cursor: default; }
[data-theme-toggle] svg { width: 20px; height: 20px; }
.legal-actions { display: flex; align-items: center; gap: 18px; }
html[data-theme-ready] body,
html[data-theme-ready] .header,
html[data-theme-ready] .how-section,
html[data-theme-ready] .demonstration,
html[data-theme-ready] .material,
html[data-theme-ready] .footer { transition: background-color .22s, color .22s, border-color .22s; }
html[data-theme-ready] .workbench { transition: background-color .22s, color .22s, border-color .22s, transform .4s var(--motion-ease,cubic-bezier(.16,1,.3,1)); }
.theme-icon-moon { display: none; }
html[data-theme="light"] .theme-icon-sun { display: none; }
html[data-theme="light"] .theme-icon-moon { display: block; }

/* Approved logo variants occupy the original image geometry. */
.theme-logo-dark { display: block; }
.theme-logo-light { display: none; }
html[data-theme="light"] .theme-logo-dark { display: none; }
html[data-theme="light"] .theme-logo-light { display: block; }

/* Literal dark shell and home surfaces inherit the light palette deliberately. */
html[data-theme="light"] .header,
html[data-theme="light"] .dark-home .header,
html[data-theme="light"] .install-page .header { background: rgb(246 248 252 / .94); }
html[data-theme="light"] .dark-home { --hero-soft: #EFF3FB; --accent-soft: var(--brand-tint); }
html[data-theme="light"] .workbench {
 border-color: var(--line);
 background: radial-gradient(700px circle at calc(50% + var(--bench-x,0) * 20%) calc(30% + var(--bench-y,0) * 20%), rgb(54 91 214 / .045), transparent 70%), var(--surface);
 box-shadow: 0 25px 60px rgb(22 34 53 / .09);
}
html[data-theme="light"] .live-mark { box-shadow: 0 0 12px rgb(54 91 214 / .18); }
html[data-theme="light"] .thread-base { stroke: #B7C6ED; }
html[data-theme="light"] .flow-thread circle { fill: var(--brand); }
html[data-theme="light"] .how-section,
html[data-theme="light"] .dark-home .demonstration { background: var(--surface); }
html[data-theme="light"] .how-steps article { border-color: var(--line); }
html[data-theme="light"] .personal-visual { border-color: var(--line); }
html[data-theme="light"] .business-visual { background: radial-gradient(ellipse at 45% 45%, rgb(54 91 214 / .09), transparent 68%); }
html[data-theme="light"] .orbit-line { stroke: #879BCB; }
html[data-theme="light"] .orbit-inner { stroke: #A2B3DE; }
html[data-theme="light"] .idea-core {
 border-color: var(--brand-line);
 background: var(--brand-tint);
 color: var(--ink);
 box-shadow: 0 0 60px rgb(54 91 214 / .045);
}
html[data-theme="light"] .material {
 border-color: var(--line);
 background: linear-gradient(145deg, var(--surface), #F3F6FD);
 color: var(--ink);
 box-shadow: 0 10px 45px rgb(22 34 53 / .09);
}
html[data-theme="light"] .studio-final { background: radial-gradient(ellipse at 50% 100%, rgb(54 91 214 / .065), transparent 70%), var(--surface); }

/* Deep output artwork and photo captions retain their intrinsic pale accent. */
html[data-theme="light"] .route-output span::before { background: #B6C2FF; }
html[data-theme="light"] .project-preview svg,
html[data-theme="light"] .personal-visual-copy svg { color: #B6C2FF; }

/* Shared help/legal/start/download surfaces already consume canonical tokens. */
html[data-theme="light"] .button:hover { box-shadow: 0 4px 18px rgb(54 91 214 / .16); }
html[data-theme="light"] .dark-home .button:hover { box-shadow: 0 5px 26px rgb(54 91 214 / .15); }
html[data-theme="light"] .hero-media,
html[data-theme="light"] .task-paper { box-shadow: 0 18px 50px rgb(22 34 53 / .09); }
html[data-theme="light"] .poster-play { box-shadow: 0 4px 20px rgb(22 34 53 / .12); }
html[data-theme="light"] .install-page { background: radial-gradient(ellipse at 100% 0%, rgb(54 91 214 / .045), transparent 50%), var(--bg); }
html[data-theme="light"] .install-body { box-shadow: 0 10px 35px rgb(22 34 53 / .07), inset 0 1px 0 var(--surface); }

@media (max-width:700px) {
 .header .brand span { display: none; }
 html[data-theme="light"] .nav-links { box-shadow: 0 12px 25px rgb(22 34 53 / .1); }
}
@media (max-width:540px) {
 .legal-header { gap: 12px; }
 .legal-header .brand img { width: 145px; }
 .legal-header .brand span { display: none; }
 .legal-actions { gap: 10px; }
 .legal-actions .back { white-space: nowrap; }
}
@media (max-width:360px) {
 .legal-header .brand img { width: 120px; }
}
@media (prefers-reduced-motion:reduce) {
 [data-theme-toggle] { transition: none; }
 html[data-theme-ready] body,
 html[data-theme-ready] .header,
 html[data-theme-ready] .workbench,
 html[data-theme-ready] .how-section,
 html[data-theme-ready] .demonstration,
 html[data-theme-ready] .material,
 html[data-theme-ready] .footer { transition: none; }
}
@media (forced-colors:active) {
 [data-theme-toggle] { border-color: ButtonText; background: ButtonFace; color: ButtonText; }
 [data-theme-toggle]:focus-visible { outline-color: Highlight; }
}
@media print {
 html[data-theme="light"] {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --ink: #111111;
  --text: #111111;
  --dim: #222222;
  --muted: #555555;
  --tint: #F5F5F5;
  --line: #DDDDDD;
  --brand: #333333;
  --brand-hover: #111111;
  --footer: #FFFFFF;
 }
 [data-theme-toggle],
 html[data-theme] [data-theme-toggle][hidden] { display: none !important; }
 .theme-logo-dark,
 html[data-theme="light"] .theme-logo-dark { display: none; }
 .theme-logo-light,
 html[data-theme="light"] .theme-logo-light { display: block; }
}