/* PRIORIDADE 1 - TEMA CLARO E ACESSIVEL
   Preparatório Digital Transpetro PSP 003/2026
   Carregue este arquivo DEPOIS dos estilos atuais. */

:root {
  color-scheme: light;
  --page-bg: #f4f7fb;
  --surface: #ffffff;
  --surface-soft: #edf4fb;
  --surface-highlight: #f8fafc;
  --text-primary: #172437;
  --text-secondary: #4d6075;
  --text-muted: #65758b;
  --brand-navy: #0b2c55;
  --brand-blue: #1769c2;
  --brand-blue-hover: #0f56a3;
  --brand-yellow: #f4c430;
  --brand-green: #0d8069;
  --border: #d9e3ee;
  --border-strong: #aebfd1;
  --success-bg: #e9f8f2;
  --warning-bg: #fff7d6;
  --danger-bg: #fff0f1;
  --info-bg: #eaf3ff;
  --shadow: 0 4px 16px rgba(16, 42, 67, 0.08);

  /* Compatibilidade com variáveis existentes */
  --bg: var(--page-bg);
  --bg-soft: var(--surface-soft);
  --card: var(--surface);
  --panel: var(--surface);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border);
  --accent: var(--brand-blue);
  --primary: var(--brand-blue);
}

html { background: var(--page-bg) !important; }
body {
  background: var(--page-bg) !important;
  color: var(--text-primary) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* Cabeçalho e navegação mantêm identidade escura */
header,
.app-header,
.topbar,
.navbar,
.main-header,
[role="banner"] {
  background: var(--brand-navy) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.18) !important;
}

header *,
.app-header *,
.topbar *,
.navbar *,
.main-header *,
[role="banner"] * { color: inherit; }

nav:not(.tabs):not(.tab-list) {
  border-color: var(--border) !important;
}

/* Conteúdo e superfícies claras */
main,
.main,
.app-main,
.content,
.page-content,
.tab-content,
.view,
.screen,
section {
  color: var(--text-primary);
}

