/* Light-only finish. Loaded after theme layers, before the final input and workspace geometry layers.
   Original artwork, page geometry and independent reading modes are retained. */
html[data-theme="light"]:root {
  --mode-bg: #faf6ee;
  --mode-text: #352a3e;
  --mode-muted: #5e5067;
  --mode-accent: #734579;
  --mode-panel: rgba(255, 252, 245, .42);
  --mode-panel2: rgba(255, 248, 237, .22);
  --mode-field: rgba(255, 253, 248, .69);
  --mode-soft: rgba(126, 83, 143, .13);
  --mode-border: rgba(99, 75, 116, .16);
  --glass-edge: rgba(255, 253, 245, .34);
  --glass-shadow: 0 12px 36px rgba(71, 48, 77, .045);
  --glass-chrome: rgba(255, 250, 241, .62);
  --glass-check: rgba(121, 90, 145, .12);
  --glass-selected: rgba(112, 70, 127, .44);
  --glass-popover: rgba(255, 252, 246, .96);
  --light-veil-top: rgba(255, 250, 239, .94);
  --light-veil-bottom: rgba(250, 244, 251, .90);
  --light-champagne: rgba(247, 222, 178, .24);
  --light-field-edge: rgba(103, 80, 118, .31);
  --light-primary-start: #785080;
  --light-primary-end: #64386e;
  --light-primary-ink: #fffaf3;
}

/* A continuous warm veil lets the original castles and constellations show
   through without letting dark image pixels muddy the text-bearing surfaces. */
