/* ============================================================================= Gabarita · tokens.css (copiado de documentacao/referencia-visual; editar lá e aqui) Conceito "Papel & Confete" — ver documentacao/06-design-system.md Tudo o que tem valor mora aqui. Componentes só leem custom properties. Ordem das camadas do projeto inteiro (declarada uma vez, antes de tudo): ============================================================================= */ @layer tokens, base, componentes, layout, telas, utilitarios; @layer tokens { :root { color-scheme: light; /* ------------------------------------------------------------------------ 1. Marca — "marca-texto" (o amarelo que grifa o que importa) e "tinta" ------------------------------------------------------------------------ */ --marca-50: #FFF9E3; --marca-100: #FFF0BF; --marca-300: #FFE07A; --marca-500: #FFC61A; /* preenchimento: botão principal, grifo, anel de foco */ --marca-600: #F0B000; /* hover do preenchimento */ --marca-700: #7F5800; /* texto dourado sobre claro (AA 5.6+) */ --tinta-950: #13112B; --tinta-900: #1D1A3D; /* texto principal, contorno "carimbo" (15.4:1 no papel) */ --tinta-700: #3B3760; /* títulos secundários */ --tinta-500: #625D7A; /* texto de apoio (5.8:1 no papel) */ --tinta-400: #8C87A0; /* ícone desativado, placeholder — NUNCA texto corrido */ --tinta-300: #B8B2C6; --tinta-200: #DAD5E2; /* ------------------------------------------------------------------------ 2. Neutros quentes — papel de caderno, não branco de hospital ------------------------------------------------------------------------ */ --papel: #FBF6EE; /* fundo da página */ --papel-fundo: #F3ECE0; /* áreas rebaixadas, trilhos de barra, skeleton */ --superficie: #FFFDF9; /* cartões, folhas, player */ --superficie-alta: #FFFFFF; /* modal, menu, tooltip claro */ --linha: #EAE1D1; /* divisórias */ --linha-forte: #D8CDB8; /* contorno de cartão em repouso */ --borda-campo: #968B77; /* contorno de campo e alternativa (≥3:1, WCAG 1.4.11) */ --pontilhado: #E6DCCB; /* pontos do "caderno pontilhado" de fundo */ /* ------------------------------------------------------------------------ 3. Semânticas (sempre acompanhadas de ícone + palavra; cor nunca sozinha) ------------------------------------------------------------------------ */ --acerto-50: #E7F8EE; --acerto-100: #C6EFD6; --acerto-500: #1FA95A; --acerto-700: #136B39; --erro-50: #FFEDEE; --erro-100: #FFD3D6; --erro-500: #E5484D; --erro-700: #B0222C; --atencao-50: #FFF5DE; --atencao-100:#FFE6A6; --atencao-500:#F59A0B; --atencao-700:#895000; --info-50: #EAF2FF; --info-100: #D2E3FF; --info-500: #2F74F0; --info-700: #1C52BA; --marcada-500: var(--cor-lilas-500); /* "marquei para revisar" no player */ --marcada-700: var(--cor-lilas-700); /* ------------------------------------------------------------------------ 4. As 14 cores do sistema (matérias, fontes, avatares, turmas, conquistas) 50 fundo tingido 100 chip / borda suave 500 preenchimento, ícone grande, barra, ilustração (NÃO leva texto) 700 texto e ícone sobre 50/100/papel/branco (AA ≥ 4.7:1 em todos) Texto sobre fundo sólido: use 700 como fundo + branco (≥ 6.1:1). ------------------------------------------------------------------------ */ --cor-azul-50:#EBF3FF; --cor-azul-100:#D4E4FF; --cor-azul-500:#2F7BF5; --cor-azul-700:#1B4FB5; --cor-laranja-50:#FFF1E5; --cor-laranja-100:#FFDDC2; --cor-laranja-500:#FF7A1A; --cor-laranja-700:#A84300; --cor-verde-agua-50:#E4F9F2; --cor-verde-agua-100:#BDEFDF; --cor-verde-agua-500:#12B387; --cor-verde-agua-700:#0A6B51; --cor-verde-50:#EDF8E6; --cor-verde-100:#D2EFC3; --cor-verde-500:#46AD2B; --cor-verde-700:#2B6A1A; --cor-turquesa-50:#E3F7F9; --cor-turquesa-100:#BDEBF1; --cor-turquesa-500:#10A5B8; --cor-turquesa-700:#0A6672; --cor-vermelho-50:#FFEDEA; --cor-vermelho-100:#FFD3CC; --cor-vermelho-500:#E5402E; --cor-vermelho-700:#AA2415; --cor-ambar-50:#FFF6DB; --cor-ambar-100:#FFE9A8; --cor-ambar-500:#F2A500; --cor-ambar-700:#855500; --cor-lilas-50:#F6EEFD; --cor-lilas-100:#E9D8FA; --cor-lilas-500:#B27BEA; --cor-lilas-700:#7A3DB6; --cor-rosa-50:#FFEEF5; --cor-rosa-100:#FFD5E7; --cor-rosa-500:#F0609D; --cor-rosa-700:#AC2262; --cor-violeta-50:#F1EDFF; --cor-violeta-100:#DFD6FF; --cor-violeta-500:#7A5CF0; --cor-violeta-700:#5130C7; --cor-indigo-50:#ECEEFD; --cor-indigo-100:#D5DAFA; --cor-indigo-500:#4E5AD4; --cor-indigo-700:#333BA0; --cor-ciano-50:#E4F5FD; --cor-ciano-100:#BFE7FA; --cor-ciano-500:#0CA3E6; --cor-ciano-700:#07669C; --cor-magenta-50:#FDEBFA; --cor-magenta-100:#F8CEF1; --cor-magenta-500:#D43BBE; --cor-magenta-700:#942085; --cor-coral-50:#FFEFEA; --cor-coral-100:#FFD8CD; --cor-coral-500:#FF6A48; --cor-coral-700:#AD381D; /* ------------------------------------------------------------------------ 5. Papéis (use estes nos componentes; os de cima são a matéria-prima) ------------------------------------------------------------------------ */ --fundo: var(--papel); --texto: var(--tinta-900); --texto-suave: var(--tinta-500); --texto-fraco: var(--tinta-400); --texto-invertido:#FFFDF9; --link: var(--cor-azul-700); --foco-anel: var(--tinta-900); --foco-halo: var(--marca-300); --selecao: var(--marca-300); /* cor "local": qualquer elemento com data-cor="…" redefine estas quatro */ --c-50: var(--cor-violeta-50); --c-100: var(--cor-violeta-100); --c-500: var(--cor-violeta-500); --c-700: var(--cor-violeta-700); /* ------------------------------------------------------------------------ 6. Tipografia ------------------------------------------------------------------------ */ --fonte-display: "Bricolage Grotesque", "Bricolage Substituta", "Segoe UI", system-ui, sans-serif; --fonte-ui: "Figtree", "Figtree Substituta", "Segoe UI", Roboto, system-ui, sans-serif; --fonte-leitura: "Literata", "Literata Substituta", Georgia, "Noto Serif", serif; --fonte-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; /* escala fluida (320px → 1280px), razão ~1.2 no celular e ~1.25 no desktop */ --texto-2xs: 0.75rem; /* 12 — só rótulo maiúsculo */ --texto-xs: 0.8125rem; /* 13 */ --texto-sm: 0.875rem; /* 14 */ --texto-md: 1rem; /* 16 — base da interface */ --texto-lg: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem); /* 18–20 */ --texto-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); /* 20–24 */ --texto-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); /* 24–32 */ --texto-3xl: clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem); /* 30–44 */ --texto-4xl: clamp(2.25rem, 1.6rem + 3.2vw, 4rem); /* 36–64 */ --texto-numero-gigante: clamp(3.5rem, 2.4rem + 5.5vw, 6.5rem); /* nota final, XP */ --texto-leitura: clamp(1.0625rem, 1.01rem + 0.25vw, 1.1875rem); /* 17–19 — enunciado */ --altura-justa: 1.1; /* display, números */ --altura-titulo: 1.2; --altura-ui: 1.45; --altura-leitura: 1.65; /* enunciado longo */ --peso-normal: 400; --peso-medio: 500; --peso-semi: 600; --peso-negrito: 700; --peso-extra: 800; --largura-leitura: 66ch; /* coluna do enunciado */ --largura-texto: 48ch; /* parágrafos de interface */ /* ------------------------------------------------------------------------ 7. Espaço (base 4px), raios, bordas ------------------------------------------------------------------------ */ --esp-0-5: 0.125rem; --esp-1: 0.25rem; --esp-1-5: 0.375rem; --esp-2: 0.5rem; --esp-3: 0.75rem; --esp-4: 1rem; --esp-5: 1.25rem; --esp-6: 1.5rem; --esp-8: 2rem; --esp-10: 2.5rem; --esp-12: 3rem; --esp-16: 4rem; --esp-20: 5rem; --esp-pagina: clamp(1rem, 0.6rem + 2vw, 2.5rem); /* respiro lateral */ --raio-xs: 6px; --raio-sm: 10px; --raio-md: 14px; --raio-lg: 20px; --raio-xl: 28px; --raio-2xl: 36px; --raio-pilula: 999px; --borda: 1.5px; --borda-grossa: 2px; --borda-carimbo: 2.5px; /* ------------------------------------------------------------------------ 8. Elevação — sombras quentes e tingidas pela cor local ------------------------------------------------------------------------ */ --sombra-cor-base: rgb(76 52 20); --sombra-1: 0 1px 2px rgb(76 52 20 / 0.06), 0 1px 1px rgb(76 52 20 / 0.04); --sombra-2: 0 2px 4px rgb(76 52 20 / 0.05), 0 6px 16px -4px rgb(76 52 20 / 0.10); --sombra-3: 0 4px 8px rgb(76 52 20 / 0.06), 0 16px 36px -8px rgb(76 52 20 / 0.18); --sombra-cor: 0 10px 24px -10px color-mix(in oklab, var(--c-500) 65%, transparent); --sombra-carimbo: 0 4px 0 0 var(--tinta-900); /* botão principal em repouso */ --sombra-carimbo-baixa: 0 1px 0 0 var(--tinta-900); /* pressionado */ --sombra-foco: 0 0 0 3px var(--superficie), 0 0 0 6px var(--foco-anel), 0 0 0 10px var(--foco-halo); /* ------------------------------------------------------------------------ 9. Movimento ------------------------------------------------------------------------ */ --dur-instante: 90ms; /* pressão de botão */ --dur-rapida: 160ms; /* hover, cor, pequenas trocas */ --dur-media: 260ms; /* entrar/sair de elementos, seleção */ --dur-lenta: 420ms; /* folhas, modais, transição de questão */ --dur-mola: 650ms; /* molas (a curva já contém o assentamento) */ --dur-festa: 1200ms; /* celebração: acerto, conquista */ --dur-confete: 2600ms; --ease-padrao: cubic-bezier(0.3, 0, 0.2, 1); --ease-saida: cubic-bezier(0.16, 1, 0.3, 1); /* entra rápido, assenta devagar */ --ease-entrada:cubic-bezier(0.55, 0, 0.8, 0.2); /* para quem está saindo da tela */ --ease-linear: linear; /* molas amostradas de uma mola amortecida (ζ = 0,72 / 0,45 / 0,30) */ --mola-suave: linear(0, 0.044, 0.149, 0.284, 0.428, 0.565, 0.687, 0.789, 0.871, 0.933, 0.977, 1.007, 1.026, 1.035, 1.038, 1.037, 1.033, 1.028, 1.023, 1.018, 1.013, 1.009, 1.005, 1.003, 1); --mola-quique: linear(0, 0.052, 0.184, 0.362, 0.557, 0.744, 0.906, 1.036, 1.127, 1.182, 1.204, 1.2, 1.178, 1.143, 1.104, 1.065, 1.029, 1, 0.979, 0.966, 0.959, 0.958, 0.962, 0.968, 0.976, 0.984, 0.992, 0.998, 1.003, 1.006, 1.008, 1.009, 1.008, 1.007, 1.005, 1.004, 1); --mola-elastica: linear(0, 0.079, 0.282, 0.549, 0.825, 1.067, 1.245, 1.346, 1.372, 1.335, 1.256, 1.155, 1.053, 0.965, 0.902, 0.869, 0.862, 0.878, 0.909, 0.947, 0.985, 1.016, 1.039, 1.05, 1.051, 1.044, 1.032, 1.018, 1.004, 0.993, 0.985, 0.981, 0.981, 0.984, 0.989, 0.994, 0.999, 1.003, 1.006, 1.007, 1.007, 1.006, 1.004, 1.002, 1); /* multiplicador global: 1 normal · 0 quando o aluno pede menos movimento */ --movimento: 1; /* ------------------------------------------------------------------------ 10. Camadas (z-index) e medidas da casca ------------------------------------------------------------------------ */ --z-base: 0; --z-grudado: 10; --z-navegacao: 50; --z-folha: 80; --z-modal: 90; --z-toast: 100; --z-confete: 110; --z-tooltip: 120; --alvo-toque: 44px; /* mínimo de qualquer coisa tocável */ --alvo-confortavel: 52px; /* botões grandes, alternativas */ --barra-inferior-altura: 68px; --barra-lateral-largura: 248px; --barra-lateral-recolhida: 80px; --topo-altura: 60px; --conteudo-max: 72rem; /* Pontos de quebra (media queries não aceitam var(); use estes valores literais): --bp-sm 30em (480px) · --bp-md 48em (768px) · --bp-lg 64em (1024px) · --bp-xl 80em (1280px) */ } /* cor local por slug — o PHP imprime data-cor="" */ [data-cor="azul"] { --c-50: var(--cor-azul-50); --c-100: var(--cor-azul-100); --c-500: var(--cor-azul-500); --c-700: var(--cor-azul-700); } [data-cor="laranja"] { --c-50: var(--cor-laranja-50); --c-100: var(--cor-laranja-100); --c-500: var(--cor-laranja-500); --c-700: var(--cor-laranja-700); } [data-cor="verde-agua"] { --c-50: var(--cor-verde-agua-50); --c-100: var(--cor-verde-agua-100); --c-500: var(--cor-verde-agua-500); --c-700: var(--cor-verde-agua-700); } [data-cor="verde"] { --c-50: var(--cor-verde-50); --c-100: var(--cor-verde-100); --c-500: var(--cor-verde-500); --c-700: var(--cor-verde-700); } [data-cor="turquesa"] { --c-50: var(--cor-turquesa-50); --c-100: var(--cor-turquesa-100); --c-500: var(--cor-turquesa-500); --c-700: var(--cor-turquesa-700); } [data-cor="vermelho"] { --c-50: var(--cor-vermelho-50); --c-100: var(--cor-vermelho-100); --c-500: var(--cor-vermelho-500); --c-700: var(--cor-vermelho-700); } [data-cor="ambar"] { --c-50: var(--cor-ambar-50); --c-100: var(--cor-ambar-100); --c-500: var(--cor-ambar-500); --c-700: var(--cor-ambar-700); } [data-cor="lilas"] { --c-50: var(--cor-lilas-50); --c-100: var(--cor-lilas-100); --c-500: var(--cor-lilas-500); --c-700: var(--cor-lilas-700); } [data-cor="rosa"] { --c-50: var(--cor-rosa-50); --c-100: var(--cor-rosa-100); --c-500: var(--cor-rosa-500); --c-700: var(--cor-rosa-700); } [data-cor="violeta"] { --c-50: var(--cor-violeta-50); --c-100: var(--cor-violeta-100); --c-500: var(--cor-violeta-500); --c-700: var(--cor-violeta-700); } [data-cor="indigo"] { --c-50: var(--cor-indigo-50); --c-100: var(--cor-indigo-100); --c-500: var(--cor-indigo-500); --c-700: var(--cor-indigo-700); } [data-cor="ciano"] { --c-50: var(--cor-ciano-50); --c-100: var(--cor-ciano-100); --c-500: var(--cor-ciano-500); --c-700: var(--cor-ciano-700); } [data-cor="magenta"] { --c-50: var(--cor-magenta-50); --c-100: var(--cor-magenta-100); --c-500: var(--cor-magenta-500); --c-700: var(--cor-magenta-700); } [data-cor="coral"] { --c-50: var(--cor-coral-50); --c-100: var(--cor-coral-100); --c-500: var(--cor-coral-500); --c-700: var(--cor-coral-700); } [data-cor="marca"] { --c-50: var(--marca-50); --c-100: var(--marca-100); --c-500: var(--marca-500); --c-700: var(--marca-700); } /* Densidade das áreas do professor e do admin: mesma família, menos ar, menos festa */ [data-area="prof"], [data-area="professor"], [data-area="admin"] { --texto-md: 0.9375rem; --texto-leitura: 1.0625rem; --alvo-confortavel: 40px; --raio-lg: 14px; --raio-xl: 18px; --sombra-cor: var(--sombra-1); --movimento: 0.6; --dur-media: 180ms; --dur-lenta: 260ms; } [data-area="admin"] { --fundo: #F7F4EE; } /* Menos movimento: pedido do sistema OU preferência salva na conta (o PHP imprime data-movimento="reduzido" no quando preferencias.reduzir_movimento) */ @media (prefers-reduced-motion: reduce) { :root { --movimento: 0; --mola-suave: var(--ease-padrao); --mola-quique: var(--ease-padrao); --mola-elastica: var(--ease-padrao); --dur-mola: 200ms; --dur-lenta: 200ms; --dur-festa: 400ms; } } :root[data-movimento="reduzido"] { --movimento: 0; --mola-suave: var(--ease-padrao); --mola-quique: var(--ease-padrao); --mola-elastica: var(--ease-padrao); --dur-mola: 200ms; --dur-lenta: 200ms; --dur-festa: 400ms; } /* --------------------------------------------------------------------------- Modo escuro — PREVISTO, NÃO ATIVO NA v1. Os valores ficam aqui para que ninguém escreva cor "na mão" e o escuro chegue trocando só tokens. Ativação futura: (sem media query automática na v1). --------------------------------------------------------------------------- */ :root[data-tema="escuro"] { color-scheme: dark; --papel: #16142B; --papel-fundo: #0F0E1F; --superficie: #1F1C3A; --superficie-alta: #29264A; --linha: #332F55; --linha-forte: #45406B; --borda-campo: #7A7599; --pontilhado: #2A2748; --tinta-900: #F4F1FA; --tinta-700: #D9D4E8; --tinta-500: #ABA5C2; --tinta-400: #7E7899; --texto-invertido: #16142B; --sombra-1: 0 1px 2px rgb(0 0 0 / 0.4); --sombra-2: 0 6px 16px -4px rgb(0 0 0 / 0.5); --sombra-3: 0 16px 36px -8px rgb(0 0 0 / 0.6); --sombra-carimbo: 0 4px 0 0 #0A0916; /* nas cores de matéria, 700 e 50 trocam de papel: texto usa o 100, fundo usa 700 a 25% */ } }