.card,
.panel,
.box,
.widget,
.stat-card,
.metric-card,
.dashboard-card,
.subject-card,
.topic-card,
.flashcard,
.quiz-card,
.question-card,
.theory-card,
.review-card,
.backup-card,
.modal-content,
dialog,
fieldset,
article {
  background: var(--surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
}

/* Evita que containers estruturais sem classe ganhem peso visual excessivo */
main article,
.tab-content article { border-radius: 14px; }

h1, h2, h3, h4, h5, h6,
.title, .section-title, .card-title, .topic-title, .subject-title {
  color: var(--brand-navy) !important;
}

p, li, label, legend, dd, dt,
.description, .subtitle, .helper-text, .meta, .caption,
.small, small {
  color: var(--text-secondary) !important;
}

/* Leitura prolongada */
.theory-content,
.theory-body,
.reading-panel,
.lesson-content,
.article-content,
.modal-theory,
[data-view="theory"] {
  max-width: 820px;
  margin-inline: auto;
  background: var(--surface) !important;
  color: #243447 !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px;
  padding: clamp(20px, 4vw, 36px) !important;
  box-shadow: var(--shadow);
}

.theory-content p,
.theory-body p,
.reading-panel p,
.lesson-content p,
.article-content p,
.modal-theory p,
[data-view="theory"] p {
  color: #243447 !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  max-width: 75ch;
}

/* Apenas uma ação primária visual por contexto */
button,
.button,
.btn,
[role="button"],
input[type="button"],
input[type="submit"] {
  min-height: 44px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
}

.btn-primary,
.button-primary,
.primary,
button.primary,
input[type="submit"] {
  background: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.button-primary:hover,
.primary:hover,
button.primary:hover,
input[type="submit"]:hover {
  background: var(--brand-blue-hover) !important;
  border-color: var(--brand-blue-hover) !important;
}

.btn-secondary,
.button-secondary,
.secondary,
button:not(.primary):not(.btn-primary):not(.button-primary) {
  background: #ffffff !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--brand-navy) !important;
}

/* Foco visível para teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #ffbf00 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(11, 44, 85, .20) !important;
}

/* Formulários */
input,
select,
textarea {
  min-height: 44px;
  background: #ffffff !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 9px;
  font-size: 16px !important;
}

input::placeholder,
textarea::placeholder { color: #6d7e90 !important; opacity: 1; }

/* Abas e filtros */
.tabs,
.tab-list,
.filters,
.segmented-control {
  background: var(--surface-soft) !important;
  border: 1px solid var(--border) !important;
}

.tab,
.tab-button,
[role="tab"] {
  min-height: 44px;
  color: var(--text-secondary) !important;
  background: transparent !important;
}

.tab.active,
.tab-button.active,
[role="tab"][aria-selected="true"] {
  color: var(--brand-navy) !important;
  background: #ffffff !important;
  border-color: var(--brand-blue) !important;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(16,42,67,.08);
}

/* Progresso */
progress,
.progress,
.progress-track,
.progress-bar-bg { background: #dfe8f1 !important; }

progress::-webkit-progress-value,
.progress-fill,
.progress-bar,
.progress-value { background: var(--brand-green) !important; }

/* Status com texto + cor suave */
.status-not-started,
.status-nao-iniciado,
[data-status="nao-iniciado"] {
  background: #eef2f6 !important;
  color: #435569 !important;
  border-color: #cbd6e2 !important;
}
.status-studying,
.status-estudando,
[data-status="estudando"] {
  background: var(--info-bg) !important;
  color: #0b579f !important;
  border-color: #8dbce8 !important;
}
.status-review,
.status-revisao,
[data-status="revisao"] {
  background: var(--warning-bg) !important;
  color: #765000 !important;
  border-color: #e0bd4e !important;
}
.status-complete,
.status-concluido,
[data-status="concluido"] {
  background: var(--success-bg) !important;
  color: #11614f !important;
  border-color: #73bba8 !important;
}

/* Feedback correto/incorreto */
.correct, .is-correct, .answer-correct {
  background: var(--success-bg) !important;
  color: #155d40 !important;
  border-color: #42a97a !important;
}
.incorrect, .is-incorrect, .answer-incorrect {
  background: var(--danger-bg) !important;
  color: #842832 !important;
  border-color: #d56670 !important;
}

/* Flashcards e questões em foco único */
.flashcard,
.flash-card,
.question-card,
.quiz-card {
  background: #ffffff !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-strong) !important;
}

.flashcard-question,
.flash-question,
.question-text,
.quiz-question {
  color: var(--brand-navy) !important;
  font-size: clamp(1.15rem, 2.5vw, 1.5rem) !important;
  line-height: 1.45 !important;
}

.answer-option,
.option,
.quiz-option {
  min-height: 48px;
  background: #ffffff !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-strong) !important;
}
.answer-option:hover,
.option:hover,
.quiz-option:hover { background: var(--info-bg) !important; border-color: var(--brand-blue) !important; }

/* Modais */
.modal,
.dialog-backdrop,
[role="dialog"]::backdrop { background: rgba(11,44,85,.42) !important; }

/* Tabelas */
table { background: #ffffff !important; color: var(--text-primary) !important; }
th { background: var(--surface-soft) !important; color: var(--brand-navy) !important; }
td, th { border-color: var(--border) !important; }

/* Links */
a { color: #075ca8; }
a:hover { color: #084b85; }

/* Rodapé pode permanecer escuro */
footer,
.app-footer {
  background: var(--brand-navy) !important;
  color: #ffffff !important;
}
footer *, .app-footer * { color: inherit !important; }

/* Telas pequenas */
@media (max-width: 720px) {
  body { font-size: 16px !important; }
  .card, .panel, .box, article { border-radius: 12px; }
  .theory-content, .theory-body, .reading-panel, [data-view="theory"] { padding: 20px !important; }
  button, .button, .btn, [role="button"], input, select { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}