/* Theme tokens: component colors below must reference these semantic values. */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --theme-page-background: #fffdf9;
  --theme-header: rgba(255, 253, 249, 0.84);
  --theme-surface: rgba(255, 255, 255, 0.78);
  --theme-surface-solid: #ffffff;
  --theme-surface-soft: rgba(246, 248, 253, 0.88);
  --theme-control: rgba(255, 255, 255, 0.88);
  --theme-control-hover: #f3f6ff;
  --theme-text: #17203a;
  --theme-text-strong: #111a33;
  --theme-text-muted: #6d768b;
  --theme-text-soft: #8a93a7;
  --theme-border: rgba(48, 61, 91, 0.14);
  --theme-border-strong: rgba(72, 101, 191, 0.3);
  --theme-shadow: 0 18px 44px rgba(67, 54, 43, 0.07);
  --theme-shadow-soft: 0 10px 26px rgba(64, 53, 42, 0.06);
  --theme-chip: #edf2fb;
  --theme-chip-text: #53617d;
  --theme-selected: linear-gradient(120deg, rgba(239, 247, 255, 0.98), rgba(248, 242, 255, 0.98));
  --theme-selected-border: #5e8ff4;
  --theme-accent: #6d7dff;
  --theme-accent-text: #405ed1;
  --theme-accent-contrast: #ffffff;
  --theme-accent-gradient: linear-gradient(135deg, #38a3ff 0%, #6d7dff 52%, #a78bfa 100%);
  --theme-media: #050609;
  --theme-success: #24b980;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --theme-page-background:
    radial-gradient(circle at 10% 20%, rgba(61, 82, 151, 0.16), transparent 32%),
    radial-gradient(circle at 92% 38%, rgba(43, 91, 145, 0.14), transparent 34%),
    radial-gradient(circle at 58% 4%, rgba(81, 67, 129, 0.1), transparent 28%),
    linear-gradient(145deg, #090b12 0%, #0d1220 50%, #101827 100%);
  --theme-header: rgba(8, 11, 19, 0.86);
  --theme-surface: rgba(18, 24, 39, 0.88);
  --theme-surface-solid: #131927;
  --theme-surface-soft: rgba(28, 36, 57, 0.88);
  --theme-control: rgba(24, 32, 51, 0.94);
  --theme-control-hover: #222d45;
  --theme-text: #e8eefc;
  --theme-text-strong: #f7f9ff;
  --theme-text-muted: #9aa7c0;
  --theme-text-soft: #7f8ba3;
  --theme-border: rgba(142, 160, 210, 0.25);
  --theme-border-strong: rgba(133, 156, 226, 0.46);
  --theme-shadow: 0 20px 48px rgba(0, 0, 0, 0.28);
  --theme-shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.2);
  --theme-chip: rgba(61, 78, 124, 0.44);
  --theme-chip-text: #c8d4f0;
  --theme-selected: linear-gradient(120deg, rgba(31, 50, 91, 0.96), rgba(43, 35, 78, 0.94));
  --theme-selected-border: #718dff;
  --theme-accent: #8395ff;
  --theme-accent-text: #b9c6ff;
  --theme-accent-contrast: #ffffff;
  --theme-accent-gradient: linear-gradient(135deg, #3498f5 0%, #6879f5 52%, #9675e9 100%);
  --theme-media: #03050a;
  --theme-success: #4dd7a2;
}

body,
body.landing-page,
body.editor-page,
body.works-page {
  color: var(--theme-text);
  background: var(--theme-page-background);
  background-attachment: fixed;
}

.site-header,
.landing-page .site-header,
.editor-page .site-header,
.works-page .site-header {
  background: var(--theme-header);
  border-bottom-color: var(--theme-border);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.025);
}

.brand-wordmark,
.landing-page .brand-wordmark,
.editor-page .brand-wordmark,
.works-page .brand-wordmark,
.page-title,
.panel-title {
  color: var(--theme-text-strong);
}

.site-nav-link,
.landing-page .site-nav-link,
.editor-page .site-nav-link,
.works-page .site-nav-link {
  color: var(--theme-text-muted);
}

