@import url('./theme-light.generated.css');

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] {
  color-scheme: light;
  --vech-border: rgba(28, 38, 56, .08);
  --vech-border-strong: rgba(28, 38, 56, .24);
  --modal-backdrop: rgba(31, 40, 58, .22);
  --modal-bg: rgba(255, 255, 255, .97);
  --modal-bg-solid: #fff;
  --modal-bg-elevated: rgba(255, 255, 255, .98);
  --modal-bg-soft: rgba(24, 34, 50, .02);
  --modal-bg-hover: rgba(24, 34, 50, .04);
  --modal-text: #232b37;
  --modal-text-muted: #626c7a;
  --modal-text-soft: #465263;
  --modal-shadow: 0 24px 64px rgba(24, 34, 52, .16);
  --brand-muted: #4958d7;
  --tile-stroke: #dfe3ea;
  --scrollbar-thumb: rgba(28, 38, 56, .2);
  --scrollbar-thumb-hover: rgba(28, 38, 56, .35);
  --background: #fff;
  --foreground: #232b37;
  --card: #fff;
  --card-foreground: #232b37;
  --popover: #fff;
  --popover-foreground: #232b37;
  --primary: #1f2ff1;
  --primary-foreground: #fff;
  --secondary: #f8f9fb;
  --secondary-foreground: #232b37;
  --muted: #f8f9fb;
  --muted-foreground: #626c7a;
  --accent: #f8f9fb;
  --accent-foreground: #232b37;
  --border: #dfe3ea;
  --input: #dfe3ea;
  --ring: #5a66e5;
  --sidebar: #fff;
  --sidebar-foreground: #232b37;
  --sidebar-accent: #f8f9fb;
  --sidebar-accent-foreground: #232b37;
  --sidebar-border: #dfe3ea;
}
html[data-theme="light"] body,
html[data-theme="light"] .home-keep-alive__slot.is-front:not(:empty) {
  background: #fff;
  color: var(--modal-text);
  color-scheme: light;
}
html[data-theme="light"] .viewer {
  background: #fff;
  color: var(--modal-text);
}
html[data-theme="light"] .viewer__community-sidebar,
html[data-theme="light"] .account-modal__sidebar { background: #fff; }
html[data-theme="light"] .account-modal {
  --modal-text-muted: #626c7a;
  --modal-text-soft: #465263;
}
html[data-theme="light"] .account-modal__nav-item,
html[data-theme="light"] .account-modal__language-options button { color: var(--modal-text); }
html[data-theme="light"] .account-modal__member-badge { color: #3543bb; }
html[data-theme="light"] .viewer__catalog-sidebar-logo,
html[data-theme="light"] .viewer__catalog-sidebar-toggle-icon,
html[data-theme="light"] .viewer__user-popover-icon img { filter: brightness(0) saturate(100%); }
html[data-theme="light"] .viewer__template-loading {
  background: rgba(255, 255, 255, .92);
  color: #232b37;
}
html[data-theme="light"] .viewer__template-loading-shine { color: #1f2ff1; }
html[data-theme="light"] .viewer__search-input { color: #232b37; }
html[data-theme="light"] .viewer__search-input::placeholder { color: #626c7a; }
html[data-theme="light"] .viewer__project-option--active {
  background: rgba(31, 47, 241, .07);
  color: #2532b9;
}
/* Preview artwork, media, code, and QR surfaces keep their original colors. */
html[data-theme="light"] .tile { background: #fff; border-color: #dfe3ea; }
html[data-theme="light"] .viewer__expanded-preview { background-color: #fff; }
html[data-theme="light"] .viewer__empty-state-title { color: #232b37; }
html[data-theme="light"] :is(.vechoool-login-input, .account-modal__phone-bind-input) {
  background: #fff;
  color: #232b37;
  border-color: var(--modal-border);
}
html[data-theme="light"] ::selection { background: rgba(31, 47, 241, .18); color: #182259; }

/* White surfaces carry the light theme; gray is reserved for hover and dividers. */
html[data-theme="light"] .ai-tool-card {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(28, 38, 56, .07);
}
html[data-theme="light"] .viewer__project-option:not(.viewer__project-option--active) {
  background: #fcfcfd;
  border-color: rgba(28, 38, 56, .08);
}
html[data-theme="light"] .viewer__project-option:hover:not(:disabled):not(.viewer__project-option--active) {
  background: #f7f8fa;
}
html[data-theme="light"] .viewer__search-pill { background: #fafbfc; }
html[data-theme="light"] .account-modal__language-section,
html[data-theme="light"] .account-modal__rows,
html[data-theme="light"] .account-modal__language-options button:not([aria-pressed="true"]) {
  background: #fff;
}
html[data-theme="light"] .account-modal__language-options button:not([aria-pressed="true"]):hover {
  background: #f7f8fa;
}

/* A flat white category bar needs no dark-theme separation shadow. */
html[data-theme="light"] .skill-plaza__cats {
  background: #fff;
  box-shadow: none;
}

html[data-theme="light"] .viewer__project-option--active .viewer__library-sidebar-button-icon {
  color: inherit;
}
/* Light detail toolbars use outlines rather than elevated controls. */
html[data-theme="light"] :is(.viewer__expanded-bar, .skill-detail__doc-bar)
  :is(button, a, [role="tablist"], .viewer__expanded-kit-tabs, .skill-detail__doc-tabs),
html[data-theme="light"] .viewer__expanded-kit-tabs::before {
  box-shadow: none;
}
html[data-theme="light"] :is(.viewer__expanded-bar, .skill-detail__doc-bar)
  :is(button, a):focus-visible {
  outline: 2px solid var(--brand-muted);
  outline-offset: 3px;
}

/* Template download CTA keeps its blue fill in either appearance. */
html[data-theme="light"] .viewer__expanded:not(.skill-detail) .viewer__expanded-link {
  border-color: rgba(31, 47, 241, .72);
  background: linear-gradient(180deg, #1f2ff1, #1826d4);
  color: #f7f9fff5;
}
html[data-theme="light"] .viewer__expanded:not(.skill-detail) .viewer__expanded-link:hover:not(:disabled) {
  border-color: #6b76f8e6;
  background: linear-gradient(180deg, #3d4bf5, #1f2ff1);
  color: #fff;
}

/* Brand blue surfaces keep the same inverse text and icons in both themes. */
html[data-theme="light"] .viewer__expanded-share-tooltip,
html[data-theme="light"] .viewer__expanded-share-tooltip strong,
html[data-theme="light"] .viewer__expanded-share-tooltip strong em,
html[data-theme="light"] .viewer__expanded-share-tooltip-icon { color: #fff; }
html[data-theme="light"] .viewer__expanded-share-tooltip > span { color: rgba(255,255,255,.82); }
html[data-theme="light"] .viewer__expanded-share-tooltip small { color: rgba(255,255,255,.9); }

/* Brand headers retain inverse colors. */
html[data-theme="light"] .vechoool-mcp-modal .mcp__card-top,
html[data-theme="light"] .vechoool-mcp-modal .mcp__card-top *,
html[data-theme="light"] .vechoool-mcp-modal .mcp__flow-index {
  color: #fff;
}
html[data-theme="light"] .vechoool-mcp-modal .mcp__card-eyebrow {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.28);
}
html[data-theme="light"] .vechoool-mcp-modal .mcp__code,
html[data-theme="light"] .vechoool-mcp-modal .mcp__code code {
  color: var(--modal-text);
  background: transparent;
}

/* Segmented controls need a distinct selection even without shadows. */
html[data-theme="light"] .viewer__expanded-kit-tabs {
  background: #fff;
  border-color: var(--vech-border);
}
html[data-theme="light"] .viewer__expanded-kit-tabs::before {
  background: #eef0ff;
  border: 1px solid transparent;
  box-shadow: none;
}
html[data-theme="light"] .viewer__expanded-kit-tab { color: #626c7a; }
html[data-theme="light"] .viewer__expanded-kit-tab:hover { color: #232b37; }
html[data-theme="light"] .viewer__expanded-kit-tab.is-active,
html[data-theme="light"] .viewer__expanded-kit-tab.is-active:hover {
  color: #2532b9;
  font-weight: 600;
}

/* Light selections share a flat blue tint, with no blue outline. */
html[data-theme="light"] .viewer__expanded-kit-tabs::before { border-color: transparent; }
html[data-theme="light"] :is(
  .account-modal__nav-item--active,
  .account-modal__billing-tab--active,
  .account-modal__language-options button[aria-pressed="true"],
  .skill-detail__doc-tabs button.is-active,
  [role="tablist"] [role="tab"][aria-selected="true"]:not(:where(.ai-tool-host *))
),
html[data-theme="light"] .vechoool-mcp-modal .mcp__editor-tab.is-active,
html[data-theme="light"] .vechoool-mcp-modal .mcp__editor-tab.is-active:hover {
  background: #eef0ff;
  color: #2532b9;
  border-color: transparent;
  box-shadow: none;
}
html[data-theme="light"] .account-modal__nav-item--active:hover,
html[data-theme="light"] .account-modal__billing-tab--active:hover,
html[data-theme="light"] .account-modal__language-options button[aria-pressed="true"]:hover {
  background: #eef0ff;
  color: #2532b9;
  border-color: transparent;
  box-shadow: none;
}

/* State styles win over both base rules and hover rules without affecting focus rings. */
html[data-theme="light"] :is(
  .viewer__project-option--active,
  .account-modal__nav-item--active,
  .account-modal__billing-tab--active,
  .account-modal__language-options button[aria-pressed="true"],
  .skill-detail__doc-tabs button.is-active,
  .vechoool-mcp-modal .mcp__editor-tab.is-active,
  .points-recharge-tier--selected,
  .invite-flow__kits > button.is-active,
  .invite-flow__choices button.is-active,
  .invite-center__kits > button.is-active,
  [role="tablist"] [role="tab"][aria-selected="true"]:not(:where(.ai-tool-host *))
):is(*, :hover, :active) {
  background: #eef0ff;
  color: #2532b9;
  border-color: transparent;
  outline: none;
  box-shadow: none;
}
html[data-theme="light"] :is(.viewer__project-option, .account-modal__nav-item) .viewer__library-sidebar-button-icon,
html[data-theme="light"] [data-viewer-monochrome] {
  color: inherit;
  filter: none;
  opacity: 1;
}
html[data-theme="light"] .vechoool-mcp-modal .mcp__editor-tab:not(.is-active):hover {
  background: #f7f8fa;
  color: #232b37;
}
html[data-theme="light"] :is(
  .price__membership-card-top,
  .vechoool-oauth-card-top,
  .invite-center-modal__header,
  .invite-share-modal__header,
  .invite-poster-dialog header,
  .template-purchase-plan--featured
),
html[data-theme="light"] :is(
  .price__membership-card-top,
  .vechoool-oauth-card-top,
  .invite-center-modal__header,
  .invite-share-modal__header,
  .invite-poster-dialog header,
  .template-purchase-plan--featured
) :is(h1,h2,h3,p,span,strong,small,button,svg) {
  color: #fff;
}
html[data-theme="light"] #price-page .price__membership-card-top :is(span,button,svg),
html[data-theme="light"] .vechoool-membership-modal .price__membership-card-top :is(span,button,svg),
html[data-theme="light"] .template-purchase-plan__badge,
html[data-theme="light"] .invite-center__kit-fallback {
  color: #fff;
}
html[data-theme="light"] :is(.viewer__expanded-bar,.skill-detail__doc-bar) :is(button,a):hover {
  box-shadow: none;
}
html[data-theme="light"] :is(button,a,[role="tab"]):focus-visible {
  outline: 2px solid var(--brand-muted);
  outline-offset: 3px;
}
html[data-theme="light"] .viewer__project-option.viewer__project-option--active :is(.viewer__library-sidebar-button-icon, [data-viewer-monochrome]),
html[data-theme="light"] .viewer__project-option.viewer__project-option--active:hover :is(.viewer__library-sidebar-button-icon, [data-viewer-monochrome]) {
  color: #2532b9;
  background-color: currentColor;
  filter: none;
}
/* Icon wrappers remain transparent; only the masked glyph receives the fill. */
html[data-theme="light"] .viewer__project-option.viewer__project-option--active .viewer__library-sidebar-button-icon,
html[data-theme="light"] .viewer__project-option.viewer__project-option--active:hover .viewer__library-sidebar-button-icon {
  background-color: transparent;
}
html[data-theme="light"].is-price-listing body,
html[data-theme="light"].is-price-listing.guide-route body {
  background: #fff;
  color: #232b37;
}
/* Primary actions retain their brand fill and inverse copy in both appearances. */
html[data-theme] :is(
  .account-modal__points-actions .account-modal__row-action,
  .ai-tool-host .ai-tool-points-buy,
  .ai-tool-host__buy,
  .viewer__expanded .viewer__expanded-link
) {
  background: linear-gradient(180deg, #1f2ff1, #1826d4);
  border-color: rgba(31, 47, 241, .72);
  color: #fff;
}
html[data-theme] :is(
  .account-modal__points-actions .account-modal__row-action,
  .ai-tool-host .ai-tool-points-buy,
  .ai-tool-host__buy,
  .viewer__expanded .viewer__expanded-link
):hover:not(:disabled) {
  background: linear-gradient(180deg, #3d4bf5, #1f2ff1);
  border-color: #6b76f8e6;
  color: #fff;
}
html[data-theme] :is(
  .account-modal__points-actions .account-modal__row-action,
  .ai-tool-host .ai-tool-points-buy,
  .ai-tool-host__buy,
  .viewer__expanded .viewer__expanded-link
) :is(span, svg) { color: inherit; }
/* Contact and guide headers share the same inverse brand surface. */
html[data-theme="light"] .contact-page .contact__card-top,
html[data-theme="light"] .contact-page .contact__card-top :is(.contact__card-eyebrow, .contact__card-badge) {
  color: #fff;
}
html[data-theme="light"] .contact-page .contact__card-eyebrow,
html[data-theme="light"] .contact-page .contact__card-badge {
  border-color: rgba(255,255,255,.28);
}
html[data-theme="light"] .contact-page .contact__card-eyebrow {
  background: rgba(255,255,255,.14);
}
html[data-theme="light"] .contact-page .contact__card-eyebrow-dot {
  background: rgba(255,255,255,.92);
}
/* Guide copy uses semantic ink tokens, including tokens defined by the dark base. */
html[data-theme="light"] .guide-page {
  --vech-ink: #232b37;
  --vech-ink-muted: #626c7a;
  --vech-ink-subtle: #626c7a;
}
html[data-theme="light"] .guide-page :is(.guide-callout, .guide-prompt__text) {
  color: #465263;
}
html[data-theme="light"] .viewer__user-popover-username { color: #4658a8; }
/* Light detail favorite action sits on a pure white surface. */
html[data-theme="light"] .viewer__expanded .viewer__expanded-favorite,
html[data-theme="light"] .viewer__expanded .viewer__expanded-favorite:hover {
  background: #fff;
}

/* Mobile brand/menu control uses the same white surface and dark mark as navigation. */
html[data-theme="light"] .viewer__mobile-nav-trigger {
  background:#fff;
  border-color:#e5e7eb;
  color:#232b37;
  box-shadow:none;
}
html[data-theme="light"] .viewer__mobile-nav-trigger:hover { background:#f8f9fb; }
html[data-theme="light"] .viewer__mobile-nav-trigger img { filter:brightness(0) saturate(100%); }