:root { --reading-font-size: 18px; --reading-max-width: 72ch; --color-elevated: #F9FAFD; --color-input: #FCFCFE; --color-inverse: #fff; }
:root[data-theme="dark"] {
  --color-bg: #101725; --color-surface: #182235; --color-elevated: #1E2A3E; --color-input: #131D2E;
  --color-text: #EDF1FA; --color-text-muted: #ACBAD1; --color-border: #324158; --color-border-strong: #4B5E7A;
  --color-violet-100: #2C2950; --color-violet-600: #B9B0FF; --color-teal-100: #183B39; --color-teal-700: #83DBCB;
  --color-amber-100: #3A321F; --color-amber-800: #F7D98F; --color-danger-100: #43272D; --color-danger-800: #FFB6AA;
  --shadow-xs: 0 1px 4px #0002; --shadow-sm: 0 6px 20px #0002; --shadow-md: 0 12px 34px #0003; --shadow-lg: 0 24px 72px #0006;
  color-scheme: dark;
}
body { background: radial-gradient(ellipse at 85% 0, color-mix(in srgb, var(--color-violet) 8%, transparent), transparent 42rem), var(--color-bg); }
.reading-content, .study-prose { font-size: var(--reading-font-size); max-width: var(--reading-max-width); }
.preferences-trigger { width: 100%; margin-top: .3rem; }
.auth-panel__foot .preferences-trigger { margin-top: 1rem; font-size: .8rem; }
.preferences-dialog { width: min(100% - 2rem, 580px); max-height: calc(100dvh - 2rem); padding: 1.75rem; border: 1px solid var(--color-border); border-radius: 24px; color: var(--color-text); background: var(--color-surface); box-shadow: var(--shadow-lg); overscroll-behavior: contain; }
.preferences-dialog::backdrop { background: #101725B3; backdrop-filter: blur(6px); }
.preferences-dialog__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.preferences-dialog__head h2 { margin-top: .4rem; font-size: 1.65rem; }
.icon-button { display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-elevated); color: var(--color-text); font-size: 1.6rem; cursor: pointer; }
.preferences-dialog__intro { margin-top: .75rem; font-size: .9rem; color: var(--color-text-muted); }
.preferences-dialog form { display: grid; gap: 1.4rem; margin-top: 1.5rem; }
.preferences-dialog fieldset { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: .8rem; }
.preferences-dialog legend { margin-bottom: .75rem; padding: 0; font-weight: 700; }
.theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.theme-options label { position: relative; display: grid; gap: .5rem; justify-items: center; padding: 1rem .5rem; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-elevated); cursor: pointer; font-size: .8rem; }
.theme-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.theme-options label:has(:checked) { border-color: var(--color-violet); box-shadow: 0 0 0 2px #6256C92B; }
.theme-options label:has(:focus-visible) { outline: 3px solid var(--focus-ring-color); outline-offset: 3px; }
.theme-options label > span { font-size: 1.7rem; line-height: 1; }
.preferences-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.preferences-sample { margin: .3rem 0 0; padding: 1rem; border-radius: 12px; background: var(--color-elevated); line-height: 1.65; }
.preferences-check { display: flex; align-items: center; gap: .7rem; font-size: .9rem; }
.preferences-check input { width: 20px; height: 20px; accent-color: var(--color-violet); }
.preferences-volume input { width: 100%; min-height: 40px; accent-color: var(--color-violet); }
.connection-status { position: fixed; z-index: 250; bottom: max(1rem, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(100% - 2rem, 620px); padding: .85rem 1rem; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-md); font-size: .85rem; }
.connection-status[data-state="offline"] { border-left: 4px solid var(--color-amber); }
.connection-status[data-state="online"] { border-left: 4px solid var(--color-teal); }
.batch-items-preview { display: grid; gap: .65rem; margin-block: 1rem; }
.batch-preview-item { padding: 1rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-elevated); overflow-wrap: anywhere; }
.batch-preview-item summary { display: grid; gap: .35rem; cursor: pointer; }
.batch-preview-item p { margin-top: .8rem; white-space: pre-wrap; }
.batch-preview-item pre { overflow-x: auto; max-width: 100%; font-size: .78rem; }
.batch-preview-item h3 { font-size: 1rem; margin-top: 1rem; }
.editorial-history { width: min(100% - 2rem, 800px); }
#history-content { display: grid; gap: 1rem; margin-top: 1.5rem; }
.report-content-link { margin-top: 1rem; min-height: 44px; text-align: left; }

