/* ===================================================================== ODEM BRASIL VENDAS 2.0 — tokens.css Fonte unica de verdade do design system. Nenhum componente usa valor hardcoded quando existe token equivalente aqui. Tema trocado por [data-theme="light|dark"] no /. ===================================================================== */ :root { /* ---- Marca ---------------------------------------------------- */ --brand: #C03344; /* vermelho ODEM, cor de marca */ --brand-hover: #A93226; /* estado hover de acoes primarias */ --brand-active: #922B21; /* estado pressionado */ --brand-tint: #FBEEEC; /* fundo tenue de marca (chips, destaques) */ --brand-contrast: #FFFFFF; /* texto sobre a cor de marca */ /* ---- Cores de status do funil de pedidos ---------------------- */ /* Espelham exatamente os badges e o Painel TV da especificacao. */ --status-orcamento: #757575; --status-gerado: #1B5E20; --status-aguard-mercadoria: #C03344; --status-separacao: #F9A825; --status-faturado: #E65100; --status-parcial: #0277BD; /* NF Aguardando Rota */ --status-nf-transp: #6A1B9A; --status-concluido: #00C853; --status-cancelado: #E9A6A0; /* vermelho-rosado, distinto do aguard. mercadoria */ /* Contraste de texto sobre superficies coloridas (legibilidade fixa, nao muda com o tema: a cor de fundo do status tambem nao muda). */ --on-color: #FFFFFF; /* texto claro sobre status escuros */ --on-color-dark: #222222; /* texto escuro sobre status claros (amarelo/verde) */ --on-cancelado: #5A1A14; /* texto sobre o rosado de cancelado */ /* ---- Feedback ------------------------------------------------- */ --ok: #1B7A43; --ok-tint: #E7F4EC; --warn: #B8860B; --warn-tint: #FBF3DE; --danger: #C03344; --danger-tint: #FBEEEC; --info: #0277BD; --info-tint: #E4F1F8; /* ---- Neutros (tema claro por padrao) -------------------------- */ --bg: #F5F6F8; /* fundo da aplicacao */ --surface: #FFFFFF; /* cards, modais, barras */ --surface-2: #F0F1F4; /* fundo sutil aninhado */ --border: #E2E5EA; /* divisores e contornos */ --border-strong: #C9CDD5; /* contorno de input em foco leve */ --text: #1C2128; /* texto principal */ --text-2: #565E6B; /* texto secundario */ --text-3: #8A929E; /* texto terciario, placeholders */ --overlay: rgba(20, 22, 27, 0.48); /* backdrop de modal */ /* ---- Tipografia ---------------------------------------------- */ --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "DM Mono", "SF Mono", ui-monospace, "Cascadia Code", monospace; --fs-xs: 0.75rem; /* 12px, legendas */ --fs-sm: 0.8125rem; /* 13px, texto de apoio */ --fs-md: 0.9375rem; /* 15px, corpo padrao */ --fs-lg: 1.0625rem; /* 17px, subtitulo */ --fs-xl: 1.375rem; /* 22px, titulo de tela */ --fs-2xl: 1.75rem; /* 28px, numeros de KPI */ --fs-3xl: 2.5rem; /* 40px, destaques do Painel TV */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.2; --lh-normal: 1.5; /* ---- Espacamento (escala de 4px) ----------------------------- */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.5rem; /* 24 */ --sp-6: 2rem; /* 32 */ --sp-7: 3rem; /* 48 */ /* ---- Raio ----------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; /* ---- Sombras -------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(20, 22, 27, 0.06); --shadow-md: 0 4px 14px rgba(20, 22, 27, 0.10); --shadow-lg: 0 12px 32px rgba(20, 22, 27, 0.16); /* ---- Movimento ------------------------------------------------ */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 360ms; /* ---- Layout --------------------------------------------------- */ --sidebar-w: 248px; --topbar-h: 60px; --content-max: 1280px; --z-modal: 1000; --z-toast: 1100; /* ---- Breakpoints (referencia; usados em media queries) -------- */ --bp-mobile: 640px; --bp-tablet: 900px; --bp-desktop: 1200px; } /* ---- Tema escuro: apenas os neutros mudam. Marca e status mantem identidade, com pequenos ajustes de contraste. ------------- */ [data-theme="dark"] { --bg: #14171C; --surface: #1D2127; --surface-2: #262B33; --border: #2E343D; --border-strong: #414954; --text: #EDEFF2; --text-2: #B4BCC7; --text-3: #7C848F; --overlay: rgba(0, 0, 0, 0.6); --brand-tint: #35211F; --ok-tint: #16281D; --warn-tint: #2B2411; --danger-tint: #35211F; --info-tint: #142530; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }