/**
 * ═══════════════════════════════════════════════════════════════
 * STYLESAI — Identity v2.0  |  Design Token Override
 * ═══════════════════════════════════════════════════════════════
 *
 * Arquivo central de identidade visual. Controla cores, fontes
 * e tokens de design de TODA a aplicação a partir de um único local.
 *
 * ── COMO USAR ───────────────────────────────────────────────────
 * Adicione os dois blocos abaixo no <head> de cada página,
 * garantindo que o <link> deste arquivo seja o ÚLTIMO da lista:
 *
 *   <!-- 1. Fontes (adicionar antes dos outros links) -->
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 *   <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap" rel="stylesheet">
 *
 *   <!-- 2. Identity (DEVE SER O ÚLTIMO <link> do <head>) -->
 *   <link rel="stylesheet" href="css/identity-v2.css">
 *
 * ── COMO FUNCIONA ───────────────────────────────────────────────
 * Ao carregar por último, este arquivo sobrescreve as variáveis
 * CSS definidas nos <style> inline de cada página. Os componentes
 * do design-system.css se atualizam automaticamente via var().
 * Regras com !important cobrem cores hardcoded que não usam variáveis.
 *
 * ── PARA ATUALIZAR A IDENTIDADE ─────────────────────────────────
 * Edite APENAS este arquivo. Todas as páginas que o referenciam
 * refletirão a mudança automaticamente.
 *
 * ═══════════════════════════════════════════════════════════════
 */


/* ══════════════════════════════════════════════════════════════
   TOKENS DE IDENTIDADE — STYLESAI v2
   Override total do :root do design-system.css e das páginas
══════════════════════════════════════════════════════════════ */
:root {
    /* ── Fontes ───────────────────────────────────────────────── */
    --font-body:            'Outfit', sans-serif;
    --font-display:         'Playfair Display', serif;

    /* ── Cor primária / accent ────────────────────────────────── */
    /* Substitui o roxo antigo (#dca5ff) pelo indigo STYLESAI     */
    --primary:              #6366F1;
    --primary-dark:         #4F46E5;
    --primary-light:        #EEF2FF;

    --accent:               #6366F1;   /* compat. páginas antigas */
    --accent-hover:         #4F46E5;
    --accent-light:         rgba(99, 102, 241, 0.10);

    /* ── Superfícies — light theme ────────────────────────────── */
    --bg:                   #F9FAFB;   /* compat. páginas antigas */
    --bg-primary:           #F9FAFB;   /* design-system.css       */
    --bg-secondary:         #F3F4F6;

    --sidebar-bg:           #0D0D0D;   /* sidebar mantém dark     */
    --charcoal:             #1A1A1A;

    /* Glass card — light                                         */
    --card-bg:              rgba(255, 255, 255, 0.75);
    --card-bg-hover:        rgba(255, 255, 255, 0.95);
    --card-bg-solid:        #FFFFFF;

    /* ── Texto ────────────────────────────────────────────────── */
    --text-main:            #1A1A1A;   /* compat. páginas antigas */
    --text-primary:         #1A1A1A;   /* design-system.css       */
    --text-secondary:       #374151;
    --text-muted:           #6B7280;
    --text-disabled:        #9CA3AF;

    /* ── Bordas ───────────────────────────────────────────────── */
    --border:               #E5E7EB;
    --border-hover:         #D1D5DB;
    --glass-border:         rgba(0, 0, 0, 0.06);

    /* ── Sombras — adaptadas para fundo claro ─────────────────── */
    --shadow-sm:            0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:            0 4px 16px rgba(0,0,0,0.07), 0 2px 6px rgba(0,0,0,0.04);
    --shadow-lg:            0 8px 32px rgba(0,0,0,0.08);
    --shadow-glass:         0 8px 32px rgba(0,0,0,0.04);

    /* ── Status ───────────────────────────────────────────────── */
    --success:              #10B981;
    --success-light:        rgba(16, 185, 129, 0.10);
    --danger:               #EF4444;
    --danger-light:         rgba(239, 68, 68, 0.10);
    --warning:              #F59E0B;
    --warning-light:        rgba(245, 158, 11, 0.10);
    --info:                 #3B82F6;
    --info-light:           rgba(59, 130, 246, 0.10);

    /* ── Border radius ────────────────────────────────────────── */
    --radius-sm:            6px;
    --radius-md:            12px;
    --radius-lg:            16px;
    --radius-xl:            20px;
    --radius-2xl:           24px;
    --radius-full:          9999px;

    /* ── Transições ───────────────────────────────────────────── */
    --transition-fast:      0.15s ease;
    --transition-base:      0.25s ease;
    --transition-slow:      0.4s ease;

    /* ── Espaçamentos (mantidos do design-system.css) ─────────── */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;
}


/* ══════════════════════════════════════════════════════════════
   BASE — Regras que cobrem cores hardcoded (não-variáveis)
   !important necessário para sobrescrever páginas com cores fixas
══════════════════════════════════════════════════════════════ */

/* Fundo e texto base */
body {
    font-family: var(--font-body) !important;
    background-color: var(--bg) !important;
    background-image: none !important;    /* remove gradientes das páginas antigas */
    color: var(--text-primary) !important;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

/* Gradientes de fundo que as páginas antigas usavam */
body::before {
    display: none !important;
}

/* Playfair Display nos títulos */
h1, h2, h3, h4, .serif {
    font-family: var(--font-display) !important;
}


/* ══════════════════════════════════════════════════════════════
   CARDS — Glassmorphism light
══════════════════════════════════════════════════════════════ */

.card,
.glass-card,
.auth-portal-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-glass) !important;
}

.card-hover:hover {
    background: var(--card-bg-hover) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Títulos de card usam a cor correta */
.card-title,
.metric-value {
    color: var(--text-primary) !important;
}

.metric-value {
    color: var(--primary) !important;
}


/* ══════════════════════════════════════════════════════════════
   INPUTS — Fundo branco, foco indigo
══════════════════════════════════════════════════════════════ */

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea,
.input,
.select,
.textarea {
    font-family: var(--font-body) !important;
    background: #FFFFFF !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

input:focus,
select:focus,
textarea:focus,
.input:focus,
.select:focus,
.textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important;
    outline: none;
}

input.valid,
.input.valid  { border-color: var(--success) !important; }
input.invalid,
.input.invalid { border-color: var(--danger) !important; }


/* ══════════════════════════════════════════════════════════════
   BOTÕES — Accent indigo
══════════════════════════════════════════════════════════════ */

.btn-primary {
    background: var(--primary) !important;
    color: #FFFFFF !important;
    box-shadow: var(--shadow-sm) !important;
}

.btn-primary:hover:not(:disabled) {
    background: var(--primary-dark) !important;
    box-shadow: 0 4px 14px rgba(99,102,241,0.30) !important;
}

/* Botão secundário */
.btn-secondary {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

/* Botões de submit genéricos que as páginas antigas usavam */
.btn-submit.btn-signup,
.btn-submit.btn-login {
    background: var(--primary) !important;
    color: #FFFFFF !important;
    border: none !important;
}


/* ══════════════════════════════════════════════════════════════
   BADGES — Cor primária atualizada
══════════════════════════════════════════════════════════════ */

.badge-primary {
    background: var(--accent-light) !important;
    color: var(--primary) !important;
}

.badge-popular {
    background: linear-gradient(135deg, var(--primary), #8B5CF6) !important;
    box-shadow: 0 2px 8px rgba(99,102,241,0.30) !important;
}

/* Glow animation usando nova cor */
@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px rgba(99,102,241,0.50); }
    50%       { box-shadow: 0 0 20px rgba(99,102,241,0.80), 0 0 30px rgba(99,102,241,0.60); }
}


/* ══════════════════════════════════════════════════════════════
   MODAIS — Fundo claro
══════════════════════════════════════════════════════════════ */

.modal {
    background: #FFFFFF !important;
    border-color: var(--glass-border) !important;
}

.modal-overlay {
    background: rgba(0, 0, 0, 0.35) !important;
}


/* ══════════════════════════════════════════════════════════════
   LINKS
══════════════════════════════════════════════════════════════ */

a {
    color: var(--primary);
}

a:hover {
    color: var(--primary-dark);
}


/* ══════════════════════════════════════════════════════════════
   TABELAS
══════════════════════════════════════════════════════════════ */

.table th {
    color: var(--primary) !important;
}

.table td {
    color: var(--text-primary) !important;
}

.table tbody tr:hover {
    background: var(--bg-secondary) !important;
}


/* ══════════════════════════════════════════════════════════════
   SCROLLBAR CUSTOMIZADO
══════════════════════════════════════════════════════════════ */

::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: #D1D5DB; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }


/* ══════════════════════════════════════════════════════════════
   HOVER LIFT — Sombras adaptadas para fundo claro
══════════════════════════════════════════════════════════════ */

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
}


/* ══════════════════════════════════════════════════════════════
   UTILITÁRIOS DE COR — Atualizados para nova identidade
══════════════════════════════════════════════════════════════ */

.text-accent  { color: var(--primary) !important; }
.bg-accent    { background-color: var(--primary) !important; }
.text-primary { color: var(--text-primary) !important; }
.text-muted   { color: var(--text-muted) !important; }


/* ══════════════════════════════════════════════════════════════
   PÁGINAS LEGADAS — Adapta classes específicas de cada página
   para o tema claro sem tocar no HTML de cada uma
══════════════════════════════════════════════════════════════ */

/* Cards de tela cheia (reset, success, plans, onboarding) */
.reset-card,
.success-card,
.plan-card,
.onboarding-card {
    background: var(--card-bg-solid) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-md) !important;
}

.plan-card.popular {
    border-color: var(--primary) !important;
    background: var(--primary-light) !important;
}

/* Checklist e feature cards (onboarding) */
.checklist-item,
.feature-card {
    background: var(--bg-secondary) !important;
    border-color: var(--border) !important;
}

.checklist-item:hover {
    background: var(--card-bg-hover) !important;
    border-color: var(--primary) !important;
}

.checklist-item.completed {
    background: var(--success-light) !important;
    border-color: var(--success) !important;
}

/* Progress bar (onboarding) */
.progress-container {
    background: var(--border) !important;
}

/* Video containers (plans, onboarding) */
.video-container {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
}
