/* ============================================================================ APP SKIN · tokens.css (cardápio digital alinhado ao app Tastti) Espelho de tastti-app/theme.js — fonte Manrope, paleta quente, pesos leves. Carregado SÓ no preview (?preview), DEPOIS de varejo_moderno.css (a base estrutural fica intacta; aqui só trocamos a "pele": fonte, cor, peso, raio). Regra da marca: tipografia LEVE — nunca títulos grandes/bold/pretos. ============================================================================ */ /* Manrope é carregada via no do layout (só no preview). */ :root { /* paleta exata do theme.js */ --app-brand: var(--cor-tema, #f97316); --app-brand-l: #fff7ed; --app-bg: #f5f5f7; --app-card: #ffffff; --app-text: #26262c; /* corpo — cinza-escuro suave, nunca preto */ --app-strong: #2a2a3a; /* títulos */ --app-soft: #52525b; /* secundário */ --app-muted: #6b7280; /* meta/placeholder */ --app-faint: #9ca3af; /* bem leve */ --app-border: #e1e3e9; /* contorno */ --app-line: #ededf1; /* divisória sutil entre itens */ --app-line-2: #d4d7de; /* divisória um tico mais visível */ --app-fill: #f4f4f6; /* preenchimento de chip/tile */ --app-star: #f59e0b; --app-green: #16a34a; --app-red: #dc2626; /* raios do app: sm10 md16 lg22 pill999 */ --app-r-sm: 10px; --app-r-md: 16px; --app-r-lg: 22px; /* sombra suave do app (#1c1c2e @ ~5%) */ --app-shadow: 0 4px 12px rgba(28,28,46,.05); --app-shadow-sm: 0 2px 8px rgba(28,28,46,.045); } /* ---- Fonte global: Manrope. Form controls não herdam family → explícito. Não tocar nos ícones Font Awesome (.fa-*) nem no markup do Lucide. ---- */ html, body, button, input, textarea, select, optgroup { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif !important; } body { background: var(--app-bg) !important; color: var(--app-text) !important; letter-spacing: -0.004em; } /* ---- Normalização de PESO (regra da marca: nada de 800/900) ---- */ .font-black, .font-extrabold { font-weight: 700 !important; } /* ---- Normalização de utilitários Tailwind usados no markup (modais/estados), pra que também migrem pro tom do app sem reescrever cada modal ---- */ .text-slate-900, .text-slate-800, .text-gray-900, .text-gray-800 { color: var(--app-strong) !important; } .text-slate-700, .text-gray-700 { color: #3f3f46 !important; } .text-slate-600, .text-slate-500, .text-gray-600, .text-gray-500 { color: var(--app-soft) !important; } .text-slate-400, .text-gray-400 { color: var(--app-muted) !important; } .bg-gray-50, .bg-slate-50 { background-color: var(--app-bg) !important; } .bg-white { background-color: var(--app-card) !important; } .border-slate-200, .border-gray-200 { border-color: var(--app-border) !important; } /* foco padrão (inputs do app: anel suave da cor da loja) */ input:focus, textarea:focus, select:focus { outline: none !important; border-color: var(--app-brand) !important; box-shadow: 0 0 0 3px rgba(var(--cor-tema-rgb), .12) !important; } ::selection { background: rgba(var(--cor-tema-rgb), .18); }