/* =============================================================================
   SuperLives — Design System (identidade do PRODUTO, distinta da loja).
   Clean · Data Driven · Professional · Fast. Referência: GitHub/Linear/Supabase.
   Carregado POR ÚLTIMO: redefine os --color-* (que o main.css e demais CSS já
   referenciam) para a paleta nova, consolidando tudo num sistema só e
   aposentando o índigo legado. Tema escuro via data-bs-theme.
   ============================================================================= */

:root {
  /* Ação */
  --color-primary:        #2563EB;
  --color-primary-hover:  #1D4ED8;
  --color-primary-light:  #EFF6FF;   /* azul 10% p/ item ativo / bg suave */
  /* IA / automação / premium — SÓ nesses contextos */
  --color-accent:         #7C3AED;
  --color-secondary:      #6B7280;
  --color-dark:           #1F2937;

  /* Semânticas */
  --color-success:        #22C55E;
  --color-warning:        #F59E0B;
  --color-danger:         #EF4444;
  --color-info:           #0EA5E9;

  /* Neutros */
  --color-bg:             #F8FAFC;
  --color-surface:        #FFFFFF;
  --color-surface-alt:    #F1F5F9;
  --color-text:           #111827;
  --color-text-secondary: #6B7280;
  --color-text-muted:     #9CA3AF;
  --color-border:         #E5E7EB;
  --color-border-light:   #E5E7EB;

  /* Tabelas */
  --color-table-header:   #F9FAFB;
  --color-table-odd:      #FFFFFF;
  --color-table-even:     #FFFFFF;
  --color-table-hover:    #EFF4FF;   /* azul extremamente suave */

  /* Status */
  --color-status-active:  var(--color-primary);
  --color-status-default: #E5E7EB;
  --color-status-step-bg: #F1F5F9;

  /* Tipografia (Inter carregado nos layouts) */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Escala de espaçamento 8/16/24/32 */
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px;
  --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px;

  /* Remapeia Bootstrap para a paleta nova */
  --bs-primary: var(--color-primary);
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-border-color: var(--color-border);
  --bs-font-family-base: var(--font-body);
  --bs-link-color: var(--color-primary);
  --bs-link-hover-color: var(--color-primary-hover);
}

/* Somente modo claro (o tema escuro foi descontinuado a pedido). */

/* ── Tipografia ─────────────────────────────────────────────────────────────── */
body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
h1,h2,h3,h4,h5,h6 { color: var(--color-text); font-family: var(--font-display); letter-spacing: -.01em; }