/* Existing components share semantic surfaces in both palettes. Game arenas retain their own palette. */
[data-theme="dark"] :is(.auth-card, .workspace-nav, .subject-card, .study-mode, .study-sheet, .admin-card, .quiz-card, .summary-card, .expediente-section, .topic-sidebar, .account-menu .navbar__user, .modal-card, .state-panel, .chip, .action-card, .review-options__item, .expediente-topic-row) { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] :is(.dashboard-welcome, .profile-hero-card) { background: linear-gradient(120deg, var(--color-surface), #25233E); border-color: var(--color-border); }
[data-theme="dark"] :is(.input, .tabs, .deck-mode-bar, .fc-face, .fc-rate-btn, .admin-item, .review-item, .md-preview, .expediente-subject-card, .profile-feed-item, .topic-item:hover) { background: var(--color-elevated); border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] :is(.auth-form__head h2, .tab, .subject-card__title, .topic-item__title, .study-sheet__title, .study-prose h2, .study-prose h3, .study-prose h4, .study-prose strong, .quiz-card__prompt, .fc-face__text, .fc-face__answer, .fc-rate-btn__label, .profile-hero-card__name, .profile-kpi-card__value, .expediente-section__head h2, .expediente-subject-card__title, .expediente-topic-row__name, .account-menu .user-profile-link, .modal-card__title) { color: var(--color-text); }
[data-theme="dark"] :is(.profile-kpi-card, .summary-metric) { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .tab[aria-selected="true"] { background: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .chip[aria-pressed="true"] { background: #6256C9; color: #fff; }
[data-theme="dark"] .btn--primary { background: #8476E5; color: #101725; border-color: #8476E5; }
[data-theme="dark"] .btn--primary:hover:not(:disabled) { background: #A397F0; }
[data-theme="dark"] .btn--outline { background: var(--color-surface); color: #C4BBFF; border-color: var(--color-border-strong); }
[data-theme="dark"] .account-menu .btn--on-dark { background: var(--color-elevated); color: var(--color-text); border-color: var(--color-border); }
[data-theme="dark"] .input:focus { background: var(--color-input); }
[data-theme="dark"] .subject-card__glyph { background: #6256C92B; color: #C4BBFF; }
[data-theme="dark"] :is(.status-pill--published, .btn--status-publish, .quiz-feedback__badge:not(.quiz-feedback__badge--amber)) { background: #1D6B63; color: #fff; }
[data-theme="dark"] :is(.quiz-feedback, .verified-source) { background: var(--color-teal-100); color: var(--color-text); }
[data-theme="dark"] .quiz-feedback--wrong { background: var(--color-danger-100); }
[data-theme="dark"] .quiz-option { background: var(--color-elevated); color: var(--color-text); border-color: var(--color-border); }
[data-theme="dark"] .quiz-option.is-selected { background: var(--color-violet-100); border-color: #A99FEF; }
[data-theme="dark"] .quiz-option.is-correct { background: var(--color-teal-100); }
[data-theme="dark"] .quiz-option.is-wrong { background: var(--color-danger-100); }
[data-theme="dark"] .study-prose code { background: #101725; color: #C4BBFF; }
[data-theme="dark"] .skeleton { background-image: linear-gradient(90deg, #233047 25%, #2E3C53 50%, #233047 75%); }
[data-theme="dark"] :is(.link-btn, .breadcrumb a, .topic-item__unit, .action-card__tag, .admin-section__step) { color: #BEB4FF; }
[data-theme="dark"] .auth-panel__intro .eyebrow, [data-theme="dark"] .eyebrow { color: #83DBCB; }
[data-theme="dark"] .auth-hero .eyebrow { color: #83DBCB; }
[data-theme="dark"] .study-prose blockquote { background: var(--color-violet-100); }
[data-theme="dark"] .btn--teal { background: #1D6B63; color: #fff; }
@media (max-width: 520px) { .preferences-dialog { padding: 1.25rem; } .preferences-fields { grid-template-columns: 1fr; } .theme-options { gap: .4rem; } }
@media (max-width: 600px) {
  .workspace-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .1rem; padding: .4rem; overflow: visible; }
  .workspace-nav a { min-width: 0; flex-direction: column; gap: .25rem; padding: .45rem .1rem; font-size: .72rem; line-height: 1.25; text-align: center; }
  .workspace-nav a span { white-space: normal; overflow-wrap: anywhere; }
}

/* These components keep readable text on their semantic surfaces in both themes. */
.expediente-hero .breadcrumb { color: #C2CADF; }
.expediente-hero .breadcrumb a { color: #C4BBFF; }
.box-pill { column-gap: .25em; }
[data-theme="dark"] .profile-feed-item__title { color: var(--color-text); }
[data-theme="dark"] .btn--status-draft { background: var(--color-elevated); color: var(--color-text-muted); border-color: var(--color-border-strong); }
[data-theme="dark"] .btn--status-draft:hover:not(:disabled) { background: var(--color-border); color: var(--color-text); }
[data-theme="dark"] :is(.box-pill--1, .box-status-tag--amber, .box-status-tag--danger) { background: var(--color-amber-100); color: var(--color-amber-800); }
[data-theme="dark"] :is(.box-pill--2, .box-status-tag--violet) { background: var(--color-violet-100); color: var(--color-violet-600); }
[data-theme="dark"] :is(.box-pill--3, .box-status-tag--teal, .box-step--done) { background: var(--color-teal-100); color: var(--color-teal-700); }
[data-theme="dark"] .box-pill--4 { background: var(--color-elevated); color: var(--color-text); }