/* ===================================================================== SPFCBase — tokens de design Cores e tipografia derivadas de docs/manual-de-identidade-visual_2010.pdf Ver seção 10 do CLAUDE.md. Os valores HEX abaixo são OFICIAIS do clube. Não ajustar, não aproximar, não criar variação nova sem que ela saia do manual. ===================================================================== */ :root { /* ---- Logo padrão (manual, p. 3) --------------------------------- */ --spfc-preto-tradicao: #001522; /* Pantone 426 */ --spfc-amarelo-vitoria: #FFC20E; /* Pantone 1235 */ --spfc-vermelho-fibra: #D71920; /* Pantone 186 */ /* ---- Paleta derivada (manual, p. 4) ----------------------------- */ --spfc-cinza-valentim: #48535A; /* Pantone 432 */ --spfc-cinza-king: #DDE4E8; /* Pantone 427 */ --spfc-cinza-peres: #8A9297; /* Pantone 424 */ --spfc-azul-zetti: #002659; /* Pantone 282 */ --spfc-azul-poy: #005496; /* Pantone 287 */ --spfc-amarelo-ceni: #FFDD00; /* Pantone 109 */ --spfc-vermelho-bandeirante:#B11116; /* Pantone 1807 */ --spfc-terra-paulistana: #8B0304; /* Pantone 188 */ --spfc-cafe: #490000; /* Pantone 497 */ /* ---- Papéis semânticos ------------------------------------------ Numa enciclopédia densa quem sustenta a leitura são os cinzas. Vermelho e preto são estrutura e acento, não superfície grande. */ --cor-fundo: #FFFFFF; --cor-fundo-alt: #F4F7F8; /* king clareado */ --cor-fundo-realce: var(--spfc-cinza-king); --cor-borda: #C8D3D9; --cor-borda-forte: var(--spfc-cinza-peres); --cor-texto: var(--spfc-preto-tradicao); --cor-texto-suave: var(--spfc-cinza-valentim); --cor-texto-fraco: var(--spfc-cinza-peres); --cor-texto-invertido: #FFFFFF; --cor-marca: var(--spfc-vermelho-fibra); --cor-marca-escura: var(--spfc-vermelho-bandeirante); --cor-topo: var(--spfc-preto-tradicao); --cor-link: var(--spfc-azul-poy); --cor-link-visitado: var(--spfc-azul-zetti); --cor-foco: var(--spfc-amarelo-vitoria); /* ---- Resultado — vitória / empate / derrota ---------------------- 🚫 VERDE É PROIBIDO NESTE PROJETO. Ver seção 10 do CLAUDE.md. A convenção usual de futebol (verde = vitória) é inaceitável aqui: verde é a cor do rival. O sistema usa só vermelho, branco e preto. Vitória fundo vermelho fibra, texto branco (5,19 — AA) Empate fundo branco, texto preto, borda neutra (18,58 — AA) Derrota fundo preto tradição, texto branco (18,58 — AA) VERMELHO, BRANCO E PRETO — as cores da bandeira, nesta ordem. O amarelo vitória chegou a ocupar o papel de vitória por render mais contraste (11,48), mas dominava a tela e afastava o site da identidade do clube. Vermelho passa em AA com folga e é a cor que o torcedor reconhece. Os três selos são autocontidos: o contraste interno não depende da cor da página, então servem igual no tema claro e no escuro. Isso importa — vermelho como TINTA sobre fundo escuro dá 3,58 e reprovaria. As cores são as mesmas da barra V-E-D logo abaixo, fatia por fatia: quem aprende a barra lê o selo, e vice-versa. Até 14/09/2026 a vitória era contorno vermelho sobre branco, e só a cor da letra e da borda a separava do empate. A cor nunca é a única pista: o selo sempre traz a palavra escrita. */ --selo-vitoria-fundo: var(--spfc-vermelho-fibra); --selo-vitoria-tinta: #FFFFFF; --selo-vitoria-borda: var(--spfc-vermelho-fibra); --selo-empate-fundo: #FFFFFF; --selo-empate-tinta: var(--spfc-preto-tradicao); --selo-derrota-fundo: var(--spfc-preto-tradicao); --selo-derrota-tinta: #FFFFFF; --selo-borda-neutra: var(--spfc-cinza-valentim); /* Fatias da barra V-E-D: a sequência da bandeira. Luminâncias 0,15 / 1,00 / 0,007 — três níveis bem separados, então a barra sobrevive a impressão em cinza e a daltonismo sem precisar de textura. */ --ved-vitoria: var(--spfc-vermelho-fibra); --ved-empate: #FFFFFF; --ved-derrota: var(--spfc-preto-tradicao); /* Texto de resultado fora do selo (ex.: coluna de tabela). */ --cor-vitoria: var(--spfc-vermelho-fibra); --cor-empate: var(--spfc-cinza-valentim); --cor-derrota: var(--spfc-preto-tradicao); /* Dado ausente. Ver seção 3 do CLAUDE.md: nunca renderizar vazio. */ --cor-ausente: var(--spfc-cinza-peres); /* ---- Tipografia ------------------------------------------------- Oficiais (Compacta BT, Univers) são licenciadas e não podem ser servidas. Substitutos aprovados — ver seção 10 do CLAUDE.md. */ --fonte-display: 'Oswald', 'Barlow Condensed', 'Arial Narrow', sans-serif; --fonte-texto: 'Barlow Semi Condensed', 'Barlow', 'Segoe UI', sans-serif; --fonte-tabela: 'Barlow Condensed', 'Barlow Semi Condensed', 'Arial Narrow', sans-serif; --texto-xs: 0.8125rem; --texto-sm: 0.9375rem; --texto-base: 1.0625rem; --texto-lg: 1.25rem; --texto-xl: 1.5rem; --texto-2xl: 2rem; --texto-3xl: 2.75rem; --linha-apertada: 1.2; --linha-normal: 1.55; /* ---- Espaçamento (escala 4px) ----------------------------------- */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --raio: 3px; --raio-caixa: 5px; --largura-conteudo: 62rem; --sombra-caixa: 0 1px 2px rgba(0, 21, 34, 0.08); } /* ===================================================================== Tema escuro — o manual é de material impresso e não prevê modo escuro. As cores continuam sendo as oficiais; o que muda é qual papel cada uma ocupa. Nenhum tom foi inventado ou alterado. ===================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --cor-fundo: var(--spfc-preto-tradicao); --cor-fundo-alt: #04202F; --cor-fundo-realce: #0A2A3A; --cor-borda: #1C3A4A; --cor-borda-forte: var(--spfc-cinza-valentim); --cor-texto: var(--spfc-cinza-king); --cor-texto-suave: #A8B6BE; --cor-texto-fraco: var(--spfc-cinza-peres); --cor-topo: #000D16; /* ÚNICO amarelo que sobra no site, e por restrição técnica: sobre o fundo escuro o vermelho fibra rende 3,58 e reprova em AA; o azul Poy, 2,54. Amarelo vitória rende 11,48 e é a única cor da paleta que passa e ainda se distingue do texto do corpo. Visitado vai em cinza Peres (5,87), que reduz o amarelo pela metade e ainda marca o link já lido. */ --cor-link: var(--spfc-amarelo-vitoria); --cor-link-visitado: var(--spfc-cinza-peres); /* Os selos são autocontidos e não mudam com o tema — só a tinta solta precisa clarear, porque vermelho sobre fundo escuro dá 3,58. */ --selo-borda-neutra: var(--spfc-cinza-peres); --cor-vitoria: var(--spfc-cinza-king); --cor-empate: var(--spfc-cinza-peres); --cor-derrota: var(--spfc-cinza-king); --sombra-caixa: 0 1px 2px rgba(0, 0, 0, 0.4); } } :root[data-tema="escuro"] { --cor-fundo: var(--spfc-preto-tradicao); --cor-fundo-alt: #04202F; --cor-fundo-realce: #0A2A3A; --cor-borda: #1C3A4A; --cor-borda-forte: var(--spfc-cinza-valentim); --cor-texto: var(--spfc-cinza-king); --cor-texto-suave: #A8B6BE; --cor-texto-fraco: var(--spfc-cinza-peres); --cor-topo: #000D16; --cor-link: var(--spfc-amarelo-vitoria); --cor-link-visitado: var(--spfc-cinza-peres); /* Os selos são autocontidos e não mudam com o tema — só a tinta solta precisa clarear, porque vermelho sobre fundo escuro dá 3,58. */ --selo-borda-neutra: var(--spfc-cinza-peres); --cor-vitoria: var(--spfc-cinza-king); --cor-empate: var(--spfc-cinza-peres); --cor-derrota: var(--spfc-cinza-king); --sombra-caixa: 0 1px 2px rgba(0, 0, 0, 0.4); }