/* ============================================================
   variaveis.css — PALETA E TOKENS DO SISTEMA
   Local: /assets/css/variaveis.css

   ⚡ PARA TROCAR O TEMA DO SISTEMA:
      Altere apenas as variáveis marcadas com ← TEMA
      O restante do sistema se adapta automaticamente.
   ============================================================ */

:root {

    /* ----------------------------------------------------------
       CORES DO TEMA  ← edite estas para trocar o visual inteiro
       ---------------------------------------------------------- */

    /* LiveLog — Elementor Kit (livelogtrans.com.br)
       primary #69B432 | accent #98C665 | secondary #595856 | text #313131 */
    --cor-primaria:        #69B432;   /* ← TEMA: cor principal (botões, links, ativos) */
    --cor-primaria-hover:  #549028;   /* ← TEMA: hover da primária                     */
    --cor-primaria-light:  #f1f8e9;   /* ← TEMA: fundo suave primária                  */
    --cor-primaria-rgb:    105,180,50;/* ← TEMA: versão RGB para rgba()                */

    --cor-secundaria:      #98C665;   /* ← TEMA: accent LiveLog                        */
    --cor-secundaria-hover:#7fb34d;   /* ← TEMA: hover da secundária                   */
    --cor-secundaria-light:#f4faec;   /* ← TEMA: fundo suave secundária                */
    --cor-secundaria-rgb:  152,198,101;/* ← TEMA: versão RGB para rgba()               */

    /* ----------------------------------------------------------
       CORES FIXAS — não mudam com o tema
       ---------------------------------------------------------- */

    /* Feedback do sistema */
    --cor-sucesso:         #16a34a;
    --cor-sucesso-light:   #f0fdf4;
    --cor-sucesso-rgb:     22,163,74;

    --cor-alerta:          #d97706;
    --cor-alerta-light:    #fffbeb;
    --cor-alerta-rgb:      217,119,6;

    --cor-erro:            #dc2626;
    --cor-erro-light:      #fef2f2;
    --cor-erro-rgb:        220,38,38;

    --cor-info:            #0891b2;
    --cor-info-light:      #ecfeff;
    --cor-info-rgb:        8,145,178;

    /* ----------------------------------------------------------
       TONS DE CINZA — base do light mode
       ---------------------------------------------------------- */

    --cinza-50:  #f8fafc;
    --cinza-100: #f1f5f9;
    --cinza-200: #e2e8f0;
    --cinza-300: #cbd5e1;
    --cinza-400: #94a3b8;
    --cinza-500: #64748b;
    --cinza-600: #475569;
    --cinza-700: #334155;
    --cinza-800: #1e293b;
    --cinza-900: #0f172a;

    /* ----------------------------------------------------------
       SUPERFÍCIES E FUNDOS
       ---------------------------------------------------------- */

    --fundo-app:       var(--cinza-100);     /* fundo geral da página          */
    --fundo-sidebar:   #ffffff;              /* sidebar                         */
    --fundo-topbar:    rgba(255,255,255,.85);/* topbar glassmorphism            */
    --fundo-card:      rgba(255,255,255,.75);/* cards glassmorphism             */
    --fundo-card-solid:#ffffff;              /* card sem transparência          */
    --fundo-input:     #ffffff;              /* inputs                          */
    --fundo-hover:     var(--cinza-100);     /* hover de linhas/itens           */
    --fundo-ativo:     var(--cor-primaria-light); /* item ativo no menu        */

    /* ----------------------------------------------------------
       TEXTOS
       ---------------------------------------------------------- */

    --texto-titulo:    var(--cinza-900);   /* títulos h1–h3            */
    --texto-corpo:     var(--cinza-700);   /* texto corrido            */
    --texto-suave:     var(--cinza-500);   /* labels, placeholders     */
    --texto-desativo:  var(--cinza-400);   /* texto desabilitado       */
    --texto-inverso:   #ffffff;            /* texto sobre cor primária */
    --texto-link:      var(--cor-primaria);/* links                    */

    /* ----------------------------------------------------------
       BORDAS
       ---------------------------------------------------------- */

    --borda:           var(--cinza-200);   /* borda padrão          */
    --borda-forte:     var(--cinza-300);   /* borda com destaque    */
    --borda-input:     var(--cinza-300);   /* borda de input        */
    --borda-focus:     var(--cor-primaria);/* borda no focus        */

    /* ----------------------------------------------------------
       SOMBRAS
       ---------------------------------------------------------- */

    --sombra-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --sombra-md:  0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
    --sombra-lg:  0 10px 40px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.05);
    --sombra-xl:  0 20px 60px rgba(0,0,0,.12), 0 8px 20px rgba(0,0,0,.06);

    /* Sombra colorida (usa RGB do tema) */
    --sombra-primaria: 0 4px 20px rgba(var(--cor-primaria-rgb),.25);
    --sombra-secundaria: 0 4px 20px rgba(var(--cor-secundaria-rgb),.3);

    /* ----------------------------------------------------------
       GLASSMORPHISM
       ---------------------------------------------------------- */

    --glass-bg:     rgba(255,255,255,.72);
    --glass-border: rgba(255,255,255,.55);
    --glass-blur:   blur(16px);
    --glass-shadow: 0 8px 32px rgba(0,0,0,.08);

    /* ----------------------------------------------------------
       RAIOS DE BORDA  (personalidade do sistema)
       ---------------------------------------------------------- */

    --radius-sm:   6px;
    --radius-md:   10px;   /* padrão botões, inputs */
    --radius-lg:   14px;   /* cards, modais         */
    --radius-xl:   20px;   /* painéis maiores       */
    --radius-pill: 999px;  /* badges, tags          */

    /* ----------------------------------------------------------
       ESPAÇAMENTO  (escala de 4px)
       ---------------------------------------------------------- */

    --esp-1:   4px;
    --esp-2:   8px;
    --esp-3:   12px;
    --esp-4:   16px;
    --esp-5:   20px;
    --esp-6:   24px;
    --esp-8:   32px;
    --esp-10:  40px;
    --esp-12:  48px;
    --esp-16:  64px;

    /* ----------------------------------------------------------
       TIPOGRAFIA
       ---------------------------------------------------------- */

    --fonte-sans:  'Inter', 'DM Sans', system-ui, sans-serif;
    --fonte-mono:  'JetBrains Mono', 'Fira Code', monospace;

    --text-xs:   11px;
    --text-sm:   13px;
    --text-base: 14px;
    --text-md:   15px;
    --text-lg:   17px;
    --text-xl:   20px;
    --text-2xl:  24px;
    --text-3xl:  30px;

    --peso-normal:   400;
    --peso-medio:    500;
    --peso-semi:     600;
    --peso-bold:     700;

    /* ----------------------------------------------------------
       LAYOUT — SIDEBAR + TOPBAR
       ---------------------------------------------------------- */

    --sidebar-largura:        240px;   /* largura normal             */
    --sidebar-largura-mini:   68px;    /* sidebar recolhida          */
    --topbar-altura:          60px;    /* altura da topbar           */

    /* ----------------------------------------------------------
       TRANSIÇÕES
       ---------------------------------------------------------- */

    --transicao:       .18s ease;
    --transicao-lenta: .32s ease;

    /* ----------------------------------------------------------
       Z-INDEX  (camadas)
       ---------------------------------------------------------- */

    --z-base:    1;
    --z-dropdown: 100;
    --z-sidebar: 200;
    --z-topbar:  300;
    --z-modal:   400;
    --z-toast:   500;

}

/* ============================================================
   EXEMPLO DE TROCA DE TEMA COMPLETA
   Basta sobrescrever apenas as variáveis de TEMA:

   :root {
       --cor-primaria:        #7c3aed;
       --cor-primaria-hover:  #6d28d9;
       --cor-primaria-light:  #f5f3ff;
       --cor-primaria-rgb:    124,58,237;

       --cor-secundaria:      #10b981;
       --cor-secundaria-hover:#059669;
       --cor-secundaria-light:#ecfdf5;
       --cor-secundaria-rgb:  16,185,129;
   }
   ============================================================ */