/* ── Botões: corrige o texto (branco no primário) + variantes ─────────────────── */
.btn-primary,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  color: #fff !important;
  border-color: transparent;
}
.btn-primary { background-color: var(--color-primary); }
.btn-primary:hover, .btn-primary:active { background-color: var(--color-primary-hover); }
.btn-danger { color: #fff !important; background-color: var(--color-danger); border-color: transparent; }
.btn-outline-primary { --bs-btn-color: var(--color-primary); --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary); --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-active-bg: var(--color-primary-hover); }
/* Botão de IA / automação (violeta) */
.btn-ai { color: #fff !important; background-color: var(--color-accent); border: 0; }
.btn-ai:hover { filter: brightness(1.06); color: #fff; }
.btn { border-radius: var(--radius-sm); font-weight: 500; }

/* ── Navbar CLARA (nada de menu escuro) ───────────────────────────────────────── */
.navbar {
  background-color: var(--color-surface) !important;
  box-shadow: none;
  border-bottom: 1px solid var(--color-border);
}
.navbar .navbar-brand { color: var(--color-text) !important; font-weight: 700; }
.navbar .nav-link {
  color: var(--color-text-secondary) !important;
  font-weight: 500; border-radius: 8px; padding: 8px 12px; transition: background .12s, color .12s;
}
.navbar .nav-link:hover { color: var(--color-text) !important; background: var(--color-surface-alt); }
.navbar .nav-link.active {
  color: var(--color-primary) !important;
  background: var(--color-primary-light);
  border-bottom: 0 !important; font-weight: 600;
}
.navbar .nav-link.active .lucide, .navbar .nav-link.active i { color: var(--color-primary); }
.navbar-toggler { border-color: var(--color-border); }

/* ── Cards / superfícies ──────────────────────────────────────────────────────── */
.card { background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text);
  border-radius: var(--radius-md); box-shadow: 0 1px 2px rgba(16,24,40,.04); }

/* ── Tabelas: header cinza-claro, hover azul suave, SEM zebra ─────────────────── */
.table { --bs-table-bg: var(--color-surface); color: var(--color-text); }
.table thead th {
  background: var(--color-table-header) !important; color: var(--color-text-secondary) !important;
  text-transform: uppercase; font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  border-bottom: 1px solid var(--color-border);
}
.table tbody tr:hover > * { background: var(--color-table-hover) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: transparent !important; } /* zebra off */
.table td, .table th { border-color: var(--color-border); }

/* ── Badges: paleta nova (main.css já mapeia via --color-*) ───────────────────── */
.badge.bg-secondary { background-color: var(--color-secondary) !important; }

/* ── Formulários: foco azul ───────────────────────────────────────────────────── */
.form-control, .form-select { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.form-control:focus, .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* ── Sotaque Instagram (só detalhe, nunca cor principal) ──────────────────────── */
.sl-ig-gradient {
  background: conic-gradient(from 210deg, #F58529, #DD2A7B, #8134AF, #515BD4);
  color: #fff;
}
.btn-ig { color: #fff !important; border: 0;
  background: linear-gradient(90deg, #F58529, #DD2A7B, #8134AF, #515BD4); }
.sl-live-progress { height: 6px; border-radius: 999px; background: var(--color-border); overflow: hidden; }
.sl-live-progress > i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #F58529, #DD2A7B, #8134AF, #515BD4); }

/* ── Ícones Lucide: mesmo tamanho, outline, alinhados ─────────────────────────── */
.lucide { width: 1.05em; height: 1.05em; vertical-align: -.15em; stroke-width: 2; }

/* ── Portal público (decisão A): reaproveita os tokens --ec-* do public-shell
      para o sistema SuperLives — mata a serifa EB Garamond e veste de azul/neutro. */
:root {
  --ec-white:  var(--color-surface);
  --ec-gray-50:  var(--color-bg);
  --ec-gray-100: var(--color-border);
  --ec-gray-400: var(--color-text-muted);
  --ec-gray-600: var(--color-text-secondary);
  --ec-gray-800: #374151;
  --ec-black:  var(--color-text);
  --ec-yellow: var(--color-primary);
  --ec-font-sans: var(--font-body);
  --ec-font-display-serif: var(--font-display);   /* Inter — sem serifa */
  --ec-state-error:    var(--color-danger);
  --ec-state-success:  var(--color-success);
  --ec-state-progress: var(--color-primary);
  --ec-state-pending:  var(--color-text-muted);
  --ec-state-warning:  var(--color-warning);
}
.skip-link { background: var(--color-primary) !important; color: #fff !important; }

/* ── Badges sutis (spec): fundo fraco + texto colorido escurecido (legível) ───── */
.badge.bg-success   { background: color-mix(in srgb, var(--color-success) 14%, transparent) !important; color: color-mix(in srgb, var(--color-success), #000 32%) !important; }
.badge.bg-danger    { background: color-mix(in srgb, var(--color-danger) 14%, transparent) !important;  color: color-mix(in srgb, var(--color-danger),  #000 30%) !important; }
.badge.bg-warning   { background: color-mix(in srgb, var(--color-warning) 18%, transparent) !important; color: color-mix(in srgb, var(--color-warning), #000 45%) !important; }
.badge.bg-info      { background: color-mix(in srgb, var(--color-info) 15%, transparent) !important;    color: color-mix(in srgb, var(--color-info),    #000 38%) !important; }
.badge.bg-primary   { background: var(--color-primary-light) !important; color: color-mix(in srgb, var(--color-primary), #000 12%) !important; }
.badge.bg-secondary { background: color-mix(in srgb, var(--color-secondary) 16%, transparent) !important; color: var(--color-text-secondary) !important; }
.badge { font-weight: 600; }

/* ── Sotaque Instagram: gradiente da marca só no ícone/detalhe, nunca no fundo ── */
.sl-ig-text {
  background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF, #515BD4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}