/* ============================================================
   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  ← Lantin (tema-lantin.html)
       Marca base #2e916e → saturada #1fad72 | fundo #faf5f5
       ---------------------------------------------------------- */

    --cor-primaria:        #1fad72;   /* ← TEMA: cor principal (botões, links, ativos) */
    --cor-primaria-hover:  #15965f;   /* ← TEMA: hover da primária                     */
    --cor-primaria-light:  #d8f7e8;   /* ← TEMA: fundo suave primária                  */
    --cor-primaria-rgb:    31, 173, 114; /* ← TEMA: versão RGB para rgba()             */

    --cor-secundaria:      #22c55e;   /* ← TEMA: cor de destaque / CTA / badges        */
    --cor-secundaria-hover:#16a34a;   /* ← TEMA: hover da secundária                   */
    --cor-secundaria-light:#dcfce7;   /* ← TEMA: fundo suave secundária                */
    --cor-secundaria-rgb:  34, 197, 94; /* ← TEMA: versão RGB para rgba()              */

    /* ----------------------------------------------------------
       CORES FIXAS — feedback do sistema
       ---------------------------------------------------------- */

    --cor-sucesso:         #16a34a;
    --cor-sucesso-light:   #dcfce7;
    --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 quente Lantin (#faf5f5)
       ---------------------------------------------------------- */

    --cinza-50:  #faf5f5;
    --cinza-100: #f3ecec;
    --cinza-200: #e8e0e0;
    --cinza-300: #d4cbcb;
    --cinza-400: #a89f9f;
    --cinza-500: #7a7272;
    --cinza-600: #5c5555;
    --cinza-700: #3f3a3a;
    --cinza-800: #2a2626;
    --cinza-900: #1a1717;

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

    --fundo-app:       #faf5f5;              /* fundo geral da página          */
    --fundo-sidebar:   #ffffff;              /* sidebar                         */
    --fundo-topbar:    rgba(255, 255, 255, 0.9); /* topbar glassmorphism       */
    --fundo-card:      rgba(255, 255, 255, 0.88); /* cards glassmorphism       */
    --fundo-card-solid:#ffffff;              /* card sem transparência          */
    --fundo-input:     #ffffff;              /* inputs                          */
    --fundo-hover:     #eef8f2;              /* hover de linhas/itens           */
    --fundo-ativo:     #d8f7e8;              /* item ativo no menu              */

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

    --texto-titulo:    #1a1717;            /* títulos h1–h3            */
    --texto-corpo:     #3f3a3a;            /* texto corrido            */
    --texto-suave:     #7a7272;            /* labels, placeholders     */
    --texto-desativo:  #a89f9f;            /* texto desabilitado       */
    --texto-inverso:   #ffffff;            /* texto sobre cor primária */
    --texto-link:      #1fad72;            /* links                    */

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

    --borda:           #e8e0e0;            /* borda padrão          */
    --borda-forte:     #d4cbcb;            /* borda com destaque    */
    --borda-input:     #d4cbcb;            /* borda de input        */
    --borda-focus:     #1fad72;            /* borda no focus        */

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

    --sombra-sm:  0 1px 3px rgba(31, 173, 114, 0.1), 0 1px 2px rgba(0, 0, 0, 0.04);
    --sombra-md:  0 4px 16px rgba(31, 173, 114, 0.14), 0 2px 6px rgba(0, 0, 0, 0.04);
    --sombra-lg:  0 10px 40px rgba(31, 173, 114, 0.16), 0 4px 12px rgba(0, 0, 0, 0.05);
    --sombra-xl:  0 20px 60px rgba(31, 173, 114, 0.18), 0 8px 20px rgba(0, 0, 0, 0.06);

    /* Sombra colorida (usa RGB do tema) */
    --sombra-primaria: 0 4px 22px rgba(31, 173, 114, 0.38);
    --sombra-secundaria: 0 4px 20px rgba(34, 197, 94, 0.32);

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

    --glass-bg:     rgba(255, 255, 255, 0.85);
    --glass-border: rgba(31, 173, 114, 0.14);
    --glass-blur:   blur(16px);
    --glass-shadow: 0 8px 32px rgba(31, 173, 114, 0.12);

    /* ----------------------------------------------------------
       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;

}

/* ============================================================
   Tema ativo = Lantin (ver tema-lantin.html na raiz do projeto).
   Para outro cliente, sobrescreva só as variáveis ← TEMA acima.
   ============================================================ */