/* SOPREMA Apps — Design System v0.1 Tokens base (cor, raio, sombra) — fundação visual para apps internos SOPREMA (Onde Estou, Supplier Gate, LYNCE Agent, futuros). Regra de marca: SOPREMA sempre em caixa alta ao se referir à marca. Não alterar cores/proporções do logo. Manter área limpa ao redor do logo. Como extrair isto pra um Design System de verdade (pacote/CDN compartilhado): 1. Este arquivo (tokens.css) não depende de nada — pode virar @soprema/design-tokens hoje mesmo, sem mudança. 2. components.css depende só destes tokens (nunca usa cor/raio/sombra "hardcoded") — vira @soprema/design-components quando outro app (Supplier Gate, LYNCE Agent) precisar reusar. 3. Cada app consumidor só faz + ".../components.css" e aplica data-theme="dark"/"light" no . */ :root { /* Identidade de marca (não alterar sem aprovação de marca) */ --soprema-blue: #0072CE; --soprema-black: #212322; --soprema-grey: #7C878E; /* Tema claro (padrão) */ --app-bg: #F5F7FA; --app-surface: #FFFFFF; --app-surface-muted: #E7E8EA; --app-border: #D9DEE5; --app-text: #212322; --app-text-muted: #5E6872; /* Escala de azul (identidade principal — nunca vermelho/rosa/roxo como cor principal) */ --blue-900: #06345F; --blue-800: #08477F; --blue-700: #005FAE; --blue-600: #0072CE; --blue-500: #1688E5; --blue-100: #E6F3FF; /* Semântico (só para estado — não para identidade) */ --success: #2E7D32; --warning: #F09100; --danger: #D83B3B; --info: #0072CE; /* Categoria — dá "tempero" visual aos cards de local (cada tipo tem uma cor própria, fundo levemente tingido + badge sólido) sem mexer na identidade de marca (azul continua sendo a cor de ação/CTA/destaque — isto é só categorização visual). */ --cat-blue: #0072CE; --cat-blue-tint: #E6F3FF; --cat-green: #16A34A; --cat-green-tint: #E7F7EE; --cat-violet: #7C5CFF; --cat-violet-tint: #F1EEFF; --cat-amber: #F09100; --cat-amber-tint: #FFF3E0; --cat-teal: #0D9488; --cat-teal-tint: #E3F6F4; /* Forma */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 32px; --shadow-card: 0 12px 32px rgba(0, 35, 70, 0.08); --shadow-floating: 0 18px 48px rgba(0, 35, 70, 0.16); /* Tipografia (recomendada — TDAH-friendly: hierarquia clara, pouca densidade) */ --font-sans: 'Inter', 'Segoe UI', system-ui, sans-serif; --font-size-xs: 11px; --font-size-sm: 13px; --font-size-md: 15px; --font-size-lg: 19px; --font-size-xl: 26px; --font-weight-label: 700; --letter-spacing-label: .06em; } [data-theme="dark"] { --app-bg: #07111D; --app-surface: #101B28; --app-surface-muted: #172638; --app-border: #26394F; --app-text: #F5F7FA; --app-text-muted: #AAB7C4; --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.35); --shadow-floating: 0 20px 56px rgba(0, 0, 0, 0.55); --cat-blue-tint: rgba(22,136,229,.16); --cat-green-tint: rgba(22,163,74,.16); --cat-violet-tint: rgba(124,92,255,.18); --cat-amber-tint: rgba(240,145,0,.16); --cat-teal-tint: rgba(13,148,136,.18); } * { box-sizing: border-box } html, body { margin: 0; padding: 0 } body { background: var(--app-bg); color: var(--app-text); font-family: var(--font-sans); font-size: var(--font-size-md); -webkit-font-smoothing: antialiased; }