/* Paleta da LOJA -- catálogo público e vitrine do cliente. * * Fonte única: este arquivo. Cada app o serve pelo próprio /static (symlink), * então não há cópia pra divergir. * * Separada de propósito da paleta do Gira (gira/static/gira-tokens.css): o * sistema interno muda só cor e logo, a loja pode mudar inteira -- é ela que * ganha templates no whitelabel. * * Trocar a cor de marca do cliente = trocar --pink e --pink2 aqui. */ :root{ /* ---- marca ---- */ --pink:#ee2671; /* primária */ --pink2:#f0687d; /* primária clara (hover) */ /* ---- superfícies e texto ---- */ --cream:#fffaee; /* fundo da página */ --card:#FFFFFF; /* fundo de card */ --dark:#1b1918; /* texto forte */ --ink:#1b1918; /* texto corrente */ --muted:#888; /* texto secundário */ --border:#E2DDD5; /* ---- apoio (faixa xadrez, categorias, avisos) ---- */ --amarelo:#e3e552; --coral:#f06262; --lavanda:#8294ca; --petroleo:#1e7f91; --vermelho:#ed404e; --danger:#c0392b; --whats:#25d366; } /* ⭐ `color-scheme` é o ÚNICO controle que temos sobre os widgets nativos do * navegador -- o calendário que abre no campo de data, o seletor de hora, as * setinhas do campo numérico e a barra de rolagem. CSS não pinta esse popup: * ele é desenhado pelo sistema, fora da página. Declarando o esquema, o * navegador desenha a versão ESCURA dele (e o ícone do calendário, que vinha * preto sobre fundo escuro, nasce claro). * Sem esta linha o campo de data era uma janelinha branca no meio do tema * escuro, e não havia seletor de CSS capaz de alcançá-la. */ :root{ color-scheme:light; } :root[data-theme="dark"]{ color-scheme:dark; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; } } /* Tema escuro: hoje só a vitrine liga (atributo data-theme no ). Fica * disponível pro catálogo sem efeito nenhum enquanto ele não ligar. */ :root[data-theme="dark"]{ --ink:#F0EAF2; --dark:#1A1620; --cream:#141117; --card:#201C28; --border:#332C3B; /* Cinza do texto secundario. Sobre o fundo escuro (#141117) o valor anterior (#978FA0) dava ~4:1 -- passa no automatico e cansa de ler. Clareado pra ~7:1, que e o que torna descricao longa confortavel. */ --muted:#B5AEBD; --pink:#FF5C93; --pink2:#FF86AB; --petroleo:#5FBFD2; --lavanda:#9AA9DC; } /* ⚠️ Campo de formulário não herda `color` do body: o user-agent aplica preto. Sem esta regra o texto digitado fica preto sobre fundo escuro -- invisível. Quebrou a busca do catálogo e a tela de login (contraste 1,3) em 12/08. Especificidade mínima de propósito: qualquer regra com classe vence esta. */ input, textarea, select { color: var(--ink); } input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; } /* ---------------------------------------------- item de importação direta Moram aqui, e não no