/* ═══════════════════════════════════════════════════════════════════════════ */
/*                   CANONICAL CLASSES — CruzSampaio                           */
/*       Camada entre design-system-verdana.css e page-classes.css             */
/*       Ordem de import: design-system → canonical → buttons-dark-mode        */
/*                        → animations → global-header → page-classes          */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── §1 TOKEN ADDITIONS ─────────────────────────────────────────────────── */

:root {
  /* Token ausente em design-system-verdana.css (fix bug .badge-muted) */
  --cinza-600: #4b5563;

  /* Superfícies dark mode semânticas */
  --dark-bg-primary:   #0a0e27;
  --dark-bg-secondary: #111b3c;
  --dark-bg-tertiary:  #1a2548;
  --dark-text-primary: #e8ecf1;
  --dark-text-muted:   #64748b;
  --dark-border:       rgba(148, 163, 184, 0.10);
  --dark-border-light: rgba(148, 163, 184, 0.20);
  --dark-success:      #34d399;
  --dark-warning:      #fbbf24;
  --dark-danger:       #f87171;
  --dark-info:         #60a5fa;
}

/* ── §2 BODY RESET CANÔNICO ─────────────────────────────────────────────── */

body {
  font-family: var(--font-primary);
  letter-spacing: 1pt;
}

/* ── §3 DARK MODE BASE ──────────────────────────────────────────────────── */

[data-theme="dark"] body {
  background: var(--dark-bg-primary);
  color: var(--dark-text-primary);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {
  color: var(--dark-text-primary);
}

[data-theme="dark"] p {
  color: var(--dark-text-primary);
}

[data-theme="dark"] ::-webkit-scrollbar {
  width: 6px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--dark-bg-secondary);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--dark-border-light);
  border-radius: var(--radius-full);
}

/* ── §4 STATUS DOTS ─────────────────────────────────────────────────────── */

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--cinza-400);
  transition: background 0.4s;
}

