/* ==========================================================
   theme.css — Checkup IRPF
   Núcleo visual compartilhado
   Função:
   - tokens de cor, tipografia, espaçamento e superfícies
   - base de fundo e contraste
   - componentes visuais compartilhados (card, CTA, botão, details)
   - comportamento neutro para S-R, G-E, SR-ATD e GE-ATD

   NÃO colocar aqui:
   - layout específico de template
   - grid específico de página
   - hubnav / footer estrutural
   ========================================================== */

/* ==========================================================
   1) TOKENS GLOBAIS
   ========================================================== */
:root {
  color-scheme: dark;

  /* Marca */
  --rb-brand-1: #1B676B;
  --rb-brand-2: #519548;
  --rb-brand-3: #88C425;
  --rb-brand-4: #BEF202;
  --rb-brand-5: #EAFDE6;

  /* Fundos */
  --rb-bg: #07131d;
  --rb-bg-elev: #0d1a27;
  --rb-bg-soft: #102131;
  --rb-surface: rgba(11, 20, 31, 0.78);
  --rb-surface-strong: rgba(14, 27, 40, 0.92);
  --rb-surface-soft: rgba(255, 255, 255, 0.04);
  --rb-overlay: rgba(7, 19, 29, 0.76);

  /* Auras / ambiência */
  --rb-bg-glow-1: rgba(27, 103, 107, 0.30);
  --rb-bg-glow-2: rgba(81, 149, 72, 0.18);
  --rb-bg-glow-3: rgba(136, 196, 37, 0.12);
  --rb-bg-glow-4: rgba(234, 253, 230, 0.035);

  /* Texto */
  --rb-text: #f4fbfb;
  --rb-text-soft: rgba(232, 243, 244, 0.91);
  --rb-text-muted: rgba(208, 225, 227, 0.70);

  /* Bordas / sombras */
  --rb-border: rgba(234, 253, 230, 0.085);
  --rb-border-strong: rgba(234, 253, 230, 0.14);
  --rb-border-accent: rgba(190, 242, 2, 0.18);

  --rb-shadow-sm: 0 12px 28px rgba(0, 0, 0, 0.18);
  --rb-shadow-md: 0 20px 44px rgba(0, 0, 0, 0.25);
  --rb-shadow-lg: 0 32px 84px rgba(0, 0, 0, 0.34);

  /* Links */
  --rb-link: #dfffa3;
  --rb-link-hover: #f3ffcf;

  /* Botões */
  --rb-btn-bg: linear-gradient(135deg, #BEF202 0%, #88C425 34%, #519548 100%);
  --rb-btn-text: #071117;
  --rb-btn-border: rgba(190, 242, 2, 0.16);
  --rb-btn-shadow: 0 16px 34px rgba(11, 26, 18, 0.34);

  --rb-btn-secondary-bg: rgba(255, 255, 255, 0.03);
  --rb-btn-secondary-text: var(--rb-text);
  --rb-btn-secondary-border: var(--rb-border);

  /* Toggle */
  --rb-toggle-bg: rgba(255, 255, 255, 0.05);
  --rb-toggle-border: rgba(234, 253, 230, 0.12);
  --rb-toggle-text: var(--rb-text);

  /* Notices / footer */
  --rb-notice-bg: linear-gradient(
    135deg,
    rgba(27, 103, 107, 0.20),
    rgba(81, 149, 72, 0.09)
  );
  --rb-notice-border: rgba(190, 242, 2, 0.22);
  --rb-notice-text: #eef8f8;

  --rb-footer-bg: rgba(255, 255, 255, 0.025);
  --rb-footer-text: rgba(232, 243, 244, 0.84);

  /* Espaçamento */
  --rb-space-1: 0.25rem;
  --rb-space-2: 0.5rem;
  --rb-space-3: 0.75rem;
  --rb-space-4: 1rem;
  --rb-space-5: 1.25rem;
  --rb-space-6: 1.5rem;
  --rb-space-7: 2rem;
  --rb-space-8: 2.5rem;
  --rb-space-9: 3rem;

  /* Radius */
  --rb-radius-sm: 10px;
  --rb-radius-md: 14px;
  --rb-radius-lg: 18px;
  --rb-radius-xl: 24px;
  --rb-radius-pill: 999px;

  /* Tipografia */
  --rb-font-base: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rb-font-size-body: 1rem;
  --rb-font-size-small: 0.9375rem;
  --rb-font-size-xs: 0.8125rem;
  --rb-font-size-h1: clamp(2.3rem, 4.8vw, 3.9rem);
  --rb-font-size-h2: clamp(1.28rem, 2vw, 1.78rem);
  --rb-font-size-h3: clamp(1.06rem, 1.7vw, 1.28rem);
  --rb-line-body: 1.72;
  --rb-line-tight: 1.12;

  /* Largura */
  --rb-wrap-max: 1100px;

  /* Foco */
  --rb-focus-ring: 0 0 0 3px rgba(190, 242, 2, 0.26);
}

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

  --rb-bg: #f4fbfa;
  --rb-bg-elev: #ffffff;
  --rb-bg-soft: #edf6f4;
  --rb-surface: rgba(255, 255, 255, 0.84);
  --rb-surface-strong: rgba(255, 255, 255, 0.96);
  --rb-surface-soft: rgba(27, 103, 107, 0.03);
  --rb-overlay: rgba(244, 251, 250, 0.72);

  --rb-bg-glow-1: rgba(27, 103, 107, 0.11);
  --rb-bg-glow-2: rgba(81, 149, 72, 0.08);
  --rb-bg-glow-3: rgba(136, 196, 37, 0.05);
  --rb-bg-glow-4: rgba(255, 255, 255, 0.42);

  --rb-text: #102126;
  --rb-text-soft: #244047;
  --rb-text-muted: #5b7880;

  --rb-border: rgba(16, 33, 38, 0.09);
  --rb-border-strong: rgba(16, 33, 38, 0.14);
  --rb-border-accent: rgba(27, 103, 107, 0.14);

  --rb-shadow-sm: 0 10px 24px rgba(12, 34, 39, 0.06);
  --rb-shadow-md: 0 16px 34px rgba(12, 34, 39, 0.09);
  --rb-shadow-lg: 0 24px 50px rgba(12, 34, 39, 0.12);

  --rb-link: #1B676B;
  --rb-link-hover: #0f4f52;

  --rb-btn-bg: linear-gradient(135deg, #1B676B 0%, #519548 100%);
  --rb-btn-text: #ffffff;
  --rb-btn-border: rgba(16, 33, 38, 0.12);
  --rb-btn-shadow: 0 12px 26px rgba(12, 34, 39, 0.12);

  --rb-btn-secondary-bg: rgba(255, 255, 255, 0.76);
  --rb-btn-secondary-text: var(--rb-text);
  --rb-btn-secondary-border: rgba(16, 33, 38, 0.10);

  --rb-toggle-bg: rgba(255, 255, 255, 0.88);
  --rb-toggle-border: rgba(16, 33, 38, 0.12);
  --rb-toggle-text: #102126;

  --rb-notice-bg: linear-gradient(
    135deg,
    rgba(27, 103, 107, 0.07),
    rgba(81, 149, 72, 0.05)
  );
  --rb-notice-border: rgba(27, 103, 107, 0.16);
  --rb-notice-text: #102126;

  --rb-footer-bg: rgba(27, 103, 107, 0.04);
  --rb-footer-text: rgba(16, 33, 38, 0.82);

  --rb-focus-ring: 0 0 0 3px rgba(27, 103, 107, 0.18);
}

/* ==========================================================
   2) RESET E BASE
   ========================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  min-height: 100%;
  background: var(--rb-bg);
  color: var(--rb-text);
}

body {
  margin: 0;
  font-family: var(--rb-font-base);
  font-size: var(--rb-font-size-body);
  line-height: var(--rb-line-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1240px 760px at 8% -8%, var(--rb-bg-glow-1), transparent 56%),
    radial-gradient(980px 620px at 100% 0%, var(--rb-bg-glow-2), transparent 54%),
    radial-gradient(780px 520px at 50% 100%, var(--rb-bg-glow-3), transparent 60%),
    radial-gradient(420px 280px at 50% 18%, var(--rb-bg-glow-4), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--rb-brand-1) 5%, transparent), transparent 32%),
    var(--rb-bg);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

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

button {
  cursor: pointer;
}

main,
section,
article,
aside,
nav,
footer,
header {
  border-color: var(--rb-border);
}

main {
  position: relative;
  z-index: 1;
}

::selection {
  background: color-mix(in srgb, var(--rb-brand-3) 32%, transparent);
  color: var(--rb-text);
}

/* ==========================================================
   3) TIPOGRAFIA BASE
   ========================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--rb-space-3);
  color: var(--rb-text);
  line-height: var(--rb-line-tight);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h1 {
  font-size: var(--rb-font-size-h1);
}

h2 {
  font-size: var(--rb-font-size-h2);
}

h3 {
  font-size: var(--rb-font-size-h3);
}

p,
li,
dd {
  margin: 0 0 0.82rem;
  color: var(--rb-text-soft);
}

small,
.rb-muted,
.muted,
.text-muted {
  color: var(--rb-text-muted) !important;
}

strong,
b,
th,
summary {
  color: var(--rb-text);
}

.rb-kicker {
  margin: 0 0 var(--rb-space-3);
  color: var(--rb-brand-4);
  font-size: var(--rb-font-size-xs);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.rb-lead {
  font-size: clamp(1.08rem, 1.25vw, 1.16rem);
  line-height: 1.68;
  color: var(--rb-text);
  max-width: 62ch;
}

.rb-support {
  color: var(--rb-text-soft);
}

.card h2,
.rb-cta-box h2 {
  letter-spacing: -0.04em;
}

.card h2 {
  font-size: clamp(1.18rem, 1.5vw, 1.48rem);
}

.card h3 {
  font-size: clamp(1.02rem, 1.25vw, 1.16rem);
}

/* ==========================================================
   4) LINKS E ESTADOS
   ========================================================== */
a {
  color: var(--rb-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
  transition:
    color 0.15s ease,
    opacity 0.15s ease,
    text-decoration-color 0.15s ease;
}

a:hover {
  color: var(--rb-link-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: var(--rb-focus-ring);
  border-radius: var(--rb-radius-sm);
}

/* ==========================================================
   5) ELEMENTOS NATIVOS
   ========================================================== */
hr {
  border: 0;
  border-top: 1px solid var(--rb-border);
  margin: var(--rb-space-7) 0;
}

ul,
ol {
  padding-left: 1.2rem;
}

li > ul,
li > ol {
  margin-top: var(--rb-space-2);
}

blockquote {
  margin: var(--rb-space-5) 0;
  padding: var(--rb-space-4) var(--rb-space-5);
  border-left: 4px solid var(--rb-brand-2);
  background: color-mix(in srgb, var(--rb-bg-soft) 88%, transparent);
  color: var(--rb-text-soft);
  border-radius: 0 var(--rb-radius-md) var(--rb-radius-md) 0;
}

code,
pre {
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-sm);
  background: color-mix(in srgb, var(--rb-bg-soft) 82%, transparent);
  color: var(--rb-text);
}

code {
  padding: 0.15rem 0.4rem;
}

pre {
  overflow: auto;
  padding: var(--rb-space-4) var(--rb-space-5);
}

/* ==========================================================
   6) FORMULÁRIOS
   ========================================================== */
input,
textarea,
select {
  width: 100%;
  color: var(--rb-text);
  background: color-mix(in srgb, var(--rb-bg-elev) 92%, transparent);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-sm);
  padding: 0.8rem 0.95rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

input::placeholder,
textarea::placeholder {
  color: var(--rb-text-muted);
}

/* ==========================================================
   7) TABELAS
   ========================================================== */
table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--rb-space-5) 0;
}