.site-nav-link:hover,
.site-nav-link.is-active,
.landing-page .site-nav-link:hover,
.landing-page .site-nav-link.is-active,
.editor-page .site-nav-link:hover,
.editor-page .site-nav-link.is-active,
.works-page .site-nav-link:hover,
.works-page .site-nav-link.is-active {
  color: var(--theme-text-strong);
}

.guest-header-shell,
.landing-page .guest-header-shell,
.editor-page .guest-header-shell,
.works-page .guest-header-shell,
.credit-chip,
.landing-page .credit-chip,
.editor-page .credit-chip,
.works-page .credit-chip {
  border-color: var(--theme-border);
  background: color-mix(in srgb, var(--theme-surface-solid) 72%, transparent);
  box-shadow: var(--theme-shadow-soft);
}

.account-chip,
.landing-page .account-chip,
.editor-page .account-chip,
.works-page .account-chip {
  background: var(--theme-surface-soft);
}

.account-label,
.credit-label,
.landing-page .account-label,
.landing-page .credit-label,
.editor-page .account-label,
.editor-page .credit-label,
.works-page .account-label,
.works-page .credit-label {
  color: var(--theme-text-soft);
}

.guest-id-badge,
.credit-badge,
.landing-page .guest-id-badge,
.landing-page .credit-badge,
.editor-page .guest-id-badge,
.editor-page .credit-badge,
.works-page .guest-id-badge,
.works-page .credit-badge {
  color: var(--theme-text);
}

.header-waitlist-button,
.site-header .header-waitlist-button,
.header-waitlist-button:hover,
.site-header .header-waitlist-button:hover {
  border-color: var(--theme-accent) !important;
  background: var(--theme-accent-gradient) !important;
  color: var(--theme-accent-contrast) !important;
}

.theme-toggle {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--theme-surface-solid) 72%, transparent);
  color: var(--theme-text-muted);
  cursor: pointer;
  box-shadow: var(--theme-shadow-soft);
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.theme-toggle:hover {
  color: var(--theme-text-strong);
  background: var(--theme-control-hover);
  transform: translateY(-1px);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--theme-accent);
  outline-offset: 2px;
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
}

.page-card {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  color: var(--theme-text);
  box-shadow: var(--theme-shadow);
}

.signup-modal {
  border-color: var(--theme-border);
  background: var(--theme-surface-solid);
  color: var(--theme-text);
  box-shadow: var(--theme-shadow);
}

.page-note,
.signup-modal-note,
.signup-modal-status {
  color: var(--theme-text-muted);
}

.signup-modal-header {
  border-bottom-color: var(--theme-border);
}

.signup-modal-lead {
  color: var(--theme-text);
}

.signup-modal-title,
.signup-modal-label {
  color: var(--theme-text-strong);
}

.signup-modal-close {
  border-color: var(--theme-border);
  background: var(--theme-control);
  color: var(--theme-text-muted);
}

.signup-modal-close:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-control-hover);
  color: var(--theme-text-strong);
}

.signup-modal-input {
  border-color: var(--theme-border);
  background: var(--theme-control);
  color: var(--theme-text);
}

.signup-modal-input::placeholder {
  color: var(--theme-text-soft);
}

.signup-modal-input:focus {
  border-color: var(--theme-accent);
  outline: 2px solid color-mix(in srgb, var(--theme-accent) 16%, transparent);
  outline-offset: 1px;
}

.signup-modal-cta {
  border-color: var(--theme-accent);
  background: var(--theme-accent-gradient) !important;
  color: var(--theme-accent-contrast) !important;
}

