/* Aprovato, tokens do design system (seção 4 do arquivo mestre). Tema claro é o padrão; o escuro é aplicado por [data-tema="escuro"] no . */ :root { /* Marca */ --apr-verde: #00DE87; --apr-grafite: #131313; --apr-papel: #F1F1F3; /* Escala do verde */ --apr-verde-50: #E9FCF3; --apr-verde-100: #BDF6DC; --apr-verde-300: #6EEBB6; --apr-verde-500: #00DE87; --apr-verde-600: #00A868; --apr-verde-700: #00794C; --apr-verde-900: #042E1F; /* Neutros */ --apr-n-000: #FFFFFF; --apr-n-050: #F1F1F3; --apr-n-150: #E4E4E8; --apr-n-300: #C9C9D1; --apr-n-500: #8A8A92; --apr-n-550: #63636B; /* texto terciário do tema claro (o n-500 sobre superfície clara ficava em 2,7:1) */ --apr-n-450: #A0A0AA; /* texto terciário do tema escuro */ --apr-n-700: #55555C; --apr-n-850: #262628; --apr-n-900: #1C1C1E; --apr-n-950: #131313; /* Semânticas */ --apr-acerto: #00DE87; --apr-atencao: #FFB627; --apr-erro: #FF5252; --apr-info: #4D9BFF; /* Tema claro: superfícies e tintas */ --apr-fundo: var(--apr-papel); --apr-superficie: var(--apr-n-000); --apr-superficie-2: var(--apr-n-150); --apr-superficie-3: var(--apr-n-300); --apr-tinta: var(--apr-grafite); --apr-tinta-2: var(--apr-n-700); --apr-tinta-3: var(--apr-n-550); --apr-verde-texto: var(--apr-verde-700); --apr-verde-suave: var(--apr-verde-50); --apr-linha: var(--apr-n-150); /* Trilho dos gráficos: a parte "ainda não" das barras, colunas e roscas. É um passo mais forte que a superfície do card, senão o gráfico some no fundo branco. */ --apr-grafico-trilho: var(--apr-n-150); /* Série neutra dos gráficos (dia que teve estudo, mas não é hoje). Precisa ser mais forte que o trilho, senão barra com dado e barra vazia viram a mesma coisa. */ --apr-grafico-serie: var(--apr-n-300); --apr-sombra-1: 0 2px 8px rgba(19, 19, 19, 0.08); --apr-sombra-2: 0 8px 24px rgba(19, 19, 19, 0.12); --apr-sombra-3: 0 20px 48px rgba(19, 19, 19, 0.18); /* Tipografia */ --apr-fonte: "Lufga", "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; /* Letra de caderno, só para o texto que o ALUNO escreve (anotações). "Aprovato Nota" é o nome reservado para o dia em que houver um .woff2 próprio em assets/fonts; até lá cai no manuscrito que o aparelho tiver, e em quem não tiver nenhum vira itálico da fonte da casa. */ --apr-fonte-nota: "Aprovato Nota", "Bradley Hand", "Segoe Script", "Comic Sans MS", cursive, var(--apr-fonte); --apr-display: 72px; --apr-h1: 48px; --apr-h2: 32px; --apr-h3: 22px; --apr-corpo: 17px; --apr-small: 14px; --apr-label: 12px; /* Espaço (base 4) */ --apr-e-1: 4px; --apr-e-2: 8px; --apr-e-3: 12px; --apr-e-4: 16px; --apr-e-6: 24px; --apr-e-8: 32px; --apr-e-12: 48px; --apr-e-16: 64px; --apr-e-24: 96px; /* Raio */ --apr-raio-chip: 8px; --apr-raio-input: 16px; --apr-raio-card: 24px; --apr-raio-painel: 32px; --apr-raio-pill: 999px; /* Movimento */ --apr-trans: 160ms cubic-bezier(0.2, 0, 0, 1); --apr-trans-lenta: 320ms cubic-bezier(0.2, 0, 0, 1); color-scheme: light; } [data-tema="escuro"] { --apr-fundo: var(--apr-grafite); --apr-superficie: var(--apr-n-900); --apr-superficie-2: var(--apr-n-850); --apr-superficie-3: var(--apr-n-700); --apr-tinta: var(--apr-papel); --apr-tinta-2: var(--apr-n-300); --apr-tinta-3: var(--apr-n-450); --apr-verde-texto: var(--apr-verde-500); --apr-verde-suave: var(--apr-verde-900); --apr-linha: var(--apr-n-850); --apr-grafico-trilho: var(--apr-n-700); --apr-grafico-serie: var(--apr-n-500); --apr-sombra-1: none; --apr-sombra-2: none; --apr-sombra-3: none; color-scheme: dark; } @media (max-width: 720px) { :root { --apr-display: 48px; --apr-h1: 34px; --apr-h2: 26px; --apr-h3: 20px; --apr-corpo: 16px; --apr-raio-card: 22px; } }