table,
th,
td {
  border-color: var(--rb-border);
}

th,
td {
  border: 1px solid var(--rb-border);
  padding: 0.75rem 0.85rem;
  text-align: left;
}

th {
  background: color-mix(in srgb, var(--rb-brand-1) 12%, var(--rb-bg-elev));
  color: var(--rb-text);
}

td {
  background: color-mix(in srgb, var(--rb-bg-elev) 88%, transparent);
  color: var(--rb-text-soft);
}

/* ==========================================================
   8) FAQ / DETAILS
   ========================================================== */
details {
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-md);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--rb-bg-elev) 88%, transparent),
      color-mix(in srgb, var(--rb-brand-1) 3%, transparent)
    ),
    var(--rb-surface);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    var(--rb-shadow-sm);
}

details + details {
  margin-top: var(--rb-space-3);
}

summary {
  cursor: pointer;
  list-style: none;
  padding: var(--rb-space-4) var(--rb-space-5);
  font-weight: 700;
}

summary::-webkit-details-marker {
  display: none;
}

details > *:not(summary) {
  padding: 0 var(--rb-space-5) var(--rb-space-5);
}

/* ==========================================================
   9) COMPONENTES BASE
   ========================================================== */
.card {
  position: relative;
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-lg);
  background:
    radial-gradient(
      circle at top left,
      color-mix(in srgb, var(--rb-brand-1) 10%, transparent),
      transparent 40%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--rb-bg-elev) 82%, transparent),
      color-mix(in srgb, var(--rb-brand-1) 4%, transparent)
    ),
    var(--rb-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    var(--rb-shadow-sm);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  padding: var(--rb-space-5);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-1px);
    border-color: var(--rb-border-strong);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.035),
      var(--rb-shadow-md);
  }
}

.rb-cta-box {
  position: relative;
  border: 1px solid var(--rb-border-accent);
  border-radius: var(--rb-radius-xl);
  background:
    radial-gradient(
      520px 220px at top left,
      color-mix(in srgb, var(--rb-brand-1) 20%, transparent),
      transparent 55%
    ),
    radial-gradient(
      360px 200px at bottom right,
      color-mix(in srgb, var(--rb-brand-3) 12%, transparent),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--rb-bg-elev) 92%, transparent),
      color-mix(in srgb, var(--rb-brand-2) 4%, transparent)
    ),
    var(--rb-surface-strong);
  box-shadow: var(--rb-shadow-md);
  overflow: hidden;
  padding: var(--rb-space-6);
}

.rb-cta-box::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 34%);
}

.rb-btn,
a.rb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.85rem 1.18rem;
  border: 1px solid var(--rb-btn-border);
  border-radius: var(--rb-radius-pill);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}

.rb-btn:hover,
a.rb-btn:hover {
  transform: translateY(-1px);
}

.rb-btn-primary,
a.rb-btn-primary {
  background: var(--rb-btn-bg);
  color: var(--rb-btn-text);
  box-shadow: var(--rb-btn-shadow);
}

.rb-btn-primary:hover,
a.rb-btn-primary:hover {
  color: var(--rb-btn-text);
}