.signup-modal-status.is-success {
  color: color-mix(in srgb, #059669 84%, var(--theme-text));
}

.signup-modal-status.is-error {
  color: color-mix(in srgb, #dc2626 82%, var(--theme-text));
}

/* Landing component mappings */
.landing-page .landing-title,
.landing-page .section-title,
.landing-page .feature-card h3,
.landing-page .upload-title {
  color: var(--theme-text-strong);
}

.landing-page .landing-subcopy,
.landing-page .section-lead,
.landing-page .feature-card p,
.landing-page .upload-hint {
  color: var(--theme-text-muted);
}

.landing-page .landing-upload,
.landing-page .feature-card {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow);
}

html[data-theme="dark"] .landing-page .landing-upload {
  box-shadow:
    inset 0 1px 0 rgba(133, 156, 226, 0.08),
    0 24px 60px rgba(0, 0, 0, 0.28);
}

.landing-page .landing-upload:hover,
.landing-page .landing-upload.is-dragover {
  border-color: var(--theme-border-strong);
  background: var(--theme-control-hover);
}

html[data-theme="dark"] .landing-page .landing-upload:hover,
html[data-theme="dark"] .landing-page .landing-upload.is-dragover {
  box-shadow:
    inset 0 1px 0 rgba(133, 156, 226, 0.14),
    0 26px 64px rgba(0, 0, 0, 0.3);
}

.landing-page .upload-plus {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-soft);
  color: var(--theme-accent-text);
}

/* Editor component mappings */
.editor-project-bar,
.editor-page .editor-layout > .player-card,
.editor-page .editor-layout > .caption-card,
.editor-page .editor-layout > .caption-assistant-card {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow);
}

.editor-project-name,
.editor-project-meta-item strong,
.editor-page .panel-title,
.editor-page .caption-segment-text,
.editor-page .caption-word-token,
.editor-page .caption-card-primary-meta,
.editor-page .caption-style-title,
.editor-page .generate-section-title,
.editor-page .generate-switch-label,
.editor-page .style-field-shell,
.editor-page .caption-style-label {
  color: var(--theme-text);
}

.editor-project-meta-label,
.editor-project-icon-button,
.editor-project-menu,
.editor-project-saved,
.editor-page .caption-viewer-info,
.editor-page .caption-segment-time,
.editor-page .caption-card-meta,
.caption-search-preview {
  color: var(--theme-text-muted);
}

.editor-project-meta-item,
.editor-page .panel-header-row,
.editor-page .generate-section + .generate-section,
.editor-page .caption-style-row {
  border-color: var(--theme-border);
}

.editor-page .player-host {
  border-color: var(--theme-border);
  background: var(--theme-media);
  box-shadow: var(--theme-shadow);
}

.editor-tool-button,
.editor-page .editor-file-select,
.editor-page .panel-title-back,
.editor-page .icon-action-button,
.caption-search-preview,
.editor-save-project,
.secondary-button {
  border-color: var(--theme-border);
  background: var(--theme-control);
  color: var(--theme-text);
}

.editor-page .editor-file-select:hover,
.editor-page .icon-action-button:hover,
.secondary-button:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-control-hover);
}

.editor-page .panel-title-back,
.editor-page .panel-title-back:hover {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--theme-text-muted);
}

.editor-page .panel-title-back:hover {
  color: var(--theme-text-strong);
}

.editor-tool-button--accent {
  border-color: var(--theme-border-strong);
  color: var(--theme-accent-text);
}

.editor-page .field-shell,
.editor-page .generate-textarea-shell,
.editor-page .style-color-shell,
.editor-page .download-format-select {
  border-color: var(--theme-border);
  background: var(--theme-control);
}

.editor-page .field-shell input,
.editor-page .field-shell select,
.editor-page .generate-textarea-shell textarea,
.editor-page .download-format-select {
  color: var(--theme-text);
}

.editor-page .generate-textarea-shell textarea::placeholder {
  color: var(--theme-text-soft);
}

.editor-page .generate-switch {
  background: color-mix(in srgb, var(--theme-text-muted) 32%, var(--theme-control));
  box-shadow: inset 0 0 0 1px var(--theme-border-strong);
  transition: background 140ms ease, box-shadow 140ms ease;
}

.editor-page .generate-switch.is-on {
  background: var(--theme-accent-gradient);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--theme-accent) 75%, transparent),
    0 0 0 2px color-mix(in srgb, var(--theme-accent) 12%, transparent);
}

