/* Adaptative · identidade visual. Tokens de cor, tipografia e componentes de marca.
   Carregado antes dos estilos de cada página. Tema claro por padrão; o escuro segue o aparelho
   ou a escolha salva em theme.js (data-theme="light|dark" no elemento raiz). */
:root {
  --bg: #F2F6F4;
  --surface: #FFFFFF;
  --surface-2: #F7FAF9;
  --tint: #E3EEEA;
  --tint-warn: #FBEBDD;
  --line: #D5DFDB;
  --line-accent: #BBD6CE;
  --line-warn: #EBCBB5;
  --fg: #0B1B2B;
  --fg-2: #46585F;
  --accent: #0B6B5E;
  --accent-hover: #09564B;
  --accent-fg: #0B6B5E;
  --on-accent: #FFFFFF;
  --warn-fg: #9A4A2E;
  --danger: #A12B2B; --danger-bg: #FBE6E6; --on-danger: #FFFFFF;
  --amber: #F5B63D;
  --side-bg: #0B1B2B;
  --focus: #B97800;
  --shadow: 0 18px 42px rgba(11, 27, 43, .07);
  --logo-ink: #0B1B2B;
  --logo-accent: #0B6B5E;
  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
  /* nomes antigos, ainda usados pelas páginas */
  --ink: var(--fg); --muted: var(--fg-2); --paper: var(--bg);
  --mint: var(--accent); --mint-strong: var(--accent); --mint-soft: var(--tint);
  --plum: var(--accent); --plum-dark: var(--side-bg); --orange: var(--warn-fg);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1B2B; --surface: #13293D; --surface-2: #0F2234; --tint: #17324A; --tint-warn: #3A2A1A;
    --line: #25405A; --line-accent: #2E5A5A; --line-warn: #5A3E26;
    --fg: #F2F6F4; --fg-2: #A9BCC4; --accent: #5BE3C4; --accent-hover: #7AEBD1; --accent-fg: #5BE3C4;
    --on-accent: #0B1B2B; --warn-fg: #FFB48F; --side-bg: #08131F; --focus: #F5B63D;
    --danger: #FF9D9D; --danger-bg: #3C1E22; --on-danger: #0B1B2B;
    --shadow: 0 18px 42px rgba(0, 0, 0, .35);
    --logo-ink: #F2F6F4; --logo-accent: #5BE3C4; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B1B2B; --surface: #13293D; --surface-2: #0F2234; --tint: #17324A; --tint-warn: #3A2A1A;
  --line: #25405A; --line-accent: #2E5A5A; --line-warn: #5A3E26;
  --fg: #F2F6F4; --fg-2: #A9BCC4; --accent: #5BE3C4; --accent-hover: #7AEBD1; --accent-fg: #5BE3C4;
  --on-accent: #0B1B2B; --warn-fg: #FFB48F; --side-bg: #08131F; --focus: #F5B63D;
  --danger: #FF9D9D; --danger-bg: #3C1E22; --on-danger: #0B1B2B;
  --shadow: 0 18px 42px rgba(0, 0, 0, .35);
  --logo-ink: #F2F6F4; --logo-accent: #5BE3C4; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
body { background: var(--bg); color: var(--fg); font-family: var(--font-body); }
h1, h2, h3, .brand-name, .stat-value { font-family: var(--font-display); }
h1, h2, h3 { text-wrap: balance; }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--amber); color: #0B1B2B; }

/* Marca */
.logo-lockup { display: block; height: 32px; width: auto; aspect-ratio: 257.7 / 64; flex: none; }
.logo-mark { display: block; height: 30px; width: auto; aspect-ratio: 48 / 64; flex: none; }
.brand, .lesson-brand { display: inline-flex; align-items: center; color: var(--fg); text-decoration: none; }
.brand-tagline { margin: 4px 0 0; }

/* Controles com cor de destaque: o texto acompanha o tema */
.primary-button { color: var(--on-accent); box-shadow: 0 6px 18px rgba(11, 107, 94, .22); }
.secondary-button { background: var(--surface); color: var(--fg); }
.text-input, input[type="text"], input[type="email"], input[type="search"], input:not([type]), select, textarea { background: var(--surface); color: var(--fg); }
.dropzone { background: var(--surface-2); }
::placeholder { color: var(--fg-2); opacity: .8; }

/* Barra lateral e avisos: sempre escuros, com tokens próprios */
.toast, .skip-link {
  --fg: #F2F6F4; --fg-2: #B7C6CC; --accent-fg: #5BE3C4; --line: rgba(255, 255, 255, .12);
  --surface: rgba(255, 255, 255, .06); --surface-2: rgba(255, 255, 255, .04); --tint: rgba(91, 227, 196, .14);
}
.toast { background: var(--side-bg); color: #F2F6F4; border: 1px solid rgba(255, 255, 255, .12); }
.skip-link { background: var(--side-bg); color: #F2F6F4; }
.modal-backdrop { background: rgba(5, 12, 20, .62); }
.modal, .action-confirm { background: var(--surface); color: var(--fg); }

/* Alternador de tema */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--fg); font: 700 13px var(--font-body); cursor: pointer; }
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

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

/* Detalhes de composição */
.theme-toggle-label { white-space: nowrap; }
@media (max-width: 720px) { .topbar-actions .theme-toggle-label, .top-actions .theme-toggle-label, .topbar-right .theme-toggle-label, .lesson-top-actions .theme-toggle-label, .invite-topbar .theme-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
.lesson-link, .lesson-table a.lesson-link { color: var(--fg); font-weight: 700; text-decoration: none; }
.lesson-link:hover { color: var(--accent-fg); text-decoration: underline; }
a { color: var(--accent-fg); }
.lesson-action { background: var(--tint); color: var(--accent-fg); border-color: var(--line-accent); }
.lesson-action:hover { background: var(--tint); border-color: var(--accent); }
.lesson-action-review { background: var(--surface-2); color: var(--fg); border-color: var(--line); }

.skip-link { position: fixed; left: 16px; top: 8px; z-index: 100; padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; transform: translateY(-220%); }
.skip-link:focus { transform: none; }

/* Diálogo de confirmação (confirm-action.js), igual em todas as telas */
.action-confirm { width: min(480px, calc(100vw - 24px)); padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); color: var(--fg); box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .6); }
.action-confirm::backdrop { background: rgba(4, 10, 17, .62); backdrop-filter: blur(8px); }
.action-confirm[open] { animation: confirm-in .3s cubic-bezier(.2, .8, .2, 1); }
.action-confirm h2 { margin: 0 0 8px; font-size: 1.6rem; }
.action-confirm p { margin: 0 0 20px; color: var(--fg-2); line-height: 1.6; }
.action-confirm-buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.action-confirm-buttons button { min-height: 46px; padding: 0 22px; border-radius: 99px; font-weight: 700; cursor: pointer; }
@keyframes confirm-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }