/**
 * Notícias Mobile — Design Tokens (Light / Dark)
 * Primária: verde #99cc00 (estável nos dois temas)
 * Ver docs/STYLE-GUIDE.md → seção Temas (Light / Dark).
 */

:root,
[data-theme="light"] {
  /* Tipografia */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* Primária (não muda no dark) */
  --color-primary: #99cc00;
  --color-primary-dark: #7aa300;
  --color-primary-darker: #669900;
  --color-primary-light: #eff7d8;
  --color-primary-rgb: 153, 204, 0;
  --color-on-primary: #333333;

  /* Superfícies e texto — light */
  --color-bg: #e6e8eb;
  --color-surface: #ffffff;
  --color-surface-2: #f8f8f8;
  --color-heading: #111111;
  --color-text: #444444;
  --color-text-muted: #787878;
  --color-border: #dcdcdc;
  --color-inverse: #111111;
  --color-inverse-text: #ffffff;
  --color-footer-bg: #000000;
  --color-footer-text: #ffffff;
  --color-dropdown-bg: var(--color-primary);
  --color-offcanvas-bg: #ffffff;
  --color-input-bg: #ffffff;
  --color-input-border: #dcdcdc;
  --color-modal-bg: #ffffff;
  --color-shadow: rgba(0, 0, 0, 0.15);

  /* Alias legado — branco fixo (ícones/botões sobre primária) */
  --color-white: #ffffff;
}

[data-theme="dark"] {
  --color-bg: #121212;
  --color-surface: #1e1e1e;
  --color-surface-2: #2a2a2a;
  --color-heading: #f0f0f0;
  --color-text: #c8c8c8;
  --color-text-muted: #9a9a9a;
  --color-border: #3a3a3a;
  --color-inverse: #0a0a0a;
  --color-inverse-text: #f0f0f0;
  --color-footer-bg: #0a0a0a;
  --color-footer-text: #c8c8c8;
  --color-dropdown-bg: var(--color-primary);
  --color-offcanvas-bg: #161616;
  --color-input-bg: #2a2a2a;
  --color-input-border: #3a3a3a;
  --color-modal-bg: #1e1e1e;
  --color-shadow: rgba(0, 0, 0, 0.45);

  /* Primária e on-primary explícitos (inalterados) */
  --color-primary: #99cc00;
  --color-primary-dark: #7aa300;
  --color-primary-darker: #669900;
  --color-primary-light: #eff7d8;
  --color-primary-rgb: 153, 204, 0;
  --color-on-primary: #333333;
  --color-white: #ffffff;
}

/* ---------- Theme toggle (header) ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-inverse-text);
  cursor: pointer;
  line-height: 1;
  vertical-align: middle;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-inverse-text);
}

.bg-primarytextcolor .theme-toggle,
.header-action-item .theme-toggle {
  color: var(--color-inverse-text);
}

.bg-primarytextcolor .theme-toggle:hover,
.bg-primarytextcolor .theme-toggle:focus,
.header-action-item .theme-toggle:hover,
.header-action-item .theme-toggle:focus {
  border-color: var(--color-primary);
  color: var(--color-inverse-text);
}

.theme-toggle .theme-icon-light,
.theme-toggle .theme-icon-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  opacity: 0.45;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.theme-toggle .theme-icon-dark {
  opacity: 1;
  background: rgba(255, 255, 255, 0.18);
  color: var(--color-inverse-text);
}

[data-theme="dark"] .theme-toggle .theme-icon-dark {
  opacity: 0.45;
  background: transparent;
}

[data-theme="dark"] .theme-toggle .theme-icon-light {
  opacity: 1;
  background: rgba(255, 255, 255, 0.18);
  color: var(--color-inverse-text);
}

.theme-toggle i,
.theme-toggle svg.theme-toggle__icon {
  display: block;
  width: 20px;
  height: 20px;
  font-size: 18px;
  line-height: 1;
}
.theme-toggle svg.theme-toggle__icon {
  flex-shrink: 0;
}