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

   CONVENÇÃO CSS (portal Lantin)
   ─────────────────────────────
   • Sempre classes no HTML/PHP — evitar style="" inline.
   • Templates de e-mail → funcoes/helpers/email_templates.php (Outlook exige inline).
   • Novo estilo reutilizável → utilidades.css, layout.css ou componentes.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
       ---------------------------------------------------------- */

    --cor-primaria:        #B80000;   /* ← TEMA: Lantin vermelho                       */
    --cor-primaria-hover:  #990000;   /* ← TEMA: hover da primária                     */
    --cor-primaria-light:  rgba(255, 255, 255, 0.1); /* item ativo menu (tint leve)  */
    --cor-primaria-rgb:    184, 0, 0; /* ← TEMA: versão RGB para rgba()                */

    --cor-secundaria:      #0057B8;   /* ← TEMA: Lantin azul                           */
    --cor-secundaria-hover:#004494;   /* ← TEMA: hover da secundária                   */
    --cor-secundaria-light:rgba(0, 87, 184, 0.12);
    --cor-secundaria-rgb:  0, 87, 184;

    /* ----------------------------------------------------------
       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:       #895129;              /* fallback madeira (fundo-login.webp) */
    --fundo-sidebar:   transparent;          /* sidebar — vidro transparente    */
    --fundo-topbar:    transparent;          /* topbar                          */
    --fundo-card:      transparent;          /* cards                           */
    --fundo-card-solid:rgba(20, 12, 8, 0.88); /* dropdowns, modais legíveis  */
    --fundo-input:     transparent;          /* inputs                          */
    --fundo-hover:     rgba(255, 255, 255, 0.06);
    --fundo-ativo:     rgba(255, 255, 255, 0.1);

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

    --texto-titulo:    #ffffff;            /* títulos h1–h3            */
    --texto-corpo:     #ffffff;            /* texto corrido            */
    --texto-suave:     rgba(255, 255, 255, 0.88);
    --texto-desativo:  rgba(255, 255, 255, 0.45);
    --texto-inverso:   #ffffff;            /* texto sobre cor primária */
    --texto-link:      #ffffff;            /* links                    */
    --text-shadow-ui:  0 1px 2px rgba(0, 0, 0, 0.45), 0 0 1px rgba(0, 0, 0, 0.35);

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

    --borda:           rgba(255, 255, 255, 0.38);
    --borda-forte:     rgba(255, 255, 255, 0.52);
    --borda-input:     rgba(255, 255, 255, 0.38);
    --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:        transparent;          /* cards — madeira visível        */
    --glass-border:    rgba(255, 255, 255, 0.52);
    --glass-border-in: rgba(255, 255, 255, 0.38);
    --glass-blur:      blur(16px);
    --glass-shadow:    0 4px 20px rgba(0, 0, 0, 0.22), 0 1px 4px rgba(0, 0, 0, 0.12);
    --glass-shadow-nest: 0 2px 10px rgba(0, 0, 0, 0.14);

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

    --radius-sm:   6px;
    --radius-md:   10px;   /* padrão botões, inputs */
    --radius-lg:   16px;   /* 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;
   }
   ============================================================ */