/* BEM + aliases retrocompat (dot-active, dot-online…) */
.dot--active,   .dot-active   { background: #10b981; }
.dot--online,   .dot-online   { background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,.5); }
.dot--offline,  .dot-offline  { background: #f87171; }
.dot--draft,    .dot-draft    { background: var(--cinza-500); }
.dot--auth,     .dot-auth     { background: var(--violeta); }
.dot--security, .dot-security { background: #ef4444; }
.dot--ai,       .dot-ai       { background: var(--azul-vivo); }
.dot--isolated, .dot-isolated { background: #f59e0b; }

.dot--pulse {
  animation: cs-dot-pulse 2s ease-in-out infinite;
}
@keyframes cs-dot-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* Legend dot (maior, para legenda visual) */
.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── §5 BADGES ──────────────────────────────────────────────────────────── */

/* Aliases BEM para os badges já em design-system-verdana.css */
.badge--success { background: rgba(0, 208, 132, 0.12); color: var(--verde-vivo); }
.badge--info    { background: rgba(6, 147, 227, 0.12); color: var(--azul-vivo); }
.badge--warning { background: rgba(252, 185,  0, 0.12); color: var(--ouro); }
.badge--danger  { background: rgba(207,  46, 46, 0.12); color: var(--vermelho); }
.badge--muted   { background: var(--cinza-100);          color: var(--cinza-600); }
.badge--auth    { background: rgba(155, 81, 224, 0.12); color: var(--violeta); }
.badge--security{ background: rgba(207, 46,  46, 0.10); color: #dc2626; }

/* Badges de tipo de página (migrados do site-tree.html) */
.badge-marketing { background: #dcfce7; color: #16a34a; }
.badge-dashboard { background: #dbeafe; color: #1d4ed8; }
.badge-auth      { background: #ede9fe; color: #7c3aed; }
.badge-juridica  { background: #fce7f3; color: #be185d; }
.badge-hub       { background: #d1fae5; color: #065f46; }
.badge-wp        { background: #e0f2fe; color: #0369a1; }
.badge-online    { background: #d1fae5; color: #065f46; }
.badge-ai        { background: #dbeafe; color: #1d4ed8; }

[data-theme="dark"] .badge-marketing { background: rgba(22,163,74,.15);  color: #4ade80; }
[data-theme="dark"] .badge-dashboard { background: rgba(29,78,216,.15);  color: #60a5fa; }
[data-theme="dark"] .badge-auth      { background: rgba(124,58,237,.15); color: #c4b5fd; }
[data-theme="dark"] .badge-juridica  { background: rgba(190,24,93,.15);  color: #f9a8d4; }
[data-theme="dark"] .badge-hub       { background: rgba(6,95,70,.15);    color: #34d399; }
[data-theme="dark"] .badge-wp        { background: rgba(3,105,161,.15);  color: #7dd3fc; }
[data-theme="dark"] .badge-online    { background: rgba(6,95,70,.15);    color: #34d399; }
[data-theme="dark"] .badge-ai        { background: rgba(29,78,216,.15);  color: #60a5fa; }
[data-theme="dark"] .badge-security  { background: rgba(153,25,25,.15);  color: #fca5a5; }

/* ── §6 COMPONENTES ESTRUTURAIS ─────────────────────────────────────────── */

/* Hero */
.hero {
  padding: var(--sp-16) var(--sp-6) var(--sp-12);
  text-align: center;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: rgba(0, 208, 132, 0.08);
  border: 1px solid rgba(0, 208, 132, 0.2);
  color: var(--verde-vivo);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-full);
  margin-bottom: var(--sp-4);
}

.hero__title {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: var(--sp-3);
}

.hero__sub {
  color: var(--cinza-500);
  font-size: var(--fs-base);
  max-width: 560px;
  margin: 0 auto var(--sp-8);
  line-height: 1.65;
}

[data-theme="dark"] .hero__sub { color: var(--dark-text-muted); }

/* Section */
.section {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-6);
}

.section__eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--verde-vivo);
  margin-bottom: var(--sp-2);
}

.section__title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  margin-bottom: var(--sp-4);
}

/* Page footer */
.page-footer {
  text-align: center;
  margin-top: var(--sp-12);
  padding: var(--sp-6);
  color: var(--cinza-400);
  font-size: var(--fs-xs);
  border-top: 1px solid var(--cinza-200);
}

.page-footer__links {
  margin-top: var(--sp-2);
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
}

.page-footer__links a {
  color: var(--verde-vivo);
  text-decoration: none;
  transition: opacity 0.15s;
}

.page-footer__links a:hover { opacity: 0.7; text-decoration: underline; }

[data-theme="dark"] .page-footer {
  border-top-color: var(--dark-border);
  color: var(--dark-text-muted);
}

/* Domain card (site-tree.html) */
.domain-card {
  background: var(--branco);
  border-radius: var(--radius-xl);
  border: 1px solid var(--cinza-200);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.domain-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.domain-card--security { border-color: #fecaca; }

.domain-header {
  padding: var(--sp-4) var(--sp-6);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--cinza-200);
}

.domain-card--security .domain-header { background: #fff1f2; }

.domain-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.domain-icon--wordpress { background: #21759b22; }
.domain-icon--frontend  { background: #3caa6e22; }
.domain-icon--saas      { background: #9b51e022; }
.domain-icon--n8n       { background: #e74c3c22; }
.domain-icon--mail      { background: #f39c1222; }
.domain-icon--security  { background: #e74c3c22; }

.domain-footer {
  padding: 0.75rem var(--sp-6);
  border-top: 1px solid var(--cinza-200);
  font-size: var(--fs-xs);
  color: var(--cinza-400);
  display: flex;
  justify-content: space-between;
}

[data-theme="dark"] .domain-card           { background: #111b3c; border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .domain-card--security { border-color: #7f1d1d; }
[data-theme="dark"] .domain-card--security .domain-header { background: #1a0808; }
[data-theme="dark"] .domain-header         { border-bottom-color: rgba(255,255,255,.06); }
[data-theme="dark"] .domain-footer         { border-top-color: rgba(255,255,255,.06); }

/* Site nav (páginas sem global-header.css) */
.site-nav {
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--cinza-200);
  padding: 14px var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
}

.site-nav__brand {
  font-size: var(--fs-base);
  font-weight: 800;
  color: var(--verde-vivo);
  text-decoration: none;
}

.site-nav__links {
  display: flex;
  gap: var(--sp-6);
  list-style: none;
}

.site-nav__link {
  font-size: var(--fs-sm);
  color: var(--cinza-500);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] { color: var(--verde-vivo); }

[data-theme="dark"] .site-nav  { background: rgba(10,14,39,.92); border-color: var(--dark-border); }
[data-theme="dark"] .site-nav__brand { color: var(--dark-success); }
[data-theme="dark"] .site-nav__link  { color: var(--dark-text-muted); }
[data-theme="dark"] .site-nav__link:hover { color: var(--dark-success); }

/* ── §7 UTILITÁRIOS ─────────────────────────────────────────────────────── */

/* Typography */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-bold    { font-weight: 700; }
.text-sm      { font-size: var(--fs-sm); }
.text-xs      { font-size: var(--fs-xs); }
.uppercase    { text-transform: uppercase; letter-spacing: 0.05em; }
.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Spacing — margin-top */
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }

/* Spacing — margin-bottom */
.mb-1 { margin-bottom: var(--sp-1); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }

/* Horizontal centering + padding */
.mx-auto { margin-left: auto; margin-right: auto; }
.px-4    { padding-left: var(--sp-4); padding-right: var(--sp-4); }
.py-4    { padding-top: var(--sp-4);  padding-bottom: var(--sp-4); }

/* Display & flex */
.hidden           { display: none; }
.block            { display: block; }
.items-center     { align-items: center; }
.justify-between  { justify-content: space-between; }
.justify-center   { justify-content: center; }
.gap-2            { gap: var(--sp-2); }
.gap-4            { gap: var(--sp-4); }
.gap-6            { gap: var(--sp-6); }
.flex-wrap        { flex-wrap: wrap; }

/* Responsive */
@media (max-width: 768px) {
  .hero          { padding: var(--sp-8) var(--sp-4) var(--sp-6); }
  .hero__title   { font-size: var(--fs-2xl); }
  .section       { padding: var(--sp-8) var(--sp-4); }
  .site-nav      { padding: 12px var(--sp-4); }
  .site-nav__links { gap: var(--sp-4); }
}