/* ====================================================================== DESIGN TOKENS — Escola Abelhinha Este arquivo é a fonte da verdade de cor, tipografia, raio, sombra e geometria. Nunca escreva cor literal fora daqui. --------------------------------------------------------------------- NOMES SÃO PAPÉIS, NÃO CORES --------------------------------------------------------------------- Os slots chamam-se `--primaria-*`, `--neutro-*`, `--sucesso-*`, `--aviso-*` e `--perigo-*` de propósito. Um token chamado `--mel-500` passa a mentir no dia em que um tema o preenche com azul — e foi exatamente o que aconteceu aqui. Nome de papel sobrevive à troca de paleta; nome de cor, não. --------------------------------------------------------------------- TEMAS --------------------------------------------------------------------- O tema padrão (azul DSA + teal) está definido abaixo, no `:root`. Um tema alternativo é um arquivo em `assets/css/temas/{slug}.css` que redefine SÓ estas variáveis de paleta — nenhuma regra de layout — e é carregado DEPOIS deste arquivo. Como o padrão já é completo, a ausência do arquivo de tema nunca deixa a tela sem cor. O slug vem do banco e vira caminho de arquivo: valide sempre contra o registro em PHP, nunca interpole cru. --------------------------------------------------------------------- ORIGEM DA PALETA --------------------------------------------------------------------- Portada de `../antioquia/assets/css/antioquia.css`, que por sua vez a herdou de `../negocios` — a mesma origem do design system do Abelhinha. Equivalência dos nomes, para quem for comparar os dois arquivos: --primaria-* ⟷ --dsa-* (azul institucional) --neutro-* ⟷ --ink-* (cinza levemente azulado) --sucesso-* ⟷ --teal-* (o Antioquía também usa teal p/ sucesso) --aviso-* ⟷ --amber-* --perigo-* ⟷ --rose-* ====================================================================== */ /* ---------------------------------------------------------------------- Inter Tight — auto-hospedada, 400/500/600/700, subsets latin e latin-ext. Nada de CDN: fonte externa exige rede no primeiro paint, e numa escola com internet instável isso vira tela sem estilo. Os `unicode-range` são os do Google Fonts — o navegador baixa só o arquivo dos caracteres realmente renderizados. Em português o `-ext` quase nunca desce; ele existe para nome próprio com acento incomum. ---------------------------------------------------------------------- */ @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-tight-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-tight-400-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-tight-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-tight-500-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-tight-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-tight-600-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-tight-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-tight-700-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ---- Paleta (trocável por tema) ----------------------------------- */ /* Primária — azul institucional DSA */ --primaria-900: #051E3D; /* fundo da sidebar */ --primaria-800: #072D58; /* botão primário, texto sobre fundo claro */ --primaria-700: #0E437D; --primaria-600: #1E5FA8; --primaria-500: #3B82C4; /* cor da marca */ --primaria-100: #E6F0FA; --primaria-50: #F4F8FC; /* Sucesso — teal. Aluno matriculado, parcela paga, conceito CS. */ --sucesso-700: #0F766E; --sucesso-500: #14B8A6; /* acento: faixa do item ativo da sidebar */ --sucesso-100: #CCFBF1; --sucesso-50: #F0FDFA; /* Aviso — âmbar. Documento pendente, licença a vencer, conceito CR. */ --aviso-700: #B45309; --aviso-500: #F59E0B; --aviso-100: #FEF3C7; --aviso-50: #FFFBEB; /* Perigo — rosa. Erro, inadimplência, conceito CL. */ --perigo-700: #BE123C; --perigo-500: #F43F5E; --perigo-100: #FFE4E6; /* Neutros levemente azulados */ --neutro-900: #0F172A; --neutro-800: #1E293B; --neutro-700: #334155; --neutro-600: #475569; --neutro-500: #64748B; --neutro-400: #94A3B8; --neutro-300: #CBD5E1; --neutro-200: #E2E8F0; --neutro-100: #F1F5F9; --neutro-50: #F8FAFC; --branco: #FFFFFF; /* Conceitos — boletim e mapa de notas (fase 2). Derivam dos papéis acima de propósito: trocar o tema troca o boletim junto. */ --conceito-cs: var(--sucesso-700); --conceito-cr: var(--aviso-700); --conceito-cl: var(--perigo-700); /* Cor da barra do navegador no celular (). Fica aqui para o dia em que o topo.php passar a lê-la do tema. */ --cor-navegador: #072D58; /* Sidebar — fundo escuro. Os translúcidos são brancos com alfa porque precisam funcionar sobre qualquer fundo que um tema escolha; uma cor sólida obrigaria cada tema a recalcular sete tons. */ --sidebar-fundo: var(--primaria-900); --sidebar-borda: rgba(255, 255, 255, 0.08); --sidebar-item: rgba(255, 255, 255, 0.75); --sidebar-item-hover-fundo: rgba(255, 255, 255, 0.06); --sidebar-secao: rgba(255, 255, 255, 0.40); /* Item ativo: faixa de acento à esquerda + gradiente que se dissolve para a direita. Mesmo desenho do Antioquía. */ --sidebar-ativo-fundo: linear-gradient(90deg, rgba(20, 184, 166, 0.18), rgba(20, 184, 166, 0.06)); --sidebar-ativo-faixa: var(--sucesso-500); /* ---- Estrutura (não muda com o tema) ------------------------------ */ --fonte-ui: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --fonte-mono: 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace; /* Raios */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 999px; /* Sombras suaves */ --sombra-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --sombra-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04); --sombra-lg: 0 12px 32px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04); /* Layout */ --sidebar-largura: 232px; --topbar-altura: 64px; --bottomnav-altura: 60px; /* Alvo de toque mínimo (spec D12) */ --toque-min: 44px; --transicao: 200ms ease; }