/* ARA Editora — Light / Dark theme tokens */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  --black: #050505;
  --graphite: #111111;
  --white: #ffffff;
  --gray: #bdbdbd;
  --gray-dim: rgba(189, 189, 189, 0.6);
  --gray-faint: rgba(189, 189, 189, 0.15);
  --border: rgba(189, 189, 189, 0.12);

  --overlay-strong: rgba(5, 5, 5, 0.92);
  --overlay-medium: rgba(5, 5, 5, 0.95);
  --surface-elevated: rgba(17, 17, 17, 0.98);
  --surface-muted: rgba(17, 17, 17, 0.92);
  --hover-bg: rgba(255, 255, 255, 0.04);
  --hover-bg-strong: rgba(255, 255, 255, 0.05);
  --hero-logo-bg: rgba(255, 255, 255, 0.96);
  --hero-logo-border: rgba(255, 255, 255, 0.08);
  --panel-tint: rgba(5, 5, 5, 0.35);
  --gradient-fade: rgba(0, 0, 0, 0.5);
  --shadow-sm: rgba(0, 0, 0, 0.35);
  --shadow-md: rgba(0, 0, 0, 0.4);
  --shadow-lg: rgba(0, 0, 0, 0.5);
  --logo-bg: #ffffff;
  --blog-card-bg: #111111;
  --editor-bg: #0a0a0a;
  --editor-toolbar-bg: #111111;
  --success-text: #9be7a0;
  --error-text: #f0a6a6;
  --badge-results-bg: rgba(255, 255, 255, 0.06);
  --surface-subtle: rgba(255, 255, 255, 0.02);
  --alert-success-border: rgba(255, 255, 255, 0.35);
  --alert-error-border: rgba(189, 189, 189, 0.5);
  --highlight-bg: rgba(189, 189, 189, 0.06);
  --highlight-border: rgba(189, 189, 189, 0.35);
  --progress-track: rgba(189, 189, 189, 0.12);
  --modal-divider: rgba(255, 255, 255, 0.06);
  --modal-backdrop: rgba(0, 0, 0, 0.88);

  --hero-text: #ffffff;
  --hero-text-muted: rgba(255, 255, 255, 0.78);
  --hero-scrim: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 42%, var(--black) 100%);
}

[data-theme="light"] {
  color-scheme: light;

  --black: #f5f4f0;
  --graphite: #ffffff;
  --white: #141414;
  --gray: #5c5c5c;
  --gray-dim: rgba(20, 20, 20, 0.62);
  --gray-faint: rgba(20, 20, 20, 0.08);
  --border: rgba(20, 20, 20, 0.12);

  --overlay-strong: rgba(245, 244, 240, 0.92);
  --overlay-medium: rgba(245, 244, 240, 0.96);
  --surface-elevated: rgba(255, 255, 255, 0.98);
  --surface-muted: rgba(255, 255, 255, 0.94);
  --hover-bg: rgba(20, 20, 20, 0.05);
  --hover-bg-strong: rgba(20, 20, 20, 0.07);
  --hero-logo-bg: rgba(255, 255, 255, 0.98);
  --hero-logo-border: rgba(20, 20, 20, 0.08);
  --panel-tint: rgba(255, 255, 255, 0.72);
  --gradient-fade: rgba(0, 0, 0, 0.06);
  --shadow-sm: rgba(0, 0, 0, 0.08);
  --shadow-md: rgba(0, 0, 0, 0.12);
  --shadow-lg: rgba(0, 0, 0, 0.18);
  --logo-bg: #141414;
  --blog-card-bg: #f5f4f0;
  --editor-bg: #ffffff;
  --editor-toolbar-bg: #f0efeb;
  --success-text: #1b7a3a;
  --error-text: #b33a3a;
  --badge-results-bg: rgba(20, 20, 20, 0.06);
  --surface-subtle: rgba(20, 20, 20, 0.03);
  --alert-success-border: rgba(27, 122, 58, 0.35);
  --alert-error-border: rgba(179, 58, 58, 0.35);
  --highlight-bg: rgba(20, 20, 20, 0.04);
  --highlight-border: rgba(20, 20, 20, 0.18);
  --progress-track: rgba(20, 20, 20, 0.1);
  --modal-divider: rgba(20, 20, 20, 0.08);
  --modal-backdrop: rgba(0, 0, 0, 0.5);

  --hero-text: #ffffff;
  --hero-text-muted: rgba(255, 255, 255, 0.82);
  --hero-scrim: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 45%, var(--black) 100%);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--hover-bg);
  color: var(--gray);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}

.theme-toggle:hover {
  border-color: var(--gray-dim);
  color: var(--white);
  background: var(--hover-bg-strong);
}

.theme-toggle__icon {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle__icon svg {
  width: 100%;
  height: 100%;
}

.theme-toggle__icon--sun,
[data-theme="light"] .theme-toggle__icon--moon { display: none; }

[data-theme="light"] .theme-toggle__icon--sun { display: inline-flex; }

.theme-toggle--icon-only {
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}

.theme-toggle--sidebar {
  width: 100%;
  justify-content: center;
}

.nav__theme {
  display: inline-flex;
  align-items: center;
  margin-left: 0.25rem;
}

.admin-sidebar__footer .theme-toggle {
  margin-bottom: 0.25rem;
}

html.theme-switching,
html.theme-switching * {
  transition: background-color 0.28s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.28s ease !important;
}

.logo-mark {
  background: var(--logo-bg);
  padding: 3px 6px;
  border-radius: 4px;
}

[data-theme="light"] .logo-mark,
[data-theme="light"] .nav__logo img,
[data-theme="light"] .story-studio__brand img {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

[data-theme="light"] .nav.scrolled {
  background: var(--overlay-strong);
  border-color: var(--border);
}

[data-theme="light"] .nav__logo span,
[data-theme="light"] .nav__access {
  color: var(--gray);
}

[data-theme="light"] .nav__links a {
  color: var(--gray);
}

[data-theme="light"] .nav__links a:hover,
[data-theme="light"] .nav__links a.active {
  color: var(--white);
}

[data-theme="light"] .nav__toggle span {
  background: var(--white);
}

/* Home / histórias: nav transparente ficava sobre o fundo claro do body */
[data-theme="light"] .page-home-showcase .nav:not(.scrolled),
[data-theme="light"] .page-historys-hero .nav:not(.scrolled) {
  background: var(--overlay-strong);
  border-bottom-color: var(--border);
  backdrop-filter: blur(20px);
}

[data-theme="light"] .page-home-showcase .nav:not(.scrolled) .nav__logo span,
[data-theme="light"] .page-home-showcase .nav:not(.scrolled) .nav__links a,
[data-theme="light"] .page-home-showcase .nav:not(.scrolled) .nav__access,
[data-theme="light"] .page-historys-hero .nav:not(.scrolled) .nav__logo span,
[data-theme="light"] .page-historys-hero .nav:not(.scrolled) .nav__links a,
[data-theme="light"] .page-historys-hero .nav:not(.scrolled) .nav__access {
  color: var(--gray);
  text-shadow: none;
}

[data-theme="light"] .page-home-showcase .nav:not(.scrolled) .nav__links a:hover,
[data-theme="light"] .page-home-showcase .nav:not(.scrolled) .nav__links a.active,
[data-theme="light"] .page-historys-hero .nav:not(.scrolled) .nav__links a:hover,
[data-theme="light"] .page-historys-hero .nav:not(.scrolled) .nav__links a.active {
  color: var(--white);
}

[data-theme="light"] .page-home-showcase .nav:not(.scrolled) .nav__links a::after,
[data-theme="light"] .page-historys-hero .nav:not(.scrolled) .nav__links a::after {
  background: var(--white);
}

[data-theme="light"] .page-home-showcase .nav:not(.scrolled) .nav__toggle span,
[data-theme="light"] .page-historys-hero .nav:not(.scrolled) .nav__toggle span {
  background: var(--white);
}

[data-theme="light"] .page-home-showcase .nav:not(.scrolled) .theme-toggle,
[data-theme="light"] .page-historys-hero .nav:not(.scrolled) .theme-toggle {
  color: var(--gray);
  background: var(--hover-bg);
  border-color: var(--border);
}

[data-theme="light"] .page-home-showcase .nav:not(.scrolled) .theme-toggle:hover,
[data-theme="light"] .page-historys-hero .nav:not(.scrolled) .theme-toggle:hover {
  color: var(--white);
  background: var(--hover-bg-strong);
  border-color: var(--gray-dim);
}

[data-theme="light"] .page-home-showcase .nav:not(.scrolled) .nav__logo img,
[data-theme="light"] .page-historys-hero .nav:not(.scrolled) .nav__logo img {
  background: transparent;
}

[data-theme="light"] .theme-toggle {
  color: var(--gray);
  background: var(--hover-bg);
  border-color: var(--border);
}

[data-theme="light"] .theme-toggle:hover {
  color: var(--white);
  border-color: var(--gray-dim);
}