/* ============================================================================= SEVEN COFFEE — TOKENS DO SISTEMA DE DESIGN ============================================================================= ESTE É O ÚNICO SÍTIO ONDE SE DEFINEM CORES, ESPAÇAMENTOS E RAIOS. Se precisares de mudar a cor da marca, mudas AQUI e muda em todo o lado. PORQUE É QUE ISTO PASSOU A EXISTIR [v2.5.59]: Antes, o :root estava definido DUAS VEZES — em shop-style.css e em account-style.css — com conteúdos ligeiramente diferentes entre si. E quatro ficheiros (pack-picker, mini-cart, mobile-menu, whatsapp) não usavam token nenhum: tinham as MESMAS cores escritas à mão. Ao todo eram 169 cores em hexadecimal espalhadas pelo CSS, das quais a maioria duplicava tokens que já existiam (#3b1516 aparecia 21 vezes, e é o --scs-dark). Consequência prática: mudar a cor da marca obrigava a procurar e substituir em 8 ficheiros, e bastava falhar um para ficar um botão com a cor antiga. ESTE FICHEIRO CARREGA ANTES DE TODOS OS OUTROS (ver a dependência 'sevencoffee-tokens' nos wp_enqueue_style). ============================================================================= */ :root { /* ---------- MARCA ---------- */ --scs-dark: #3B1516; /* castanho da marca — botões, títulos */ --scs-dark-hover: #2A0F10; /* o mesmo, mais escuro, para :hover */ --scs-dark-soft: #6B3336; /* versão suavizada (menu mobile) */ --scs-accent: #d4a373; /* dourado — realces e :hover de links */ /* ---------- TEXTO ---------- */ --scs-text: #2B2118; /* texto normal */ --scs-muted: #807468; /* texto secundário, rótulos, ajudas */ /* ---------- SUPERFÍCIES ---------- */ --scs-bg: #FFFFFF; /* fundo da página */ --scs-card: #FFFFFF; /* fundo de caixas e cartões */ --scs-soft-bg: #FAF6F1; /* fundo suave — cabeçalhos de tabela, etc. */ --scs-soft-bg-alt: #FFFDFA; /* variante ainda mais clara (pack picker) */ --scs-soft-bg-warm: #F7EFE4; /* variante quente (estado selecionado) */ --scs-border: #E8E2DA; /* bordas normais */ --scs-border-strong: #D9CFC4;/* bordas com mais presença */ --scs-soft-bg-deep: #F1E9DF; /* fundo suave mais saturado (barras, hover) */ /* ---------- ESTADO ---------- */ --scs-error: #B3261E; /* erros, campos inválidos, remover */ --scs-error-hover: #8F1E18; /* o mesmo, mais escuro, para :hover */ --scs-success: #2E7D32; /* confirmações */ --scs-whatsapp: #25D366; /* verde oficial do WhatsApp — não alterar */ /* ---------- TIPOGRAFIA ---------- */ --scs-font-heading: "Cardo", Georgia, serif; --scs-font-body: "Inter", sans-serif; /* ---------- RAIOS ---------- Três degraus, e um para elementos circulares. Os valores foram escolhidos a partir dos que JÁ existiam no CSS, para a consolidação não mudar nada visualmente. */ --scs-radius-xs: 4px; /* etiquetas pequenas, miniaturas */ --scs-radius-sm: 6px; /* botões pequenos, campos */ --scs-radius: 10px; /* omissão — caixas, campos, cartões */ --scs-radius-lg: 14px; /* caixas grandes, modais */ --scs-radius-full: 999px; /* pílulas (barras de progresso, distintivos) */ /* Para círculos verdadeiros continua a usar-se border-radius: 50%, que se adapta ao tamanho do elemento — não é a mesma coisa. */ /* ---------- ESPAÇAMENTO ---------- Escala de 4px. Antes havia 109 valores diferentes espalhados pelo CSS, escolhidos caso a caso — daí as caixas nunca ficarem com o mesmo respiro umas ao lado das outras. NOTA: estes tokens são acrescentados agora mas SÓ SERÃO APLICADOS na Fase 2. Aplicá-los já mudaria o aspeto de tudo ao mesmo tempo, e a Fase 1 tem de ser invisível para se poder confirmar que não partiu nada. */ --scs-space-1: 4px; --scs-space-2: 8px; --scs-space-3: 12px; --scs-space-4: 16px; --scs-space-5: 20px; --scs-space-6: 24px; --scs-space-8: 32px; --scs-space-10: 40px; --scs-space-12: 48px; /* ---------- SOMBRAS ---------- */ /* Três degraus de elevação, todos com a mesma cor de base (o castanho da marca em transparência) para as sombras parecerem da mesma família. Antes havia cinco sombras diferentes só no Pack Picker. */ --scs-shadow-sm: 0 2px 6px rgba(59, 21, 22, 0.18); /* distintivos, pastilhas */ --scs-shadow: 0 2px 16px rgba(59, 21, 22, 0.05); /* omissão — caixas em repouso */ --scs-shadow-md: 0 8px 20px rgba(59, 21, 22, 0.10); /* :hover de cartões */ --scs-shadow-lg: 0 8px 32px rgba(59, 21, 22, 0.12); /* elementos flutuantes */ /* ---------- GRADIENTE DA MARCA ---------- Usado no cabeçalho do painel da conta e no cartão de boas-vindas. Fica aqui em vez de repetido nos dois sítios. */ --scs-gradient-dark: linear-gradient(135deg, #3B1516 0%, #241012 55%, #17090A 100%); } /* ============================================================================= ESTADO VAZIO — padrão partilhado [v2.5.62] ============================================================================= Antes cada ecrã resolvia isto à sua maneira: o carrinho e as encomendas tinham a MESMA caixa escrita duas vezes em ficheiros diferentes, o mini-carrinho tinha só texto centrado, e as moradas tinham um

solto sem caixa nenhuma — parecia que faltava alguma coisa à página. Fica aqui, no ficheiro de tokens, por ser um padrão usado em quatro sítios diferentes e não pertencer a nenhum deles em particular. ============================================================================= */ .scs-empty-state { background: var(--scs-card); border: 1px dashed var(--scs-border-strong); border-radius: var(--scs-radius); padding: var(--scs-space-12) var(--scs-space-6); text-align: center; color: var(--scs-muted); } .scs-empty-state__title { display: block; font-family: var(--scs-font-heading); font-size: 1.15rem; color: var(--scs-text); margin: 0 0 var(--scs-space-2); } .scs-empty-state p { margin: 0 0 var(--scs-space-4); font-size: 0.92rem; line-height: 1.5; } .scs-empty-state p:last-child { margin-bottom: 0; } /* A borda tracejada diz "aqui vai aparecer conteúdo", em vez de "isto é uma caixa vazia por engano" — é a diferença entre parecer inacabado e parecer intencional. */ @media (max-width: 480px) { .scs-empty-state { padding: var(--scs-space-8) var(--scs-space-4); } }