/* assets/css/tokens.css * ============================================================ * GSHIELD — TOKENS * ============================================================ * * Nenhum componente do sistema conhece cor literal. Tudo passa por * variável, e cada variável tem dois valores: um no tema claro e um * no escuro. * * A regra prática: se você escrever `#` fora deste arquivo, alguma * coisa vai ficar invisível num dos temas. Já aconteceu em todo * projeto que tentou o contrário. * * ───────────────────────────────────────────────────────────── * COMO O TEMA É ESCOLHIDO * ───────────────────────────────────────────────────────────── * * 1. `data-tema="claro"` ou `"escuro"` no ganha de tudo * 2. sem atributo, segue o sistema (prefers-color-scheme) * * O atributo é posto por um script inline no , ANTES do CSS * carregar. Sem isso o app pisca branco antes de virar escuro — * e num app que se abre dezenas de vezes por dia isso incomoda de * verdade. * ============================================================ */ @layer tokens { :root { /* ───────────────────────────────────────────── TIPOGRAFIA ───────────────────────────────────────────── */ /* Uma pilha de sistema, sem webfont. Webfont em app de cofre significa esperar rede para ler a própria senha — e, se vier de CDN, é um terceiro sabendo quando você abre o cofre. */ --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Monospace SÓ para valor de credencial. Senha em fonte proporcional parece texto; em mono parece dado — e o zero corta, o l não confunde com 1. */ --fonte-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace; --texto-xs: 0.75rem; /* 12px — etiqueta, contador */ --texto-sm: 0.8125rem; /* 13px — meta, apoio */ --texto-md: 0.9375rem; /* 15px — corpo, título de card */ --texto-lg: 1.1875rem; /* 19px — título de seção */ --texto-xl: 1.5rem; /* 24px — título de tela */ --peso-normal: 400; --peso-medio: 500; /* ───────────────────────────────────────────── ESPAÇO E FORMA ───────────────────────────────────────────── */ --esp-1: 0.25rem; --esp-2: 0.5rem; --esp-3: 0.75rem; --esp-4: 1rem; --esp-5: 1.375rem; --esp-6: 2rem; --esp-7: 3rem; --raio-sm: 7px; --raio-md: 10px; --raio-lg: 14px; --raio-xl: 16px; --raio-cheio: 999px; /* Alvo mínimo de toque. 44px é a recomendação da Apple e o que funciona na prática — botão de copiar senha com 32px faz você errar e revelar o card errado, que fica na trilha de auditoria como acesso indevido. */ --alvo: 44px; /* Altura de controle no desktop, onde há ponteiro preciso */ --altura-controle: 38px; /* ───────────────────────────────────────────── MOVIMENTO ───────────────────────────────────────────── */ --dur-rapida: 120ms; --dur-media: 200ms; --dur-lenta: 320ms; --ease-saida: cubic-bezier(0.2, 0, 0, 1); --ease-entrada: cubic-bezier(0.3, 0, 0.8, 0.15); /* ───────────────────────────────────────────── CAMADAS ───────────────────────────────────────────── */ --z-conteudo: 1; --z-barra: 50; --z-drawer: 100; --z-modal: 200; --z-trancado: 300; /* a cortina do cofre fica acima de tudo */ --z-aviso: 400; } /* ============================================================ TEMA CLARO — padrão ============================================================ */ :root, :root[data-tema="claro"] { color-scheme: light; /* Superfícies. `--fundo` é off-white, não branco: card branco sobre fundo branco não se separa, e a sombra que resolveria isso deixa a interface pesada. */ /* Degrau maior entre fundo e card. Com #f6f6f4 e #ffffff a * diferença é de 2% de luminância — invisível em monitor com * brilho alto, que é como quase todo mundo usa. */ --fundo: #eeeee9; --sup-1: #ffffff; /* card */ --sup-2: #e6e4dc; /* etiqueta, campo, botão discreto */ --sup-3: #dcdad1; /* hover de superfície */ --sup-flutuante: #ffffff; /* No tema claro o card PRECISA de borda: branco sobre off-white não tem contraste suficiente sozinho. No escuro a diferença de superfície basta e a borda ficaria suja. É a única diferença estrutural entre os dois temas. */ /* CONTRASTE — corrigido depois de ver na tela. * * A primeira versão usava borda em 9% e texto secundário em * #71716c. No papel passava o mínimo da WCAG; na prática a * interface ficou lavada: card branco sobre off-white sem * separação visível, e meta de card quase apagada. * * O erro foi calibrar olhando valores de contraste em vez de * olhar a tela. Um card que "tecnicamente" se separa do fundo mas * que você não enxerga não está separado. * * Borda 14% e texto-2 em #57574f: o secundário chega a 7:1 sobre * branco, bem acima do 4.5:1 exigido, e é o que dá o "peso" que * faltava. */ --borda: rgba(0, 0, 0, 0.14); --borda-forte: rgba(0, 0, 0, 0.26); --borda-card: 1px solid var(--borda); --texto: #16160f; --texto-2: #57574f; --texto-3: #7d7d74; /* Cortina do cofre trancado */ --cortina: rgba(238, 238, 233, 0.82); --sombra-modal: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06); --sombra-sheet: 0 -8px 28px rgba(0, 0, 0, 0.1); /* ── Tintas de categoria ── Par fundo/traço por cor. No claro: fundo pálido, traço escuro. Os pares foram escolhidos para passar contraste AA — ícone de 20px em cor clara sobre fundo claro desaparece. */ --tinta-azul-bg: #d8e8f8; --tinta-azul-fg: #124b85; --tinta-verde-bg: #d3efe4; --tinta-verde-fg: #0b5745; --tinta-ambar-bg: #f7e4c4; --tinta-ambar-fg: #6b3f08; --tinta-vermelho-bg: #fadfdf; --tinta-vermelho-fg: #8a2323; --tinta-violeta-bg: #e4e2fc; --tinta-violeta-fg: #443b9e; --tinta-rosa-bg: #f8dde6; --tinta-rosa-fg: #822c48; --tinta-coral-bg: #f8e0d7; --tinta-coral-fg: #823115; --tinta-cinza-bg: #e2e0d7; --tinta-cinza-fg: #4d4c47; /* ── Papéis semânticos ── */ --alerta-bg: #f7e4c4; --alerta-fg: #6b3f08; --perigo-bg: #fadfdf; --perigo-fg: #8a2323; --ok-bg: #d3efe4; --ok-fg: #0b5745; /* Foco. Anel visível é acessibilidade, não enfeite: quem navega por teclado precisa saber onde está antes de apertar "revelar". */ --foco: #185fa5; } /* ============================================================ TEMA ESCURO ============================================================ */ :root[data-tema="escuro"] { color-scheme: dark; /* Cinza-azulado, não quase-preto. Preto puro com texto branco causa halo em tela OLED e cansa a vista em sessão longa — e dá cara de terminal, que não é o que este app é. */ --fundo: #17181c; --sup-1: #1e2026; --sup-2: #282a31; --sup-3: #31343c; --sup-flutuante: #22242a; /* Sem borda no card: a diferença entre --fundo e --sup-1 já separa, e borda clara em tema escuro parece contorno de wireframe. --borda existe só para divisores internos. */ --borda: rgba(255, 255, 255, 0.13); --borda-forte: rgba(255, 255, 255, 0.24); --borda-card: 1px solid rgba(255, 255, 255, 0.07); --texto: #f4f5f7; --texto-2: #a3a8b3; --texto-3: #757a85; --cortina: rgba(23, 24, 28, 0.78); --sombra-modal: 0 16px 40px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3); --sombra-sheet: 0 -8px 28px rgba(0, 0, 0, 0.45); /* No escuro inverte: fundo é a tinta dessaturada e escura, traço é a cor clara. */ --tinta-azul-bg: #2a3444; --tinta-azul-fg: #8ab4f8; --tinta-verde-bg: #2b3a33; --tinta-verde-fg: #6ec9a0; --tinta-ambar-bg: #3a2f28; --tinta-ambar-fg: #e8a95f; --tinta-vermelho-bg: #3b2a2a; --tinta-vermelho-fg: #f09595; --tinta-violeta-bg: #302f43; --tinta-violeta-fg: #afa9ec; --tinta-rosa-bg: #3a2b33; --tinta-rosa-fg: #ed93b1; --tinta-coral-bg: #3b2c25; --tinta-coral-fg: #f0997b; --tinta-cinza-bg: #282a31; --tinta-cinza-fg: #9aa0ab; --alerta-bg: #3a2f28; --alerta-fg: #e8a95f; --perigo-bg: #3b2a2a; --perigo-fg: #f09595; --ok-bg: #2b3a33; --ok-fg: #6ec9a0; --foco: #8ab4f8; } /* ============================================================ TEMA NOITE — quase-preto frio, contraste alto ============================================================ */ :root[data-tema="noite"] { --fundo: #0b0d12; --sup-1: #141821; --sup-2: #1e2430; --sup-3: #28303f; --sup-flutuante: #181d27; --borda: rgba(150, 180, 220, 0.16); --borda-forte: rgba(150, 180, 220, 0.32); --borda-card: 1px solid rgba(150, 180, 220, 0.10); --texto: #eef2f8; --texto-2: #96a3b8; --texto-3: #65717f; --cortina: rgba(11, 13, 18, 0.86); --sombra-modal: 0 16px 40px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3); --sombra-sheet: 0 -8px 28px rgba(0, 0, 0, 0.45); --tinta-azul-bg: #16293f; --tinta-azul-fg: #6cb2ff; --tinta-verde-bg: #0f2e26; --tinta-verde-fg: #4fd6a8; --tinta-ambar-bg: #33260f; --tinta-ambar-fg: #f0b95f; --tinta-vermelho-bg: #361a1e; --tinta-vermelho-fg: #ff8b8b; --tinta-violeta-bg: #241f3d; --tinta-violeta-fg: #a99bff; --tinta-rosa-bg: #33182a; --tinta-rosa-fg: #ff8fbc; --tinta-coral-bg: #361f18; --tinta-coral-fg: #ff9470; --tinta-cinza-bg: #1e2430; --tinta-cinza-fg: #93a1b5; --alerta-bg: #33260f; --alerta-fg: #f0b95f; --perigo-bg: #361a1e; --perigo-fg: #ff8b8b; --ok-bg: #0f2e26; --ok-fg: #4fd6a8; --foco: #6cb2ff; color-scheme: dark; } /* ============================================================ TEMA PAPEL — claro quente, pouco azul, para uso longo de dia ============================================================ */ :root[data-tema="papel"] { --fundo: #efe9dd; --sup-1: #fdfaf3; --sup-2: #e5ddcc; --sup-3: #dad0bb; --sup-flutuante: #fdfaf3; --borda: rgba(70, 55, 30, 0.16); --borda-forte: rgba(70, 55, 30, 0.30); --borda-card: 1px solid rgba(70, 55, 30, 0.14); --texto: #231d12; --texto-2: #5c5140; --texto-3: #8a7d68; --cortina: rgba(239, 233, 221, 0.86); --sombra-modal: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06); --sombra-sheet: 0 -8px 28px rgba(0, 0, 0, 0.1); --tinta-azul-bg: #d9e4ee; --tinta-azul-fg: #1d4b73; --tinta-verde-bg: #d8e8d6; --tinta-verde-fg: #2c5730; --tinta-ambar-bg: #f2e2bd; --tinta-ambar-fg: #6d4a08; --tinta-vermelho-bg: #f0dcd6; --tinta-vermelho-fg: #8a2f21; --tinta-violeta-bg: #e2dced; --tinta-violeta-fg: #4a3d78; --tinta-rosa-bg: #f0d9dd; --tinta-rosa-fg: #7d3245; --tinta-coral-bg: #f2ddd0; --tinta-coral-fg: #8a4520; --tinta-cinza-bg: #e5ddcc; --tinta-cinza-fg: #4e4536; --alerta-bg: #f2e2bd; --alerta-fg: #6d4a08; --perigo-bg: #f0dcd6; --perigo-fg: #8a2f21; --ok-bg: #d8e8d6; --ok-fg: #2c5730; --foco: #1d4b73; color-scheme: light; } /* ============================================================ SEGUIR O SISTEMA ============================================================ Vale só quando NÃO há data-tema — a escolha explícita do usuário sempre ganha. */ @media (prefers-color-scheme: dark) { :root:not([data-tema]) { color-scheme: dark; --fundo: #17181c; --sup-1: #1e2026; --sup-2: #282a31; --sup-3: #31343c; --sup-flutuante: #22242a; --borda: rgba(255, 255, 255, 0.13); --borda-forte: rgba(255, 255, 255, 0.24); --borda-card: 1px solid rgba(255, 255, 255, 0.07); --texto: #f4f5f7; --texto-2: #a3a8b3; --texto-3: #757a85; --cortina: rgba(23, 24, 28, 0.78); --sombra-modal: 0 16px 40px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3); --sombra-sheet: 0 -8px 28px rgba(0, 0, 0, 0.45); --tinta-azul-bg: #2a3444; --tinta-azul-fg: #8ab4f8; --tinta-verde-bg: #2b3a33; --tinta-verde-fg: #6ec9a0; --tinta-ambar-bg: #3a2f28; --tinta-ambar-fg: #e8a95f; --tinta-vermelho-bg: #3b2a2a; --tinta-vermelho-fg: #f09595; --tinta-violeta-bg: #302f43; --tinta-violeta-fg: #afa9ec; --tinta-rosa-bg: #3a2b33; --tinta-rosa-fg: #ed93b1; --tinta-coral-bg: #3b2c25; --tinta-coral-fg: #f0997b; --tinta-cinza-bg: #282a31; --tinta-cinza-fg: #9aa0ab; --alerta-bg: #3a2f28; --alerta-fg: #e8a95f; --perigo-bg: #3b2a2a; --perigo-fg: #f09595; --ok-bg: #2b3a33; --ok-fg: #6ec9a0; --foco: #8ab4f8; } } /* ============================================================ PREFERÊNCIAS DE ACESSIBILIDADE ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --dur-rapida: 0ms; --dur-media: 0ms; --dur-lenta: 0ms; } } /* Alto contraste: reforça bordas em vez de mexer nas cores. */ @media (prefers-contrast: more) { :root { --borda: rgba(0, 0, 0, 0.28); --borda-forte: rgba(0, 0, 0, 0.5); --borda-card: 1px solid var(--borda); --texto-2: #4a4a46; } :root[data-tema="escuro"] { --borda: rgba(255, 255, 255, 0.25); --borda-forte: rgba(255, 255, 255, 0.45); --borda-card: 1px solid var(--borda); --texto-2: #b4b8c0; } } }