html[data-theme="light"]:root body::before {
  background:
    radial-gradient(ellipse at 15% 0%, var(--light-champagne), transparent 64%),
    linear-gradient(180deg, var(--light-veil-top), var(--light-veil-bottom)),
    url('assets/original/cosmic.webp') center/cover no-repeat;
}
html[data-theme="light"]:root .hero-universe {
  background-image:
    linear-gradient(90deg, var(--mode-bg), rgba(250, 246, 238, .78) 55%, rgba(250, 246, 238, .64)),
    linear-gradient(0deg, var(--mode-bg), rgba(250, 246, 238, .40) 30%, rgba(250, 246, 238, .38) 65%, var(--mode-bg)),
    url('assets/original/cosmic.webp');
  opacity: .36;
  filter: none;
  mask-image: radial-gradient(ellipse at 55% 48%, #000 20%, transparent 73%);
  -webkit-mask-image: radial-gradient(ellipse at 55% 48%, #000 20%, transparent 73%);
}
html[data-theme="light"]:root .luxury-hero::after {
  background: radial-gradient(ellipse, rgba(218, 188, 224, .32), rgba(244, 220, 180, .15) 42%, transparent 72%);
}
html[data-theme="light"]:root #hero-title { color: var(--mode-text); text-shadow: none; }
html[data-theme="light"]:root #hero-title em {
  background-image: linear-gradient(110deg, #805286, #734579 52%, #5f426f);
}
html[data-theme="light"]:root :is(.hero-kicker>span,.orbit-spark) { box-shadow: none; }
html[data-theme="light"]:root .celestial-arc { border-color: rgba(127, 89, 141, .18); }
html[data-theme="light"]:root .arc-b { border-color: rgba(138, 112, 71, .15); }

/* The panels keep their feathered edges; only small controls need a defined
   contour. No opaque white slab is placed behind headings or book metadata. */
html[data-theme="light"]:root :is(.workspace-panel,.notebook,.output-preview,.paid-panel,.paid-scene-editor,.paid-summary,.timeline,.empty-drafts,.template-stage-panel,.cs-canvas-panel,.cs-profile-preview,.cs-asset-card,.cs-empty-saved,.cs-project-list>button,.film-project-grid>button) {
  background: linear-gradient(135deg, transparent, rgba(255, 253, 247, .17) 45%, transparent), radial-gradient(ellipse at 50% 38%, var(--mode-panel), transparent 88%);
  border-color: rgba(107, 80, 120, .09);
  box-shadow: var(--glass-shadow);
}
html[data-theme="light"]:root :is(.account-panel,.account-product,.account-developer),
html[data-theme="light"]:root .social-publish .workspace-panel {
  background: radial-gradient(ellipse at 50% 35%, var(--mode-panel), transparent 100%);
  border-color: rgba(107, 80, 120, .09);
}
html[data-theme="light"]:root :is(.topbar,.sidebar,.mobile-nav) {
  background: linear-gradient(120deg, rgba(255, 251, 243, .12), transparent 70%), var(--glass-chrome);
  border-color: rgba(103, 78, 112, .12);
  box-shadow: 0 5px 24px rgba(71, 48, 77, .035);
}
html[data-theme="light"]:root .site-menu {
  background: linear-gradient(150deg, rgba(247, 233, 211, .23), transparent 55%), var(--glass-popover);
  box-shadow: -12px 0 48px rgba(62, 40, 72, .12);
}
html[data-theme="light"]:root .site-menu::backdrop { background: rgba(50, 36, 61, .22); }
html[data-theme="light"]:root :is(.sv-select-popup,.toast):not(:where(#reader *)) {
  background: linear-gradient(125deg, rgba(249, 233, 209, .20), transparent 70%), var(--glass-popover);
  border-color: rgba(103, 80, 118, .20);
  color: var(--mode-text);
  box-shadow: 0 14px 42px rgba(70, 47, 79, .13), 0 2px 8px rgba(70, 47, 79, .04);
}

/* Explicit control contexts avoid recoloring artwork and the reader. */
html[data-theme="light"]:root :is(.workspace-panel,.paid-studio,.character-studio,.template-library-filters,.account-panel,.social-publish-controls) :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),textarea,select),
html[data-theme="light"]:root .sv-select:not(:where(#reader *)) .sv-select-trigger {
  background: linear-gradient(130deg, rgba(255, 253, 246, .24), transparent 78%), var(--mode-field);
  color: var(--mode-text);
  border-color: var(--light-field-edge);
  box-shadow: inset 0 1px 0 rgba(255, 253, 247, .48);
}
html[data-theme="light"]:root :is(.workspace-panel,.paid-studio,.character-studio,.account-panel,.social-publish-controls) :is(input,textarea)::placeholder {
  color: var(--mode-muted);
  opacity: 1;
}
html[data-theme="light"]:root .sv-select:not(:where(#reader *)) .sv-select-trigger:hover {
  background-color: rgba(250, 242, 252, .86);
  border-color: var(--glass-selected);
}
html[data-theme="light"]:root :is(.workspace-panel,.paid-studio,.character-studio,.account-panel,.social-publish-controls) :is(input,textarea,select):focus,
html[data-theme="light"]:root .sv-select:not(:where(#reader *)) .sv-select-trigger[aria-expanded="true"] {
  border-color: var(--mode-accent);
  box-shadow: 0 0 0 3px rgba(115, 69, 121, .10);
}
html[data-theme="light"]:root :is(.workspace-panel,.paid-studio,.character-studio,.template-library-filters,.account-panel,.social-publish-controls) option {
  background: #fffaf3;
  color: var(--mode-text);
}
html[data-theme="light"]:root :is(.template-focal input,.template-transport>input,.cs-range input,.social-check input,.paid-studio input[type="range"],.paid-studio input[type="checkbox"]) {
  accent-color: var(--mode-accent);
}
html[data-theme="light"]:root :is(.topbar,.sidebar,.mobile-nav,.site-menu,#main) :is(input,textarea,select,button,a):focus-visible,
html[data-theme="light"]:root .sv-select:not(:where(#reader *)) .sv-select-trigger:focus-visible,
html[data-theme="light"]:root :is(.template-upload,.generation-upload,.cs-upload):focus-within {
  outline-color: var(--mode-accent);
}
html[data-theme="light"]:root :is(.topbar,.sidebar,.mobile-nav,.site-menu,#main) ::selection {
  background: #dec9e4;
  color: #302239;
}

html[data-theme="light"]:root :is(.topbar,.site-menu,#main) .button:not(.primary):not(.hero-button),
html[data-theme="light"]:root :is(.theme-toggle,.navigation-trigger,.paid-mobile-link,.header-create) {
  background: rgba(255, 251, 243, .40);
  border-color: rgba(103, 80, 118, .25);
  color: var(--mode-text);
}
html[data-theme="light"]:root :is(.site-menu,#main) .button.quiet { background: transparent; color: var(--mode-muted); }
html[data-theme="light"]:root :is(.topbar,.site-menu,#main) .button:not(.primary):not(.hero-button):hover,
html[data-theme="light"]:root :is(.theme-toggle,.navigation-trigger,.paid-mobile-link,.header-create):hover {
  background: var(--mode-soft);
  color: var(--mode-text);
  border-color: var(--glass-selected);
}
html[data-theme="light"]:root :is(.topbar,.site-menu,#main) :is(.button.primary,.button.hero-button) {
  background: linear-gradient(115deg, var(--light-primary-start), var(--light-primary-end));
  color: var(--light-primary-ink);
  border-color: rgba(90, 48, 99, .42);
  box-shadow: 0 5px 17px rgba(90, 48, 99, .14), inset 0 1px rgba(255, 242, 228, .17);
}
html[data-theme="light"]:root :is(.topbar,.site-menu,#main) :is(.button.primary,.button.hero-button):hover {
  background: linear-gradient(115deg, #6c4074, #593062);
  color: var(--light-primary-ink);
  border-color: #674170;
}
html[data-theme="light"]:root :is(.choice,.cs-world-filter button,.cs-saved-tabs button,.template-tabs button):not(:where(#reader *)) {
  color: var(--mode-muted);
  border-color: rgba(103, 80, 118, .20);
}
html[data-theme="light"]:root :is(.choice.selected,.filter-row .choice.selected,.cs-world-filter button.selected,.cs-saved-tabs button.selected,.cs-tabs button.selected,.template-tabs button.selected,.template-card.selected,.generation-draft.selected,.generation-reference.selected,.paid-scene-card.active,.paid-source.selected,.cs-layer.selected,.site-menu nav>a.active,.sv-select-option[aria-selected="true"],.sv-select-option.is-active):not(:where(#reader *)) {
  background: linear-gradient(115deg, rgba(224, 202, 234, .52), rgba(236, 219, 226, .38));
  border-color: var(--glass-selected);
  color: var(--mode-text);
}
html[data-theme="light"]:root .sv-select-option.is-active:not(:where(#reader *)) { border-color: var(--mode-accent); }
html[data-theme="light"]:root :is(.template-card,.cs-asset-card,.generation-draft,.generation-source-card,.film-part-card,.film-project-grid>button):hover {
  background-color: rgba(239, 222, 243, .42);
  border-color: var(--glass-selected);
}
html[data-theme="light"]:root :is(.template-card-title,.template-stage-top h2,.generation-section-heading h2,.cs-profile-caption h2) { color: var(--mode-text); }
html[data-theme="light"]:root :is(.template-card small,.template-stage-top>span,.template-filename,.template-transport output,.template-library-filters label,.template-library-filters>span,.template-scene-meta,.paid-save-status,.nav-label,.nav-short,.sidebar-foot) { color: var(--mode-muted); }
html[data-theme="light"]:root :is(.desktop-nav a,.mobile-nav a,.nav-link) { color: var(--mode-muted); }
html[data-theme="light"]:root :is(.desktop-nav a.active,.desktop-nav a:hover,.mobile-nav a.active,.nav-link.active) { color: var(--mode-accent); text-shadow: none; }
html[data-theme="light"]:root :is(.account-auth-links a,.account-document-links a,.account-links a,.account-footer-links a):hover { color: var(--mode-accent); }

/* Freeze inherited shell tokens at their previous light values inside the
   independently themed reader. No reader paint or geometry rule is changed. */
html[data-theme="light"]:root #reader {
  --mode-bg: #f6f0fb;
  --mode-text: #382244;
  --mode-muted: #634d74;
  --mode-accent: #8650a5;
  --mode-panel: rgba(251, 244, 255, .32);
  --mode-panel2: rgba(244, 231, 252, .10);
  --mode-field: rgba(255, 250, 255, .36);
  --mode-soft: rgba(146, 99, 181, .13);
  --mode-border: rgba(87, 59, 116, .045);
  --glass-edge: rgba(255, 250, 255, .035);
  --glass-shadow: 0 10px 46px rgba(74, 45, 110, .02);
  --glass-chrome: rgba(250, 242, 255, .34);
  --glass-check: rgba(121, 90, 145, .12);
  --glass-selected: rgba(87, 59, 116, .24);
  --glass-popover: rgba(251, 245, 255, .88);
}