/*
* ============================================================================
* LOJEXA DESIGN TOKENS — lx-tokens.css
* ============================================================================
*
* CAMADA ÚNICA de variáveis CSS do sistema de design LOJEXA.
* Todos os outros arquivos CSS devem consumir estas variáveis — nunca valores
* literais de cor, raio ou sombra diretamente.
*
* COMO INCLUIR
* ------------
* Adicione ANTES de bootstrap.min.css (ou logo depois, antes de app.css):
*
*
*
*
* Sugestão de ordem no do layout app/Views/layouts/app.php:
* 1. lx-tokens.css
* 2. bootstrap.min.css (ou manter a ordem existente e colocar lx-tokens antes)
* 3. lx-components.css
* 4. app.css (sobrescreve Bootstrap quando necessário)
*
* RETROCOMPATIBILIDADE
* --------------------
* Variáveis --sf-* que já existem nas views continuam funcionando por meio de
* aliases declarados na seção "Legacy aliases" abaixo.
* Não remova ou renomeie nenhum alias --sf-* enquanto houver código que os use.
*
* CONVENÇÃO DE NOMENCLATURA
* -------------------------
* --lx-{categoria}-{variante}
*
* Categorias: color · surface · text · border · radius · shadow ·
* space · font · transition
*
* ============================================================================
*/
:root {
/* ==========================================================================
1. PALETA — Cores semânticas
========================================================================== */
/* Primary (azul-indigo LOJEXA) */
--lx-primary: #0757d8;
--lx-primary-hover: #0047b8;
--lx-primary-soft: #eaf3ff;
--lx-primary-dark: #06233d;
/* Accent (teal) */
--lx-accent: #12b3a8;
--lx-accent-soft: #e6faf9;
/* Semânticas — sucesso / alerta / erro / informação */
--lx-success: #11813d;
--lx-success-soft: #e8f8ee;
--lx-warning: #b45309;
--lx-warning-soft: #fff7df;
--lx-danger: #c81e3a;
--lx-danger-soft: #fff0f3;
--lx-info: #2563eb;
--lx-info-soft: #eff6ff;
/* Neutros */
--lx-neutral: #64748b;
--lx-neutral-soft: #f1f5f9;
/* ==========================================================================
2. SUPERFÍCIES — Fundos e camadas
========================================================================== */
--lx-background: #f4f7fb; /* fundo da página (body) */
--lx-surface: #ffffff; /* cards, modais, painéis */
--lx-surface-soft: #f8fafc; /* thead, áreas levemente recuadas */
--lx-surface-elevated: #ffffff; /* popovers, dropdowns */
/* ==========================================================================
3. BORDAS
========================================================================== */
--lx-border: #e2e8f0;
--lx-border-strong: #cbd5e1;
/* ==========================================================================
4. TIPOGRAFIA — Cores de texto
========================================================================== */
--lx-text-primary: #0f172a; /* títulos e body */
--lx-text-secondary: #334155; /* subtítulos, labels */
--lx-text-muted: #64748b; /* placeholders, metadados */
--lx-text-inverse: #ffffff; /* texto sobre fundo escuro */
/* Escala de tamanho de fonte */
--lx-font-xs: .72rem; /* ~11.5px — labels, badges */
--lx-font-sm: .82rem; /* ~13px — texto de tabela, tooltip */
--lx-font-base: .9rem; /* ~14.5px — parágrafos secundários */
--lx-font-md: 1rem; /* 16px — corpo padrão */
--lx-font-lg: 1.125rem; /* 18px — subtítulos de seção */
--lx-font-xl: 1.25rem; /* 20px — título de card/página */
--lx-font-2xl: 1.5rem; /* 24px — heading de destaque */
/* Pesos */
--lx-weight-normal: 400;
--lx-weight-medium: 500;
--lx-weight-semibold: 600;
--lx-weight-bold: 700;
--lx-weight-extrabold: 800;
/* ==========================================================================
5. ESPAÇAMENTO — Escala de 4 px
========================================================================== */
--lx-space-1: 4px;
--lx-space-2: 8px;
--lx-space-3: 12px;
--lx-space-4: 16px;
--lx-space-5: 20px;
--lx-space-6: 24px;
--lx-space-8: 32px;
--lx-space-10: 40px;
--lx-space-12: 48px;
--lx-space-16: 64px;
/* ==========================================================================
6. RAIOS DE BORDA
========================================================================== */
--lx-radius-xs: 4px;
--lx-radius-sm: 6px;
--lx-radius-md: 8px;
--lx-radius-lg: 12px;
--lx-radius-xl: 16px;
--lx-radius-pill: 999px;
/* ==========================================================================
7. SOMBRAS
========================================================================== */
--lx-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
--lx-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
--lx-shadow-md: 0 10px 28px rgba(15, 23, 42, .08);
--lx-shadow-lg: 0 20px 48px rgba(15, 23, 42, .14);
--lx-shadow-xl: 0 32px 64px rgba(15, 23, 42, .18);
/* ==========================================================================
8. TRANSIÇÕES
========================================================================== */
--lx-transition-fast: 120ms ease;
--lx-transition-normal: 180ms ease;
--lx-transition-slow: 300ms ease;
/* ==========================================================================
9. LAYOUT — Medidas estruturais
========================================================================== */
--lx-topbar-h: 42px; /* altura da topbar (app.php usa 42px) */
--lx-sidebar-w: 240px; /* largura do rail/sidebar lateral */
--lx-content-max: 1440px; /* largura máxima do conteúdo principal */
/* ==========================================================================
10. LEGACY ALIASES — retrocompatibilidade com variáveis --sf-* existentes
NÃO remova estes aliases enquanto houver HTML/CSS que os referencie.
========================================================================== */
--sf-primary: var(--lx-primary);
--sf-primary-soft: var(--lx-primary-soft);
/* --sf-topbar-h é definido inline no layout (app.php) e
não precisa de alias aqui — mas pode ser substituído por
--lx-topbar-h em futuras refatorações. */
}