.rb-btn-secondary,
a.rb-btn-secondary {
  background: var(--rb-btn-secondary-bg);
  color: var(--rb-btn-secondary-text);
  border-color: var(--rb-btn-secondary-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.rb-btn-secondary:hover,
a.rb-btn-secondary:hover {
  color: var(--rb-btn-secondary-text);
  background: color-mix(in srgb, var(--rb-bg-elev) 90%, transparent);
}

.rb-related-list {
  margin: 0;
  padding-left: 1.15rem;
}

.rb-related-list li + li {
  margin-top: var(--rb-space-2);
}

/* ==========================================================
   10) UTILITÁRIOS VISUAIS
   ========================================================== */
.rb-surface-soft {
  background: color-mix(in srgb, var(--rb-bg-soft) 80%, transparent);
}

.rb-notice {
  border: 1px solid var(--rb-notice-border);
  border-radius: var(--rb-radius-md);
  background: var(--rb-notice-bg);
  color: var(--rb-notice-text);
  padding: var(--rb-space-4) var(--rb-space-5);
  box-shadow: var(--rb-shadow-sm);
}

.rb-stack-xs > * + * {
  margin-top: var(--rb-space-2);
}

.rb-stack-sm > * + * {
  margin-top: var(--rb-space-3);
}

.rb-stack-md > * + * {
  margin-top: var(--rb-space-4);
}

.rb-stack-lg > * + * {
  margin-top: var(--rb-space-6);
}

/* ==========================================================
   11) ACESSIBILIDADE E MOVIMENTO
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================
   12) AJUSTES MOBILE GERAIS
   ========================================================== */
@media (max-width: 640px) {
  .card,
  .rb-cta-box {
    padding: var(--rb-space-4);
  }

  .rb-btn,
  a.rb-btn {
    width: 100%;
  }

  th,
  td {
    padding: 0.65rem 0.7rem;
  }
}