:root{
  --bs-body-font-family: var(--font-sans, sans-serif);
  --bs-body-bg: var(--color-surface, #fff);
  --bs-body-color: var(--color-text-900, rgb(15,23,42));

  /* bordas */
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-lg: var(--radius-xl);

  /* links usam a cor de marca */
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: color-mix(in oklab, var(--bs-primary) 85%, black 15%);
}

.theme-dark{
  /* usa os mesmos tokens do dark do tokens.css */
  --bs-body-bg: var(--color-surface);           /* #0f2423 */
  --bs-body-color: var(--color-text-900);       /* texto claro */
  --bs-border-color: color-mix(in oklab, white 15%, var(--color-surface) 85%);
}

/* Botões – usam tokens do Design System */
.btn{ border-radius: var(--radius-2xl); }

/* Filled */
.btn-primary{
  --bs-btn-color:#fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);

  /* HOVER */
  --bs-btn-hover-bg: color-mix(in oklab, var(--bs-primary) 85%, black 15%);
  --bs-btn-hover-border-color: color-mix(in oklab, var(--bs-primary) 85%, black 15%);

  /* ACTIVE (clicando) – antes não estava definido, ficava azul */
  --bs-btn-active-bg: color-mix(in oklab, var(--bs-primary) 80%, black 20%);
  --bs-btn-active-border-color: color-mix(in oklab, var(--bs-primary) 80%, black 20%);

  /* FOCUS RING – use o seu verde, não o azul */
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);

  /* Disabled coerente (opcional) */
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-secondary{
  --bs-btn-color:#fff;
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: color-mix(in oklab, var(--bs-secondary) 85%, black 15%);
  --bs-btn-hover-border-color: color-mix(in oklab, var(--bs-secondary) 85%, black 15%);
}

.btn-success{
  --bs-btn-color:#fff;
  --bs-btn-bg: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);

  --bs-btn-hover-bg: color-mix(in oklab, var(--bs-success) 85%, black 15%);
  --bs-btn-hover-border-color: color-mix(in oklab, var(--bs-success) 85%, black 15%);

  --bs-btn-active-bg: color-mix(in oklab, var(--bs-success) 80%, black 20%);
  --bs-btn-active-border-color: color-mix(in oklab, var(--bs-success) 80%, black 20%);

  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
}

.btn-danger{
  --bs-btn-color:#fff;
  --bs-btn-bg: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-bg: color-mix(in oklab, var(--bs-danger) 85%, black 15%);
  --bs-btn-hover-border-color: color-mix(in oklab, var(--bs-danger) 85%, black 15%);
}

.btn-info{
  --bs-btn-color:#fff;
  --bs-btn-bg: var(--bs-info);
  --bs-btn-border-color: var(--bs-info);
  --bs-btn-hover-bg: color-mix(in oklab, var(--bs-info) 85%, black 15%);
  --bs-btn-hover-border-color: color-mix(in oklab, var(--bs-info) 85%, black 15%);
}

.btn-warning{
  /* warning costuma ter contraste melhor com texto escuro */
  --bs-btn-color:#111;
  --bs-btn-bg: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-bg: color-mix(in oklab, var(--bs-warning) 85%, black 15%);
  --bs-btn-hover-border-color: color-mix(in oklab, var(--bs-warning) 85%, black 15%);
}

/* Outline */
.btn-outline-primary{
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: color-mix(in oklab, var(--bs-primary) 80%, black 20%);
  --bs-btn-active-border-color: color-mix(in oklab, var(--bs-primary) 80%, black 20%);
  --bs-btn-focus-shadow-rgb: 11,143,172;
}

.btn-outline-secondary{
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
}

.btn-outline-success{
  --bs-btn-color: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-bg: var(--bs-success);
  --bs-btn-hover-border-color: var(--bs-success);
  --bs-btn-hover-color: #fff;
}

.btn-outline-danger{
  --bs-btn-color: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-bg: var(--bs-danger);
  --bs-btn-hover-border-color: var(--bs-danger);
  --bs-btn-hover-color: #fff;
}

.btn-outline-info{
  --bs-btn-color: var(--bs-info);
  --bs-btn-border-color: var(--bs-info);
  --bs-btn-hover-bg: var(--bs-info);
  --bs-btn-hover-border-color: var(--bs-info);
  --bs-btn-hover-color: #fff;
}

.btn-outline-warning{
  --bs-btn-color: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-bg: var(--bs-warning);
  --bs-btn-hover-border-color: var(--bs-warning);
  --bs-btn-hover-color: #111;
}

/* estilo “ghost” com a primária */
.btn-ghost{
  color: var(--bs-primary);
  background: color-mix(in oklab, var(--bs-primary) 10%, transparent 90%);
  border-color: transparent;
}

/* dark: botão claro em cartões escuros */
.theme-dark .btn-light{
  --bs-btn-color: var(--color-text-900);
  --bs-btn-bg: var(--color-card);
  --bs-btn-border-color: var(--color-card);
  --bs-btn-hover-bg: color-mix(in oklab, var(--color-card) 85%, white 15%);
  --bs-btn-hover-border-color: color-mix(in oklab, var(--color-card) 85%, white 15%);
}

/* Cards */
.card{
  border:0;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-elev-1);
  background: var(--color-card);
}
.card-elev-2{ box-shadow: var(--shadow-elev-2); }

