/* ============================================================================ design-tokens.css — GLOBAL-FIXO do SuperClickShop (fonte única de verdade). Valores CRAVADOS a partir de design/design-system/DESIGN-SYSTEM.md §2 (decisões do dono, 18/07). É o CHÃO abaixo da marca por-loja (vndl_theme / TEMA.md) e do arquétipo do template. ARQUITETURA (3 camadas — este arquivo é a de baixo): 1. GLOBAL-FIXO ....... ESTE ARQUIVO (neutros/semânticos/escalas — ninguém edita) 2. ARQUÉTIPO ......... :root do template (deriva estilo; redeclara defaults de marca) 3. MARCA por loja .... vndl_theme (2º :root, vence só no que tocou — TEMA §4/§5) + AUTO-CONTRASTE ..... tokens -texto calculados no server (TEMA §7) COMO USAR: no , ANTES do CSS do template (pra o template poder vencer no que redeclara). Consumir sempre via var(--token) — nunca hex/px cru. Convenção: nomes PT são canônicos (§2). Os nomes EN do esqueleto polish (--primary, --bg, --text-dark…) recebem ALIAS no fim (§2.8) — ponte de migração, não fonte-da-verdade. ============================================================================ */ :root { /* --- MARCA: defaults do shell (overridáveis por loja via vndl_theme) --- O esqueleto do marketplace é vermelho; cada loja troca via TEMA. */ --cor-primaria: #dc2626; --cor-primaria-clara: #ef4444; --cor-primaria-escura: #b91c1c; --cor-acao: #dc2626; /* CTA = primária no shell; loja troca (cores.cta) */ --cor-acao-escura: #b91c1c; --cor-acento: var(--cor-primaria); /* fallback TEMA §2: acento = primária */ /* --- NEUTROS (texto / linha / superfície) — polos do auto-contraste §2.1 --- */ --cor-texto: #1b110e; /* texto primário / polo ESCURO (17,16:1 no fundo-página) */ --cor-texto-2: #4A4A5A; /* texto secundário / rótulo */ --cor-texto-3: #7A7A8A; /* texto terciário / legenda */ --cor-placeholder: #AAAAAA; /* placeholder de input / desabilitado */ --cor-linha: #E5E5E5; /* borda / divisória padrão */ --cor-linha-2: #F0EEEB; /* borda fraca */ --cor-branco: #FFFFFF; /* superfície / polo CLARO do auto-contraste */ --cor-fundo: #FFFFFF; /* superfície */ --cor-fundo-pagina: #F7F6F4; /* fundo do body (warm-grey) */ --cor-fundo-sutil: #FBF9F7; /* seção alternada */ /* --- SEMÂNTICOS de estado — do sistema, nunca da marca §2.2 --- Fill médio = ícone/borda/barra. Texto pequeno = pílula clara + par -texto. */ --cor-sucesso: #2D8B5F; /* fill/ícone/borda de sucesso — nunca texto pequeno */ --cor-sucesso-texto: #06331C; /* texto sobre fill sólido — só GRANDE */ --cor-frete-fundo: #E4F6EC; /* pílula "Frete grátis" (fundo claro) */ --cor-frete-texto: #0A7A40; /* pílula "Frete grátis" (texto) — 4,83:1 */ --cor-erro: #D94343; /* danger suave, distinto do vermelho de marca */ --cor-erro-fundo: #FCEAEA; /* pílula de erro "fora de estoque" (fundo claro) */ --cor-erro-texto: #B02A2A; /* pílula de erro (texto) — 5,64:1 */ --cor-alerta: #B87503; /* "últimas unidades", prazo apertado */ --cor-info: #0155A6; /* info neutra — NÃO reusar a primária da marca */ --cor-estrela: #F5A623; /* rating / avaliação */ --cor-whatsapp: #25D366; /* marca de terceiro (canal) */ --cor-pix: #32BCAD; /* marca de terceiro (pagamento) */ /* --- Pares -rgb (pra alpha; §2.8 exige o par de cada cor global) --- */ --cor-primaria-rgb: 220, 38, 38; --cor-primaria-escura-rgb: 185, 28, 28; --cor-texto-rgb: 27, 17, 14; --cor-sucesso-rgb: 45, 139, 95; --cor-erro-rgb: 217, 67, 67; /* --- TIPOGRAFIA §2.6 (famílias default do shell; loja troca via vndl_theme) --- */ --fonte-corpo: 'DM Sans', system-ui, sans-serif; --fonte-titulo: 'Playfair Display', Georgia, serif; --fonte-icones: 'Material Symbols Outlined'; --texto-xs: 0.75rem; /* 12px */ --texto-sm: 0.875rem; /* 14px */ --texto-base: 1rem; /* 16px */ --texto-lg: 1.125rem; /* 18px */ --texto-xl: 1.5rem; /* 24px */ --texto-2xl: 2rem; /* 32px */ --texto-3xl: 2.5rem; /* 40px */ --peso-normal: 400; --peso-medio: 500; --peso-semibold: 600; --peso-bold: 700; --altura-apertada: 1.2; /* título */ --altura-normal: 1.5; /* corpo */ /* --- ESPAÇAMENTO — escala base 4px §2.3 --- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-8: 3rem; /* 48 */ --space-12: 4rem; /* 64 */ --space-16: 6rem; /* 96 */ /* --- RAIO — degrau global; estilo (arredondado vs reto) é do arquétipo §2.4 --- */ --raio-sm: 4px; /* inputs, chips */ --raio-md: 8px; /* cards, botões */ --raio-lg: 16px; /* modais, containers grandes */ --raio-full: 9999px; /* pílulas, avatares */ /* --- SOMBRA — degrau global; tingimento é do arquétipo §2.5 (canônico = polish) --- */ --sombra-sm: 0 1px 4px rgba(0,0,0,.06); --sombra-md: 0 4px 16px rgba(0,0,0,.08); --sombra-lg: 0 8px 32px rgba(0,0,0,.12); --sombra-xl: 0 16px 48px rgba(0,0,0,.14); /* --- LAYOUT §2.3 --- */ --largura-max: 1240px; /* max-width do container */ --largura-texto: 68ch; /* max-width confortável de leitura */ /* --- Z-INDEX — escala nomeada §2.7 --- */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-modal: 1000; --z-toast: 1100; /* --- MOTION §2.8 --- */ --tr: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================================================ ALIAS de compat: EN (esqueleto polish vivo) -> PT (canônico). §2.8 Ponte de migração pro código escrito em EN resolver sem reescrever de uma vez. NÃO é fonte-da-verdade — migrar os consumidores e remover. ============================================================================ */ :root { --primary: var(--cor-primaria); --primary-dark: var(--cor-primaria-escura); --brand: var(--cor-primaria); /* duplicata page-scoped em index.blade */ --bg: var(--cor-fundo); --white: var(--cor-branco); --text-dark: var(--cor-texto); --text-muted: var(--cor-placeholder); --border: var(--cor-linha); --radius: var(--raio-md); --radius-lg: var(--raio-lg); --shadow-md: var(--sombra-md); --primary-rgb: var(--cor-primaria-rgb); /* mata o fallback dessincronizado #B23C15 */ } /* --- BREAKPOINTS (CSS vars não funcionam em @media; use estes valores) §2.7 --- sm: 640px | md: 768px | lg: 1024px | xl: 1280px ------------------------------------------------------------------------- */