.editor-page .generate-switch-knob {
  background: var(--theme-surface-solid);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--theme-text) 28%, transparent);
}

.editor-page .generate-submit,
.editor-page .download-apply-button,
.editor-page .download-fab {
  border-color: var(--theme-accent);
  background: var(--theme-accent-gradient);
  color: var(--theme-accent-contrast);
}

.editor-page .caption-segment-item,
.editor-page .caption-list .caption-card {
  border-color: var(--theme-border);
  background: var(--theme-surface);
}

.editor-page .caption-segment-item:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-control-hover);
}

.editor-page .caption-segment-item.is-active,
.editor-page .caption-card.is-selected {
  border-color: var(--theme-selected-border);
  background: var(--theme-selected);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-accent) 30%, transparent), var(--theme-shadow-soft);
}

.editor-page .caption-segment-index,
.editor-page .caption-pill {
  background: var(--theme-chip);
  color: var(--theme-chip-text);
}

.editor-page .caption-segment-row-actions {
  color: var(--theme-text-muted);
}

.editor-page .caption-split-blob {
  background: color-mix(in srgb, var(--theme-accent) 68%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-accent) 18%, transparent);
}

.editor-page .icon-action-button.is-active {
  border-color: var(--theme-accent);
  background: color-mix(in srgb, var(--theme-accent) 16%, var(--theme-control));
  color: var(--theme-accent-text);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-accent) 13%, transparent), var(--theme-shadow-soft);
}

.editor-page .download-panel,
.editor-shortcuts {
  border-color: var(--theme-border);
  background: var(--theme-surface-solid);
  color: var(--theme-text-muted);
  box-shadow: var(--theme-shadow);
}

.editor-page .download-export-status {
  color: var(--theme-text-soft);
}

.editor-page .download-export-status.is-error {
  color: color-mix(in srgb, #ef4444 78%, var(--theme-text));
}

.editor-shortcuts-label {
  color: var(--theme-text);
}

.editor-shortcuts kbd {
  background: var(--theme-chip);
  color: var(--theme-chip-text);
}

/* Projects component mappings */
.works-page .works-shell {
  background: transparent;
}

.works-page .works-page-card {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.works-page .projects-heading .page-title,
.works-page .project-stat-copy strong,
.works-page .work-card-title {
  color: var(--theme-text-strong);
}

.works-page .projects-heading .page-note,
.works-page .project-stat-copy span,
.works-page .work-card-dates,
.works-page .work-card-footer-meta,
.works-page .projects-pagination p {
  color: var(--theme-text-muted);
}

.works-page .project-stat,
.works-page .projects-search,
.works-page .projects-sort,
.works-page .projects-filter-tabs,
.works-page .work-card,
.works-page .projects-page-button,
.works-page .works-empty {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow-soft);
}

.works-page .project-stat-icon {
  border-color: var(--theme-border);
  background: var(--theme-surface-soft);
}

.works-page .projects-search,
.works-page .projects-sort,
.works-page .projects-filter-tab {
  color: var(--theme-text-muted);
}

.works-page .projects-search svg {
  stroke: var(--theme-text-muted);
}

.works-page .projects-search kbd,
.works-page .work-card-format {
  background: var(--theme-chip);
  color: var(--theme-chip-text);
}

.works-page .projects-filter-tab.is-active,
.works-page .projects-page-button.is-active,
.works-page .projects-new {
  color: var(--theme-accent-contrast);
  background: var(--theme-accent);
}

.works-page .work-card-dates p,
.works-page .work-card-dates span,
.works-page .work-card-dates time,
.works-page .work-card-footer-meta,
.works-page .work-card-more {
  color: var(--theme-text-muted);
}

.works-page .work-card-footer {
  border-top-color: var(--theme-border);
}

.works-page .work-open-button {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-soft);
  color: var(--theme-accent-text);
}

.works-page .work-open-button:hover:not(:disabled) {
  border-color: var(--theme-accent);
  background: var(--theme-control-hover);
}