/* Form */
.form-control, .form-select{
  border-radius: var(--radius-xl);
  border-color: var(--bs-border-color);
}
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .25rem color-mix(in oklab, var(--bs-primary) 25%, transparent);
  border-color: color-mix(in oklab, var(--bs-primary) 60%, var(--bs-border-color));
}

/* Badges */
.badge.rounded-pill{ border-radius: 999px; }
.badge-soft-primary{
  color: var(--bs-primary);
  background: color-mix(in oklab, var(--bs-primary) 12%, transparent);
}

/* Utils */
.rounded-2xl{ border-radius: var(--radius-2xl)!important; }
.shadow-elev-1{ box-shadow: var(--shadow-elev-1)!important; }
.shadow-elev-2{ box-shadow: var(--shadow-elev-2)!important; }
.shadow-elev-3{ box-shadow: var(--shadow-elev-3)!important; }
.hero-gradient{ background: var(--gradient-hero); color:#fff; }
.text-ink-700{ color: var(--color-text-700)!important; }
.text-ink-900{ color: var(--color-text-900)!important; }
.surface{ background: var(--color-surface)!important; }
.card-surface{ background: var(--color-card)!important; }

/* Stats (usando tokens de marca/feedback) */
.stat-blue{
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--color-primary-700) 85%, black),
    var(--color-primary-600)
  );
  color:#fff;
}
.stat-green{
  background: linear-gradient(135deg, var(--color-success-700), var(--color-success-500));
  color:#fff;
}
.stat-indigo{
  /* usa secundária para manter identidade consistente */
  background: linear-gradient(135deg, var(--color-secondary-700), var(--color-secondary-500));
  color:#fff;
}
.stat-orange{
  background: linear-gradient(135deg, #b45309, var(--color-warning-500));
  color:#fff;
}

/* Landing primitives (tokenizados) */
/* Navbar stickiness */
.navbar { --bs-navbar-padding-y: .75rem; transition: box-shadow .2s ease, background .2s ease; }
.navbar.stuck { box-shadow: var(--shadow-elev-1); background: var(--color-card); }

/* Hero */
.hero{
  position: relative;
  background:
    radial-gradient(1200px 600px at 80% -10%, color-mix(in oklab, var(--bs-primary) 18%, transparent), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--color-muted) 70%);
  overflow: hidden;
}
.hero-illus{
  border-radius: var(--bs-border-radius-xl);
  background: linear-gradient(180deg, var(--color-card) 0%, #f7fbfa 100%);
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--shadow-elev-2);
}

/* Sections */
.section-title{ font-weight: 800; }
.section-sub{ color: var(--color-text-600); }

/* Feature cards */
.card-feature{
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-xl);
  background: var(--color-card);
  transition: box-shadow .25s ease, transform .25s ease;
  height: 100%;
}
.card-feature:hover{ box-shadow: var(--shadow-elev-2); transform: translateY(-3px); }

.icon-pill{
  width: 44px; height: 44px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--bs-white) 15%, transparent);
  color: white;
}

/* Stats table separators */
.stat{ border-right: 1px solid var(--bs-border-color); }
@media (max-width: 767.98px){ .stat{ border-right: none } }

/* Pricing */
.pricing-card{
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-xl);
  background: var(--color-card);
  height: 100%;
  transition: box-shadow .25s ease, transform .25s ease;
}
.pricing-card:hover{ box-shadow: var(--shadow-elev-2); transform: translateY(-3px); }
.badge-best{ background: var(--gradient-hero); color:#fff; font-weight: 700; }

/* FAQ */
.accordion-button:not(.collapsed){
  background: color-mix(in oklab, var(--bs-primary) 8%, #fff);
  color: var(--bs-primary);
}

/* CTA */
.cta-grad{
  background: linear-gradient(180deg, #ffffff 0%, color-mix(in oklab, var(--bs-primary) 8%, #fff) 100%);
}

/* Footer (landing) */
footer#contato{ background: var(--color-neutral-900); color: var(--color-neutral-100); }
footer#contato a{ color: var(--color-neutral-100); }

/* Design System: Tables */
.ds-table-wrapper{ position: relative; }
/* aplica DS look em todas as tabelas por padrão; .ds-table permite opt-in separado */
.table, .ds-table{
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-card);
}
.table > :where(thead), .ds-table > :where(thead){
  background: color-mix(in oklab, var(--bs-primary) 6%, var(--color-card));
}
.table thead th, .ds-table thead th{
  font-weight: 700;
  color: var(--color-text-800, #0f172a);
  border-bottom-width: 1px;
  white-space: nowrap;
}
.theme-dark .table thead th, .theme-dark .ds-table thead th{ color: var(--color-neutral-100); }
.table tbody td, .ds-table tbody td{ vertical-align: middle; }
.table.table-sm td, .table.table-sm th, .ds-table.table-sm td, .ds-table.table-sm th{ padding-top: .5rem; padding-bottom: .5rem; }
.table tbody tr:hover, .ds-table tbody tr:hover{
  background: color-mix(in oklab, var(--bs-primary) 4%, transparent);
}
/* caption opcional */
.table caption.ds-table-caption, .ds-table caption.ds-table-caption{
  caption-side: top; padding: .75rem 1rem; color: var(--color-text-700); font-weight: 600;
}
/* separadores sutis */
.table tbody tr + tr td, .ds-table tbody tr + tr td{
  border-top-color: color-mix(in oklab, var(--bs-border-color) 80%, transparent);
}
/* sticky header (opt-in) */
.ds-table-sticky thead th{ position: sticky; top: 0; z-index: 2; }