/* ═══════════════════════════════════════════════════════════════════════════ ERP VAREJO — DESIGN SYSTEM 1.0 Sprint 38 · Tokens Institucionais REGRAS DE USO: 1. Este arquivo define os tokens canônicos com prefixo --ds- 2. Tokens existentes (--azul, --verde, etc.) são ALIASES para compatibilidade 3. Em código novo, sempre usar --ds-* (nunca valores literais) 4. Alterações de paleta: SOMENTE aqui, nunca inline 5. Carregado ANTES de premium.css, components.css, design-system.css ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ══════════════════════════════════════════════════ PALETA DE CORES — Escala completa ══════════════════════════════════════════════════ */ /* Primary — Azul institucional */ --ds-primary-50: #eff6ff; --ds-primary-100: #dbeafe; --ds-primary-200: #bfdbfe; --ds-primary-300: #93c5fd; --ds-primary-400: #60a5fa; --ds-primary-500: #3b82f6; --ds-primary-600: #2563eb; /* ← BASE — usar em botões, links, foco */ --ds-primary-700: #1d4ed8; /* ← hover */ --ds-primary-800: #1e40af; --ds-primary-900: #1e3a8a; /* Success — Verde */ --ds-success-50: #f0fdf4; --ds-success-100: #dcfce7; --ds-success-200: #bbf7d0; --ds-success-300: #86efac; --ds-success-500: #22c55e; --ds-success-600: #16a34a; /* ← BASE */ --ds-success-700: #15803d; /* ← hover */ --ds-success-800: #166534; /* Warning — Âmbar */ --ds-warning-50: #fffbeb; --ds-warning-100: #fef3c7; --ds-warning-200: #fde68a; --ds-warning-300: #fcd34d; --ds-warning-500: #f59e0b; --ds-warning-600: #d97706; /* ← BASE */ --ds-warning-700: #b45309; /* ← hover */ --ds-warning-800: #92400e; /* Danger — Vermelho */ --ds-danger-50: #fef2f2; --ds-danger-100: #fee2e2; --ds-danger-200: #fecaca; --ds-danger-300: #fca5a5; --ds-danger-500: #ef4444; --ds-danger-600: #dc2626; /* ← BASE */ --ds-danger-700: #b91c1c; /* ← hover */ --ds-danger-800: #991b1b; /* Info — Ciano */ --ds-info-50: #e0f2fe; --ds-info-100: #bae6fd; --ds-info-600: #0284c7; --ds-info-700: #0369a1; /* Purple */ --ds-purple-50: #f5f3ff; --ds-purple-200: #ddd6fe; --ds-purple-600: #7c3aed; --ds-purple-700: #6d28d9; /* Neutral — Slate */ --ds-neutral-0: #ffffff; --ds-neutral-50: #f8fafc; --ds-neutral-100: #f1f5f9; --ds-neutral-200: #e2e8f0; --ds-neutral-300: #cbd5e1; --ds-neutral-400: #94a3b8; --ds-neutral-500: #64748b; --ds-neutral-550: #596372; /* WCAG AA 5.0:1 em branco */ --ds-neutral-600: #475569; --ds-neutral-700: #334155; --ds-neutral-800: #1e293b; --ds-neutral-900: #0f172a; /* ══════════════════════════════════════════════════ ALIASES SEMÂNTICOS — usar estes no código ══════════════════════════════════════════════════ */ /* Backgrounds */ --ds-bg: #f0f4f8; /* página, área principal */ --ds-surface: #ffffff; /* cards, modais, topbar */ --ds-surface-2: #f8fafc; /* cabeçalhos de card, seções */ --ds-surface-3: #f1f5f9; /* inputs idle, backgrounds sutis */ /* Borders */ --ds-border: #e2e8f0; --ds-border-2: #cbd5e1; /* hover, enfatizado */ --ds-border-focus: var(--ds-primary-600); /* Text */ --ds-text: #0f172a; /* texto principal */ --ds-text-2: #334155; /* texto secundário */ --ds-text-muted: #596372; /* WCAG AA 5.0:1 em branco */ --ds-text-dim: #94a3b8; /* placeholders, desabilitados */ /* Interactive states */ --ds-hover-bg: rgba(37,99,235,.05); --ds-focus-ring: rgba(37,99,235,.15); --ds-overlay: rgba(15,23,42,.55); --ds-disabled-opacity: .45; /* ══════════════════════════════════════════════════ ESPAÇAMENTO — Escala base 4px Uso: padding, margin, gap ══════════════════════════════════════════════════ */ --ds-sp-0: 0; --ds-sp-1: 4px; /* micro: gap entre ícone e texto */ --ds-sp-2: 8px; /* pequeno: badge padding, gap interno */ --ds-sp-3: 12px; /* compacto: btn-sm, input inline */ --ds-sp-4: 16px; /* padrão: padding de item de lista */ --ds-sp-5: 20px; /* médio: gap entre colunas compactas */ --ds-sp-6: 24px; /* card body, padding de seção */ --ds-sp-8: 32px; /* entre seções do dashboard */ --ds-sp-10: 40px; /* espaços maiores */ --ds-sp-12: 48px; /* seções grandes */ --ds-sp-16: 64px; /* hero/banner */ --ds-sp-20: 80px; /* landing */ /* Aliases de componente */ --ds-padding-card: var(--ds-sp-6); /* 24px — card body */ --ds-padding-card-sm: var(--ds-sp-4); /* 16px — card body compacto */ --ds-padding-card-head: 1rem var(--ds-sp-6);/* 16×24 — card header */ --ds-padding-form-ctrl: .625rem .875rem; /* 10×14 — inputs */ --ds-gap-grid: 1.125rem; /* 18px — grade de KPIs */ --ds-gap-section: 2.5rem; /* 40px — entre seções */ /* ══════════════════════════════════════════════════ BORDER RADIUS ══════════════════════════════════════════════════ */ --ds-r-xs: 4px; /* chips de status, tooltip */ --ds-r-sm: 8px; /* botões, inputs, ícones de ação */ --ds-r-md: 14px; /* cards, paineis */ --ds-r-lg: 18px; /* modais, drawers */ --ds-r-xl: 24px; /* modais grandes */ --ds-r-full: 9999px; /* badges, avatares, pills */ /* Aliases semânticos */ --ds-r-card: var(--ds-r-md); --ds-r-badge: var(--ds-r-full); --ds-r-btn: var(--ds-r-sm); --ds-r-input: var(--ds-r-sm); --ds-r-modal: var(--ds-r-lg); --ds-r-kpi-ico: 10px; /* ícone de KPI card */ --ds-r-icon-sm: var(--ds-r-sm); /* ══════════════════════════════════════════════════ SHADOWS — multi-layer, ink-tinted Nota: single-layer = shadow-xs apenas ══════════════════════════════════════════════════ */ --ds-shadow-none: none; --ds-shadow-xs: 0 1px 2px rgba(15,23,42,.03); --ds-shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 2px 5px rgba(15,23,42,.03); --ds-shadow-md: 0 2px 6px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.09); --ds-shadow-lg: 0 4px 12px rgba(15,23,42,.07), 0 16px 40px rgba(15,23,42,.11); --ds-shadow-xl: 0 8px 24px rgba(15,23,42,.10), 0 24px 60px rgba(15,23,42,.15); /* Sombras coloridas para hover */ --ds-shadow-primary: 0 4px 18px rgba(37,99,235,.18), 0 1px 4px rgba(37,99,235,.10); --ds-shadow-success: 0 4px 16px rgba(22,163,74,.20); --ds-shadow-danger: 0 4px 16px rgba(220,38,38,.20); --ds-shadow-inner: inset 0 1px 3px rgba(15,23,42,.06); /* ══════════════════════════════════════════════════ TIPOGRAFIA ══════════════════════════════════════════════════ */ /* Famílias */ --ds-font-brand: 'Syne', sans-serif; /* USO: logo, nome do sistema, página de login, marketing */ --ds-font-ui: 'Inter', sans-serif; /* USO: toda a interface — menus, tabelas, labels, botões, forms */ --ds-font-kpi: Arial, "Helvetica Neue", Helvetica, sans-serif; /* USO: valores numéricos de KPI — monetários, percentuais, scores */ --ds-font-mono: ui-monospace, 'Cascadia Code', 'Menlo', monospace; /* USO: código, hashes, IDs técnicos */ /* Escala de tamanhos */ --ds-fs-2xs: .65rem; /* 10.4px — micro: grupo sidebar, hints */ --ds-fs-xs: .72rem; /* 11.5px — caption: th, badges, datas */ --ds-fs-sm: .8rem; /* 12.8px — small UI: sidebar, btn-sm */ --ds-fs-base: .875rem; /* 14px — corpo: td, forms, alertas */ --ds-fs-md: 1rem; /* 16px — title: card, modal, topbar */ --ds-fs-lg: 1.25rem; /* 20px — h3: seção, KPI médio */ --ds-fs-xl: 1.5rem; /* 24px — KPI principal */ --ds-fs-2xl: 2rem; /* 32px — display: dashboard hero */ --ds-fs-3xl: 3rem; /* 48px — gauge score */ /* Escala de pesos */ --ds-fw-normal: 400; /* corpo */ --ds-fw-medium: 500; /* sidebar items, etiquetas */ --ds-fw-semi: 600; /* botões, labels, th */ --ds-fw-bold: 700; /* KPIs, títulos, destaques */ --ds-fw-black: 800; /* SOMENTE Syne: logo, headings de branding */ /* Line heights */ --ds-lh-tight: 1.18; --ds-lh-snug: 1.4; --ds-lh-base: 1.5; --ds-lh-relaxed: 1.65; /* Letter spacing */ --ds-ls-tight: -0.015em; /* KPIs numéricos */ --ds-ls-normal: 0; --ds-ls-wide: .35px; /* labels uppercase */ --ds-ls-wider: .55px; /* th uppercase small */ /* ══════════════════════════════════════════════════ TRANSIÇÕES ══════════════════════════════════════════════════ */ --ds-transition-fast: .12s ease; /* hover interativo */ --ds-transition-base: .2s ease; /* cards, modais */ --ds-transition-slow: .3s ease; /* drawer, sidebar */ --ds-transition-spring: .25s cubic-bezier(.4,0,.2,1); /* animações premium */ /* ══════════════════════════════════════════════════ Z-INDEX — Escala canônica ══════════════════════════════════════════════════ */ --ds-z-base: 0; --ds-z-raised: 1; --ds-z-sticky: 10; --ds-z-topbar: 50; --ds-z-sidebar: 100; --ds-z-dropdown: 500; --ds-z-tooltip: 900; --ds-z-modal: 9000; --ds-z-toast: 9500; --ds-z-overlay: 8999; /* ══════════════════════════════════════════════════ ALIASES DE COMPATIBILIDADE Mapeia tokens legados para os novos --ds-* Remover gradualmente na Sprint 38B+ ══════════════════════════════════════════════════ */ --azul: var(--ds-primary-600); --azul-esc: var(--ds-primary-700); --azul-claro: var(--ds-primary-50); --azul-mid: var(--ds-primary-200); --verde: var(--ds-success-600); --verde-soft: var(--ds-success-50); --verde-mid: var(--ds-success-300); --vermelho: var(--ds-danger-600); --verm-soft: var(--ds-danger-50); --amarelo: var(--ds-warning-600); --amar-soft: var(--ds-warning-50); --bg: var(--ds-bg); --surface: var(--ds-surface); --surface2: var(--ds-surface-2); --surface3: var(--ds-surface-3); --borda: var(--ds-border); --borda2: var(--ds-border-2); --texto: var(--ds-text); --texto2: var(--ds-text-2); --muted: var(--ds-text-muted); --muted2: var(--ds-text-dim); --shadow-xs: var(--ds-shadow-xs); --shadow-sm: var(--ds-shadow-sm); --shadow: 0 1px 3px rgba(15,23,42,.04), 0 4px 14px rgba(15,23,42,.07); --shadow-md: var(--ds-shadow-md); --shadow-lg: var(--ds-shadow-lg); --shadow-blue: var(--ds-shadow-primary); --radius: var(--ds-r-card); --radius-xs: var(--ds-r-xs); --radius-sm: var(--ds-r-sm); --radius-lg: var(--ds-r-modal); /* Fontes legadas */ --ink-aa: var(--ds-text-muted); --muted-aa: var(--ds-text-muted); /* Typography legada */ --fs-2xs: var(--ds-fs-2xs); --fs-xs: var(--ds-fs-xs); --fs-sm: var(--ds-fs-sm); --fs-base:var(--ds-fs-base); --fs-md: var(--ds-fs-md); --fs-lg: var(--ds-fs-lg); --fs-xl: var(--ds-fs-xl); --fs-2xl: var(--ds-fs-2xl); --fw-regular: var(--ds-fw-normal); --fw-medium: var(--ds-fw-medium); --fw-semi: var(--ds-fw-semi); --fw-bold: var(--ds-fw-bold); --fw-black: var(--ds-fw-black); --lh-tight: var(--ds-lh-tight); --lh-snug: var(--ds-lh-snug); --lh-base: var(--ds-lh-base); --lh-relaxed: var(--ds-lh-relaxed); }