/* ============================================================
   TATO TOTAL — DESIGN TOKENS (marca oficial TATO Criativo)
   Fonte da verdade: logo oficial (wordmark "tato criativo" +
   arco de 5 bolhas) — ver PROPOSTAS/proposta-6-marca-oficial/.
   Este arquivo é carregado ANTES de qualquer outro CSS e é a
   única origem de cor/tipografia da marca no produto.
   ============================================================ */

:root {
    /* ---- 1. CORES DE MARCA (oficiais — não alterar os hex) ----
       Os --tato-arc-* são a fonte imutável da escala que aparece nas cinco
       esferas do logo. Os aliases --tato-* continuam sendo a API visual geral;
       --tato-teal pode receber a cor de destaque white-label do painel. */
    --tato-navy:      #031A39;  /* cor de assinatura: texto, estrutura, fundo dark */
    --tato-arc-blue:  #4FA9DC;  /* bolha 1 do arco (menor) */
    --tato-arc-teal:  #2FC2A8;  /* bolha 2 do arco */
    --tato-arc-green: #34C97E;  /* bolha 3 do arco */
    --tato-arc-lime:  #93D63F;  /* bolha 4 do arco */
    --tato-arc-yellow: #F6D93E;  /* bolha 5 do arco (maior) */
    --tato-blue:      var(--tato-arc-blue);
    --tato-teal:      var(--tato-arc-teal);
    --tato-green:     var(--tato-arc-green);
    --tato-lime:      var(--tato-arc-lime);
    --tato-yellow:    var(--tato-arc-yellow);
    --tato-white:     #FFFFFF;

    /* ---- 2. "PALETA DO ARCO" — sequência ordenada oficial ----
       Usar como sistema: gráficos de barra (1 cor por barra),
       anel de avatar (conic-gradient), spinner de 5 pontos,
       barra de progresso do onboarding. Não usar como paleta
       livre de UI. Estes tokens apontam para a fonte oficial, não para
       aliases que o white-label pode sobrescrever. */
    --arc-1: var(--tato-arc-blue);
    --arc-2: var(--tato-arc-teal);
    --arc-3: var(--tato-arc-green);
    --arc-4: var(--tato-arc-lime);
    --arc-5: var(--tato-arc-yellow);
    --arc-gradient: linear-gradient(90deg, var(--arc-1) 0%, var(--arc-2) 25%, var(--arc-3) 50%, var(--arc-4) 75%, var(--arc-5) 100%);
    --arc-conic: conic-gradient(from 0deg, var(--arc-1), var(--arc-2), var(--arc-3), var(--arc-4), var(--arc-5), var(--arc-1));

    /* ---- 3. SUPERFÍCIES / TEXTO (light mode) ---- */
    --bg:            #F6F8FB;
    --bg-subtle:     #EDF1F7;
    --surface:       #FFFFFF;
    --text-primary:  var(--tato-navy);
    --text-secondary:#4C5C74;
    --text-tertiary: #8A96AC;
    --border:        #E2E8F2;
    --border-strong: #CBD5E5;
    /* Superfície de destaque "navy" (sidebar, cards featured, avatar, estados
       ativos). No light é o navy da marca sobre fundo claro. No dark é
       escurecida (ver bloco dark) para não destoar do fundo quase-preto. */
    --surface-brand: var(--tato-navy);

    /* ---- 4. CTA PRINCIPAL ----
       Primary = navy sólido. O gradiente do arco é reservado a
       destaques pontuais (avatar ring, progresso), não a botões.
       --accent-hover deriva de --accent (color-mix +12% black) para
       acompanhar automaticamente a cor configurada pelo admin no
       painel white-label — antes era #052754 fixo, que aparecia como
       azul do admin no hover mesmo quando o cliente tinha outra cor. */
    --accent:          var(--tato-navy);
    --accent-hover:    color-mix(in srgb, var(--accent) 88%, black);
    --accent-contrast: var(--tato-white);

    /* ---- 5. CORES SEMÂNTICAS (AA-safe como texto) ----
       Hex puros da marca (--tato-green/--tato-yellow) só como
       fundo/preenchimento — nunca texto sobre fundo claro. */
    --success:      #1B8F57;
    --success-bg:   #E4F8ED;
    --warning:      #7A5B00;
    --warning-bg:   #FDF6D2;
    /* Destaque semântico para convite de upgrade — preserva a identidade
       dourada sem espalhar hexadecimais pelas folhas de cada tela. */
    --upgrade-start: #F5C542;
    --upgrade-end:   #E8A020;
    --upgrade-ink:   #3A2500;
    --danger:       #C7333B;  /* utilitário; a marca não tem vermelho */
    --danger-bg:    #FBE7E8;
    --info:         #1E77AC;
    /* Vermelho vivo p/ badges de contagem/alerta (sino, nav) — separado de
       --danger porque --danger também é usado como texto (precisa ficar
       AA-safe sobre fundo claro/escuro); aqui o uso é sempre fundo sólido
       com texto branco em cima, então pode ser bem mais saturado. */
    --badge-alert:  #C7333B;
    --info-bg:      #E7F3FB;

    /* ---- 6. TIPOGRAFIA ---- */
    --font-display: 'Fredoka', 'Inter', sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ---- 7. RAIOS ---- */
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 16px;
    --radius-full: 999px;

    /* ---- 8. SOMBRAS ---- */
    --shadow-xs: 0 1px 2px rgba(3,26,57,0.05);
    --shadow-sm: 0 1px 3px rgba(3,26,57,0.08), 0 1px 2px rgba(3,26,57,0.05);
    --shadow-md: 0 6px 16px rgba(3,26,57,0.10);
    --shadow-lg: 0 16px 40px rgba(3,26,57,0.16);

    --transition: 0.16s ease;
}

/* ============================================================
   DARK MODE — derivado de --tato-navy via color-mix.
   Antes era uma paleta hardcoded (#041B3D, #071F45, #0A2450...) só
   para a marca TATO — quando o admin trocava whitelabel_color_secondary
   (que sobrescreve --tato-navy no layout cliente), o light mode
   acompanhava, mas o dark mode ficava preso no azul-marinho da marca
   original. Agora cada nível (bg, surface, border...) é gerado
   escurecendo o --tato-navy configurado pelo admin, então o dark mode
   também é white-label para qualquer cor escolhida.
   Chaveado por [data-theme="dark"] no <html> — aplicado no <head> antes da
   pintura (ver _brand_head.php), então não há flash de tema claro (FOUC).
   ============================================================ */
[data-theme="dark"] {
    /* Mixes com % baixa contra black saturam rápido perto do preto (navy já é
       muito escuro: L~12%) — bg/bg-subtle/surface ficavam a 1-7 pontos de
       distância em 255, imperceptível. Percentuais bem maiores dão saltos de
       luminosidade reais entre os níveis de elevação. */
    --bg:             color-mix(in srgb, var(--tato-navy) 45%, black);
    --bg-subtle:      color-mix(in srgb, var(--tato-navy) 65%, black);
    --surface:        color-mix(in srgb, var(--tato-navy) 92%, black);
    --text-primary:   #F3F6FC;
    --text-secondary: color-mix(in srgb, #F3F6FC 68%, transparent);
    --text-tertiary:  color-mix(in srgb, #F3F6FC 48%, transparent);
    /* Branco translúcido em vez de navy escurecido: garante contorno visível
       sobre qualquer superfície (bg, surface, surface-brand), independente
       do tom exato embaixo — padrão usado por GitHub/VS Code dark mode. */
    --border:         rgba(255,255,255,0.08);
    --border-strong:  rgba(255,255,255,0.16);
    /* Bloco de destaque (sidebar, cards "featured"): navy escurecido de
       propósito para ler como painel docked/acento de marca, não como
       elevação de conteúdo — pode ficar mais escuro que --bg, é intencional. */
    --surface-brand:  color-mix(in srgb, var(--tato-navy) 34%, black);

    --accent:          var(--tato-white);
    --accent-hover:    color-mix(in srgb, var(--accent) 92%, black);
    --accent-contrast: var(--tato-navy);

    --success:    #4FE29A;
    --success-bg: color-mix(in srgb, #1B8F57 25%, black);
    --warning:    #F6D93E;
    --warning-bg: color-mix(in srgb, #F6D93E 25%, black);
    --danger:     #F0808A;
    --danger-bg:  color-mix(in srgb, #C7333B 25%, black);
    --info:       #7FC4EE;
    --info-bg:    color-mix(in srgb, #1E77AC 35%, black);
    --badge-alert: #FF1F33;

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.30);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
    --shadow-md: 0 6px 16px rgba(0,0,0,0.45);
    --shadow-lg: 0 16px 40px rgba(0,0,0,0.55);
}

/* ============================================================
   LOGO TATO (reconstruído em CSS/HTML puro)
   Uso:
   <span class="tato-logo">
     <span class="tato-arc" aria-hidden="true">
       <span class="bubble b1"></span> ... <span class="bubble b5"></span>
     </span>
     <span class="tato-word"><span class="w-bold">tato</span><span class="w-light">criativo</span></span>
   </span>
   ============================================================ */
.tato-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    white-space: nowrap;
    text-decoration: none;
}
.tato-arc {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 18px;
    padding-left: 1px;
}
.tato-arc .bubble {
    display: block;
    border-radius: 50%;
    flex-shrink: 0;
}
.tato-arc .b1 { width: 8px;  height: 8px;  background: radial-gradient(circle at 32% 28%, #BFE3F7, var(--arc-1) 70%); transform: translateY(-1px); }
.tato-arc .b2 { width: 11px; height: 11px; background: radial-gradient(circle at 32% 28%, #B7EEE2, var(--arc-2) 70%); transform: translateY(2px); }
.tato-arc .b3 { width: 14px; height: 14px; background: radial-gradient(circle at 32% 28%, #B9EFCF, var(--arc-3) 70%); transform: translateY(4px); }
.tato-arc .b4 { width: 17px; height: 17px; background: radial-gradient(circle at 32% 28%, #DEF3B4, var(--arc-4) 70%); transform: translateY(2px); }
.tato-arc .b5 { width: 20px; height: 20px; background: radial-gradient(circle at 32% 28%, #FCF0B0, var(--arc-5) 70%); transform: translateY(-1px); }
.tato-word {
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--text-primary);
}
.tato-word .w-bold { font-weight: 700; }
.tato-word .w-light { font-weight: 500; opacity: 0.62; font-size: 0.82em; }
/* Sobre fundo navy (sidebar/topbar do editor) o wordmark é branco */
.on-navy .tato-word, .on-navy.tato-logo .tato-word { color: #FFFFFF; }

/* ============================================================
   PRIMITIVOS DE MARCA compartilhados
   ============================================================ */

/* Anel de avatar com o arco (conic-gradient) */
.avatar-ring {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--arc-conic);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 2px;
}
.avatar-ring .avatar-initials {
    width: 100%; height: 100%;
    border-radius: 50%;
    background: var(--tato-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
}

/* Barra de progresso no gradiente do arco (onboarding/checklist) */
.arc-progress-track {
    height: 8px;
    background: var(--bg-subtle);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.arc-progress-fill {
    height: 100%;
    background: var(--arc-gradient);
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

/* Spinner de 5 pontos nas cores do arco */
.arc-spinner { display: inline-flex; gap: 4px; align-items: center; }
.arc-spinner span {
    width: 8px; height: 8px; border-radius: 50%;
    animation: arc-pulse 1s infinite ease-in-out;
}
.arc-spinner span:nth-child(1) { background: var(--arc-1); animation-delay: 0s; }
.arc-spinner span:nth-child(2) { background: var(--arc-2); animation-delay: 0.12s; }
.arc-spinner span:nth-child(3) { background: var(--arc-3); animation-delay: 0.24s; }
.arc-spinner span:nth-child(4) { background: var(--arc-4); animation-delay: 0.36s; }
.arc-spinner span:nth-child(5) { background: var(--arc-5); animation-delay: 0.48s; }
@keyframes arc-pulse {
    0%, 100% { transform: scale(0.7); opacity: 0.5; }
    50% { transform: scale(1); opacity: 1; }
}

/* Ícones Lucide inline: herdam a cor do texto e alinham à linha */
.lucide, svg.lucide {
    width: 1.15em; height: 1.15em;
    vertical-align: -0.2em;
    stroke-width: 2;
    flex-shrink: 0;
}