/* ============================================================================
* Constructo Analyst — Design Tokens
* ----------------------------------------------------------------------------
* Fonte da verdade do design system da plataforma. Lido por:
* - Tailwind (krpconnect/public/mobile/ — PWA e telas novas em geral)
* - CSS legado (dashboard.css, desktop.css — aliases pt-BR continuam vivos)
* - Componentes JS (toast.js, confirm.js, cookie-consent.js)
*
* Convenção:
* - Nomes canônicos em inglês (--color-*, --space-*, --radius-*, etc).
* - Aliases pt-BR no fim de cada bloco apontam pros canônicos.
* Marcados @deprecated. Migração orgânica conforme cada tela é tocada.
* Remoção planejada quando grep não encontrar mais usos.
*
* Paleta v3.2 monocromática (sem cor de acento decorativa).
* Hierarquia visual via peso/contraste/espaçamento.
*
* ----------------------------------------------------------------------------
* Versão: 1.0 (Passo 0 do plano PWA)
* Data: 2026-04-30
* ============================================================================ */
/* ============================================================================
* CORES — light theme (default)
* ============================================================================ */
:root {
/* Fundo */
--color-bg: #FAFAF8; /* corpo da página */
--color-bg-card: #FFFFFF; /* cards, modais, drawers */
--color-bg-hover: #F0EFEC; /* hover sutil em items neutros */
--color-bg-input: #FFFFFF; /* inputs, selects, textareas */
--color-bg-elevated: #FFFFFF; /* dropdown, popover, tooltip */
--color-bg-overlay: rgba(0, 0, 0, 0.45); /* backdrop de modal */
/* Texto */
--color-text: #1A1A1A; /* texto primário */
--color-text-muted: #6B6B68; /* texto secundário, legendas */
--color-text-subtle: #999996; /* placeholders, hints */
--color-text-inverse: #FAFAF8; /* texto sobre fundos escuros */
--color-text-link: #1A1A1A; /* links seguem texto, sublinhado dá pista */
/* Bordas e divisores */
--color-border: #E2E1DD; /* bordas de card, input */
--color-border-strong: #C8C7C2; /* divisores fortes, borda focada */
--color-border-subtle: #EBEAE6; /* divisores quase invisíveis */
/* Primária — LinkZap usa VERDE WHATSAPP como accent (substitui o preto
do KRP Connect). Ações primárias (botão Entrar, Salvar), focus ring,
link. Sidebar mantém o preto invertido (não-primária — ver avatar).
#25D366 é o tom oficial; #1FAA52 é versão um pouco mais escura pra
hover (acessível WCAG AA sobre texto branco). */
--color-primary: #25D366;
--color-primary-hover: #1FAA52;
--color-primary-text: #FFFFFF; /* texto sobre o primary (botões) */
/* Avatar (pílula de alto contraste — também usada em sidebar item ativo).
LinkZap mantém o preto/branco do KRP — sidebar não fica verde. */
--color-avatar-bg: #2E2E2E;
--color-avatar-text: #ECECEC;
/* Estados semânticos (carregam significado, não decoração) */
--color-success: #137333; /* verde acessível, contraste WCAG AA */
--color-success-bg: #E6F4EA;
--color-success-border: #B7DCC2;
--color-warning: #B06000; /* âmbar acessível */
--color-warning-bg: #FEF7E0;
--color-warning-border: #FCE293;
--color-danger: #B3261E; /* vermelho acessível */
--color-danger-bg: #FCE8E6;
--color-danger-border: #F5C6C0;
--color-info: #1A73E8; /* azul informativo */
--color-info-bg: #E8F0FE;
--color-info-border: #C2D7FA;
--color-neutral: #6B6B68; /* mensagens neutras */
--color-neutral-bg: #F0EFEC;
--color-neutral-border: #D8D7D2;
/* Foco (acessibilidade — anel visível em qualquer foco de teclado) */
--color-focus-ring: #1A73E8;
--color-focus-ring-offset: #FAFAF8;
/* IA (Constructo IQ — usado em badges, pulse "Pensando", marcações) */
--color-ai-accent: #6B6B68; /* monocromático — IA não é "amarelinho" */
--color-ai-accent-bg: #F0EFEC;
/* ==========================================================================
* ESPAÇAMENTO — escala harmônica (4px base)
* ========================================================================== */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* ==========================================================================
* TIPOGRAFIA — DM Sans
* ========================================================================== */
--font-family-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
--font-size-xs: 11px;
--font-size-sm: 13px;
--font-size-base: 14px;
--font-size-md: 15px;
--font-size-lg: 17px;
--font-size-xl: 20px;
--font-size-2xl: 24px;
--font-size-3xl: 30px;
--font-size-4xl: 36px;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.2;
--line-height-normal: 1.5;
--line-height-relaxed: 1.7;
--letter-spacing-tight: -0.01em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.02em;
--letter-spacing-caps: 0.06em; /* uppercase headers */
/* ==========================================================================
* RAIO DE BORDA
* ========================================================================== */
--radius-none: 0;
--radius-sm: 4px;
--radius-md: 8px; /* padrão de input, badge */
--radius-lg: 12px; /* padrão de card no mobile */
--radius-xl: 16px; /* cards destacados */
--radius-2xl: 24px; /* sheets, modais grandes */
--radius-full: 9999px; /* pílulas, avatares */
/* ==========================================================================
* SOMBRAS — sutis no light, ainda mais discretas no mobile
* ========================================================================== */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
--shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
--shadow-focus: 0 0 0 3px rgba(26, 115, 232, 0.35); /* acessibilidade */
/* ==========================================================================
* BREAKPOINTS — só de referência (Tailwind tem os seus)
* ========================================================================== */
--bp-sm: 640px;
--bp-md: 768px;
--bp-lg: 1024px;
--bp-xl: 1280px;
--bp-2xl: 1536px;
/* ==========================================================================
* Z-INDEX — escala fixa pra evitar guerra de números
* ========================================================================== */
--z-base: 0;
--z-dropdown: 1000;
--z-sticky: 1100;
--z-bottom-nav: 1200; /* mobile */
--z-app-bar: 1300; /* mobile */
--z-overlay: 1400;
--z-modal: 1500;
--z-toast: 1600; /* sempre acima de modal */
--z-tooltip: 1700;
/* ==========================================================================
* MOBILE / PWA — alturas, safe areas, touch
* ========================================================================== */
--touch-target-min: 44px; /* Apple HIG mínimo */
--bottom-nav-height: 56px;
--app-bar-height: 56px;
--app-bar-large: 96px; /* large title estilo iOS */
/* Safe area insets — fallback 0 quando não suportado */
--safe-top: env(safe-area-inset-top, 0px);
--safe-right: env(safe-area-inset-right, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
/* ==========================================================================
* MOTION — duração e curva padrão
* ========================================================================== */
--duration-instant: 100ms;
--duration-fast: 150ms;
--duration-normal: 250ms;
--duration-slow: 400ms;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* bounce sutil */
/* ==========================================================================
* ALIASES pt-BR @deprecated
* --------------------------------------------------------------------------
* Apontam pros canônicos em inglês. CSS legado (dashboard.css/desktop.css)
* continua funcionando. Quando uma tela for tocada, prefira o nome em inglês.
* Remoção quando grep "cor-" não encontrar mais ocorrências.
* ========================================================================== */
--cor-fundo: var(--color-bg);
--cor-fundo-card: var(--color-bg-card);
--cor-fundo-hover: var(--color-bg-hover);
--cor-fundo-input: var(--color-bg-input);
--cor-texto: var(--color-text);
--cor-texto-secundario: var(--color-text-muted);
--cor-texto-inverso: var(--color-text-inverse);
--cor-borda: var(--color-border);
--cor-primaria: var(--color-primary);
--cor-primaria-hover: var(--color-primary-hover);
--cor-primaria-texto: var(--color-primary-text);
--cor-avatar-bg: var(--color-avatar-bg);
--cor-avatar-text: var(--color-avatar-text);
--cor-sucesso: var(--color-success);
--cor-aviso: var(--color-warning);
--cor-erro: var(--color-danger);
--cor-info: var(--color-info);
}
/* ============================================================================
* CORES — dark theme
* ----------------------------------------------------------------------------
* Ativado por . localStorage.ca_theme persiste entre admin,
* desktop e PWA — toggle em qualquer um vale pros outros.
*
* IMPORTANTE: color-scheme: dark é obrigatório. Sem isso, ,
*