/* MH2EDU Next — tokens.
   Escuro: mesma paleta do MH2IMG. Claro: o par sobre o mesmo accent. */

:root,
[data-theme="dark"] {
  --bg: #1a1a2e;
  --bg-accent: #16213e;
  --chrome: #10101a;
  --surface: #22243a;
  --surface-2: #1a1f3a;
  --modal-card: var(--surface);
  --modal-card-h: var(--surface-2);
  --modal-inset: var(--surface-2);
  --text: #e0e0e0;
  --muted: #a0a0a0;
  --faint: #8a93a8;
  --accent: #00aaff;
  --accent-hover: #0080cc;
  --accent-text: #ffffff;
  --accent-soft: rgba(0, 170, 255, 0.16);
  --ok: #2a9d8f;
  --ok-soft: rgba(42, 157, 143, 0.18);
  --warn: #f59e0b;
  --warn-soft: rgba(245, 158, 11, 0.18);
  --danger: #e63946;
  --danger-soft: rgba(230, 57, 70, 0.18);
  --info: #6fb7ff;
  --info-soft: rgba(111, 183, 255, 0.16);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --overlay: rgba(0, 0, 0, 0.6);
  --header-h: 52px;
  --footer-h: 40px;
  --sidebar-w: 228px;
  --sidebar-collapsed: 56px;
  --radius: 12px;
  --radius-sm: 8px;
  --focus: 0 0 0 3px rgba(0, 170, 255, 0.32);
  --font: "Figtree", "Segoe UI", system-ui, sans-serif;
  --scroll-thumb: #3a3e4c;
  --scroll-thumb-hover: #525766;
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #f0f2f5;
  --bg-accent: #dbeafe;
  --chrome: #ffffff;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --modal-card: var(--surface);
  --modal-card-h: var(--surface-2);
  --modal-inset: var(--surface-2);
  --text: #1a1a2e;
  --muted: #6b7280;
  --faint: #9ca3af;
  --accent: #00aaff;
  --accent-hover: #0080cc;
  --accent-text: #ffffff;
  --accent-soft: rgba(0, 170, 255, 0.12);
  --ok: #059669;
  --ok-soft: rgba(5, 150, 105, 0.14);
  --warn: #d97706;
  --warn-soft: rgba(217, 119, 6, 0.16);
  --danger: #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.14);
  --info: #00aaff;
  --info-soft: rgba(0, 170, 255, 0.12);
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.16);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  --overlay: rgba(0, 0, 0, 0.35);
  --focus: 0 0 0 3px rgba(0, 170, 255, 0.28);
  --scroll-thumb: #b4bac6;
  --scroll-thumb-hover: #8b93a3;
  color-scheme: light;
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

*:hover {
  scrollbar-color: var(--scroll-thumb) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 8px;
}

*:hover::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
}

*:hover::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

body:has(.app-shell) {
  height: 100dvh;
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

body.app-photo-bg {
  --app-photo-overlay-start: rgba(26, 26, 46, 0.72);
  --app-photo-overlay-end: rgba(26, 26, 46, 0.46);
  background-color: var(--bg);
  background-image:
    linear-gradient(
      145deg,
      var(--app-photo-overlay-start),
      var(--app-photo-overlay-end)
    ),
    var(--app-bg-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

[data-theme="light"] body.app-photo-bg {
  --app-photo-overlay-start: rgba(240, 242, 245, 0.72);
  --app-photo-overlay-end: rgba(240, 242, 245, 0.46);
}

@media (max-width: 860px) {
  body.app-photo-bg {
    background-attachment: scroll;
  }
}