/* ========================================================================== TABYO · Design System v2.0 · FUNDAMENTOS Camada 1 de 2. Nenhum componente aqui, só valores. Toda cor, medida, curva e duração da biblioteca nasce deste arquivo. Maré Clara com um toque da Bioluminescência: botão mais profundo e azulado, e brilho (ciano, menta e lima) nas superfícies escuras. Mesmos princípios do design system do sistema de origem, e Inter. ========================================================================== */ /* As três fontes vêm de assets/fontes, cortadas para o alfabeto latino (gerar-fontes.py). Nenhuma tela chama o Google Fonts: funciona sem internet e o IP de quem opera não sai do sistema. São fontes variáveis: um arquivo cobre todos os pesos da faixa. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fontes/inter-latin.woff2") format("woff2"); } @font-face { font-family: "Unbounded"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("assets/fontes/unbounded-latin.woff2") format("woff2"); } @font-face { font-family: "Spline Sans Mono"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("assets/fontes/spline-sans-mono-latin.woff2") format("woff2"); } :root { /* ---------------------------------------------------------------- */ /* 1. PALETA CRUA: não usar direto em componente. Use os semânticos */ /* ---------------------------------------------------------------- */ /* Neutros tingidos de petróleo (matiz 200 a 225). O --gray-900 é a Tinta da paleta (#07303B) e o --gray-950 é o Abismo, a versão mais fechada dela. Cinza neutro puro ao lado de petróleo parece lavado; o neutro herda o matiz da marca, como o cinza azulado do sistema de origem herdava o dela. */ --gray-0: oklch(1 0 0); --gray-25: oklch(0.985 0.004 200); --gray-50: oklch(0.972 0.006 200); --gray-100: oklch(0.951 0.009 200); --gray-200: oklch(0.911 0.013 200); --gray-300: oklch(0.856 0.017 205); --gray-400: oklch(0.706 0.024 210); --gray-500: oklch(0.495 0.040 215); --gray-600: oklch(0.430 0.045 218); --gray-700: oklch(0.365 0.048 219); --gray-800: oklch(0.325 0.048 220); --gray-900: oklch(0.288 0.047 220.2); /* Tinta */ --gray-950: oklch(0.205 0.035 225); /* Abismo */ /* ---- CORES DE BRILHO DA PALETA ---- Ciano #14B8C4 (Bioluminescência), Menta #2BE3A6 e Lima #C4F25A (Maré Clara). São claras demais para qualquer função de ação sobre branco: texto branco sobre elas dá 2,4:1, 1,7:1 e 1,3:1, e como elemento gráfico o Ciano também reprova (2,4:1, contra 3:1). O lugar delas é SOBRE FUNDO ESCURO, onde brilham: sobre o Abismo dão 7,4:1, 10,7:1 e 13,2:1. Sobre claro valem só para ilustração e detalhe com texto escuro por cima. Mesmo papel que as fitas do logo tinham no sistema de origem. */ --brand-ciano: #14B8C4; /* oklch(0.714 0.119 203) */ --brand-menta: #2BE3A6; /* oklch(0.815 0.165 164) */ --brand-lima: #C4F25A; /* oklch(0.900 0.184 124) */ /* Logo. Altura do logo horizontal; a largura acompanha o arquivo. O mínimo do manual é 100px de largura, que dá cerca de 23px de altura. */ --logo-h-sm: 23px; --logo-h-md: 28px; --logo-h-lg: 40px; /* Marca: petróleo. O 500 é o Petróleo da paleta (#0C8A9A). O matiz deriva de 209 (escuro) para 187 (claro), que é o da Névoa e do Gelo: tinta clara no matiz 209 vira azul-acinzentado, e a paleta nunca faz isso. Os passos 600 a 900 são o caminho do texto e do botão, e é aqui que esta versão se afasta da Maré Clara e do sistema de origem. Medido contra o botão da sistema de origem (teal-700): um passo só mais escuro e azulado ficava a ΔE 5, quase igual; o que afasta é a luminosidade. O fundo de botão é o 700, que é o Petróleo da Bioluminescência (#0A4F63, L 0,398): ΔE 14 do botão da sistema de origem, com texto branco a 9,0:1. O 600 é o texto de ação e o link, um petróleo médio que ainda se distingue do corpo de texto (a Tinta, L 0,288). A cor de ação exata continua o 500, para foco, barra, ícone e gráfico. */ --petrol-50: oklch(0.975 0.018 186); --petrol-100: oklch(0.946 0.034 187); /* Névoa */ --petrol-200: oklch(0.895 0.056 190); --petrol-300: oklch(0.820 0.080 196); --petrol-400: oklch(0.700 0.095 204); --petrol-500: oklch(0.581 0.098 209.4); /* Petróleo · cor de ação */ --petrol-600: oklch(0.470 0.086 219); /* texto de ação, link */ --petrol-700: oklch(0.398 0.071 223.5); /* Petróleo da Bioluminescência · fundo de botão */ --petrol-800: oklch(0.350 0.062 225); /* botão em hover */ --petrol-900: oklch(0.305 0.053 226); /* botão pressionado */ /* Feedback. A marca é fria, então aqui sobra espaço: vermelho e âmbar voltam aos valores do sistema de origem, sem o deslocamento que o laranja exigiu. O que aperta é o verde e o azul: o petróleo está entre os dois (matiz 224 contra 149 e 262). Na Maré Clara eles eram escuros para se afastar de um botão de L 0,545. Com o botão a L 0,398 a conta se inverteu: os mesmos verde e azul escuros colavam nele (ΔE 11 e 13, e 2 sob tritanopia), então agora são mais claros e vivos (L 0,54 e 0,56), do outro lado do botão. */ --red-500: oklch(0.577 0.235 27.3); --red-soft: oklch(0.972 0.012 20); --red-ink: oklch(0.450 0.180 25); --amber-500: oklch(0.790 0.160 75); --amber-soft: oklch(0.985 0.018 90); --amber-ink: oklch(0.450 0.104 60); --green-500: oklch(0.540 0.150 149); --green-soft: oklch(0.970 0.020 145); --green-ink: oklch(0.380 0.100 150); --blue-500: oklch(0.560 0.190 262); --blue-soft: oklch(0.955 0.020 255); --blue-ink: oklch(0.380 0.150 264); --violet-500: oklch(0.560 0.150 295); --violet-soft:oklch(0.960 0.021 295); --violet-ink: oklch(0.430 0.140 295); /* ---------------------------------------------------------------- */ /* 2. COR SEMÂNTICA: é isto que os componentes consomem */ /* ---------------------------------------------------------------- */ /* Fundo e superfícies */ --bg: var(--gray-25); /* fundo da página */ /* ---- O CAMPO ---- Vidro sobre branco chapado não é vidro: o desfoque não tem o que borrar. Este véu é o que as camadas de vidro refratam. Um tom só, o da Névoa (matiz 187), em três passos de luminosidade: o Gelo e a Névoa da paleta, e um passo mais escuro que a paleta não tem. Sem segundo matiz: qualquer outra cor no campo é uma cor que a marca não tem, e o vidro passa a refratar a cor errada. O croma sobe conforme a luminosidade desce, senão o passo escuro lê como cinza sujo em vez de névoa. O passo escuro para em L 0,90: abaixo disso o texto secundário deixa de passar em contraste. Contraste verificado contra os tokens de texto no passo mais escuro: --text 10,6:1 e --text-muted 4,6:1. Os dois passam. */ --wash-light: oklch(0.981 0.010 181.4); /* Gelo */ --wash-base: oklch(0.939 0.031 186.6); /* Névoa */ --wash-deep: oklch(0.900 0.052 188); --bg-wash: radial-gradient(1000px 680px at 10% -10%, var(--wash-deep), transparent 60%), radial-gradient(820px 560px at 94% 2%, var(--wash-light), transparent 58%), radial-gradient(1200px 760px at 52% 110%, var(--wash-base), transparent 64%); /* Versão densa do mesmo campo, para quando uma peça de vidro precisa de contraste atrás para se mostrar (herói, tela de entrada, vazio ilustrado). Mesmo tom, mesma lógica, só com os passos mais separados. Não desce mais do que isto: abaixo de L 0.90 o texto secundário deixa de passar em contraste. */ --bg-field: radial-gradient(560px 360px at 14% 6%, oklch(0.900 0.052 188 / 0.95), transparent 66%), radial-gradient(500px 340px at 90% 88%, oklch(0.955 0.026 186 / 0.95), transparent 64%), linear-gradient(140deg, oklch(0.925 0.042 187), oklch(0.960 0.022 185)); /* ---- SUPERFÍCIE INVERTIDA ---- O sistema é de tema claro só. Mas algumas superfícies precisam ser escuras por função, não por tema: entrada, faixa de marca, cabeçalho de documento. Sem um token sancionado, cada tela inventa o próprio escuro e a plataforma perde a unidade. Aqui é onde mora a Bioluminescência: o Abismo no fundo e três brilhos por cima, Ciano no canto de cima, Menta no de baixo e uma ponta de Lima. Os brilhos são de luminosidade baixa (pico em L 0,46), de propósito: um brilho claro demais come o contraste do texto que está em cima dele. Medido em grade sobre uma caixa de 800 x 400: texto claro dá 7,7:1 e o texto secundário (claro a 72%) 4,8:1 no ponto mais claro do fundo (validar-cores.py repete a conta). */ --surface-inverse: oklch(0.235 0.042 226); --text-on-inverse: oklch(0.985 0.006 190); --bg-field-deep: radial-gradient(620px 420px at 10% 2%, oklch(0.440 0.090 207 / 0.90), transparent 62%), radial-gradient(560px 380px at 92% 98%, oklch(0.460 0.100 165 / 0.62), transparent 60%), radial-gradient(300px 220px at 68% 10%, oklch(0.460 0.100 126 / 0.30), transparent 70%), linear-gradient(140deg, oklch(0.280 0.050 222), oklch(0.195 0.036 228)); /* ---- SUPERFÍCIES ---- Branco, e as rebaixadas são branco com um fio de névoa, nunca cinza. Cinza chapado pesa: introduz uma cor neutra que a marca não tem e puxa a tela para baixo. A mesma luminosidade com um traço do matiz 187 desaparece no fundo e continua parecendo da marca. */ --surface: var(--gray-0); /* card, tabela, painel */ --surface-raised: var(--gray-0); /* popover, modal, dropdown */ --surface-sunken: oklch(0.977 0.007 185); /* cabeçalho de tabela, rodapé */ --surface-hover: oklch(0.970 0.011 186); --surface-active: oklch(0.948 0.018 187); /* Véu CLARO, não escuro. Vidro branco sobre véu escuro vira cinza pesado. Quem separa o painel do que está atrás é o DESFOQUE e a sombra de contato, não o escurecimento. */ --overlay: oklch(0.960 0.018 187 / 0.62); --overlay-blur: blur(10px); /* Texto */ --text: var(--gray-900); --text-muted: var(--gray-500); --text-subtle: var(--gray-400); --text-inverse: var(--gray-0); --text-link: var(--petrol-600); /* Borda */ --border: var(--gray-100); /* separador interno */ --border-strong: var(--gray-200); /* contorno de input, botão secundário */ --border-hover: var(--gray-300); /* Ação primária. Mesma mecânica do sistema de origem: o Petróleo puro dá 4,1:1 com texto branco, e o mínimo é 4,5:1, então o botão usa um passo mais fundo. Na Maré Clara esse passo era quase invisível. Aqui é grande de propósito: o fundo do botão é o Petróleo da Bioluminescência (--petrol-700), com texto branco a 9,0:1. O Petróleo exato fica para foco, barra, ícone e realce, onde o mínimo é 3:1 e ele dá 4,1:1 sobre branco. Hover e pressionado seguem escurecendo, com texto branco: 11,1:1 e 13,2:1. */ --action: var(--petrol-500); --action-hover: var(--petrol-600); --action-active: var(--petrol-700); --action-solid: var(--petrol-700); --action-solid-hover: var(--petrol-800); --action-solid-active: var(--petrol-900); --action-fg: var(--gray-0); --action-soft: var(--petrol-50); --action-soft-fg: var(--petrol-600); --action-soft-hover: var(--petrol-100); /* Ação destrutiva */ --danger: var(--red-500); --danger-hover: oklch(0.520 0.211 27.3); --danger-fg: var(--gray-0); --danger-soft: var(--red-soft); --danger-soft-fg: var(--red-ink); /* Feedback. O sucesso era o teal da marca no sistema de origem. Aqui a marca é petróleo e o sucesso ganhou verde próprio, vivo, para não ler como "mais um tom da marca". A informação também, em azul-cobalto. */ --success: var(--green-500); --success-soft: var(--green-soft); --success-soft-fg: var(--green-ink); --warning: var(--amber-500); --warning-soft: var(--amber-soft); --warning-soft-fg: var(--amber-ink); /* O âmbar de preenchimento é claro demais para virar fio de 1px: dá 1,98:1 sobre branco, e um fio que ninguém vê não destaca nada. Este é o mesmo estado puxado para o laranja e escurecido até passar em contraste (3,3:1). Aqui o laranja não é da marca, então não há o que confundir. */ --warning-line: oklch(0.66 0.17 50); --info: var(--blue-500); --info-soft: var(--blue-soft); --info-soft-fg: var(--blue-ink); --neutral-soft: var(--gray-50); --neutral-soft-fg: var(--gray-600); --accent-soft: var(--violet-soft); --accent-soft-fg: var(--violet-ink); /* Foco, um anel só em toda a biblioteca, e aqui é a própria cor de ação: o Petróleo dá 4,1:1 sobre branco e 3,1:1 sobre o passo mais escuro do campo, acima dos 3:1 que indicador de foco exige. O halo em volta é Menta a 35%: decorativo (o anel é quem garante o contraste) e é o único lugar da interface clara onde o brilho aparece. */ --ring: var(--petrol-500); --ring-shadow: 0 0 0 3px oklch(0.815 0.165 164 / 0.35); /* Vidro: só para camadas que FLUTUAM sobre o conteúdo. Nunca em card ou tabela: vidro atrás de número atrapalha a leitura. O `saturate` é o que separa vidro de "branco translúcido": ele reacende a cor que o blur lava. */ --glass-bg: oklch(1 0 0 / 0.62); --glass-bg-strong: oklch(1 0 0 / 0.88); /* quando há texto denso por cima */ --glass-veil: oklch(1 0 0 / 0.45); /* faixa DENTRO de uma peça de vidro */ --glass-bg-thin: oklch(1 0 0 / 0.22); /* vidro quase todo contorno */ --glass-blur: saturate(180%) blur(24px); --glass-blur-sm: saturate(160%) blur(12px); --glass-border: oklch(1 0 0 / 0.75); /* fio de luz na borda */ --glass-edge: oklch(0.255 0.045 220 / 0.07); /* contorno externo */ /* Realce especular: forte no topo, some antes da metade. É ele que faz a superfície parecer ter espessura em vez de ser um retângulo translúcido. */ --glass-shine: linear-gradient(180deg, oklch(1 0 0 / 0.65), oklch(1 0 0 / 0.06) 38%, oklch(1 0 0 / 0) 70%); --glass-shadow: 0 20px 50px -18px oklch(0.255 0.045 220 / 0.28), 0 4px 12px -4px oklch(0.255 0.045 220 / 0.10); /* ---- Gráficos ---- Ordem FIXA das séries. Nunca cicle, nunca gere uma 5ª cor: a partir daí, agrupe em "Outros" ou separe em gráficos pequenos lado a lado. A cor segue a ENTIDADE, não a posição: filtrar uma série não repinta as outras. Quem aprendeu "Pix é petróleo" continua certo depois do filtro. Validadas com o mesmo critério do sistema de origem: banda de luminosidade (L 0,54 a 0,67), piso de croma (0,10), separação sob daltonismo entre séries adjacentes (ΔE OKLab x100 ≥ 8), piso de visão normal (≥ 15) e contraste ≥ 3:1 contra a superfície. Os números medidos estão no validar-cores.py. Quatro famílias de matiz (petróleo, tijolo, violeta, ouro). Como a marca é fria, o laranja está livre e vira a série 2: o contraste quente e frio é o que separa melhor sob daltonismo. */ --viz-1: #038C9B; /* petróleo da marca, um fio mais saturado */ --viz-2: #BF401B; --viz-3: #8152C3; --viz-4: #B98A07; /* Texto SOBRE cada série (rótulo dentro de barra empilhada). Branco só passa nas séries escuras. O petróleo da série 1 dá 4,0:1 com branco e o ouro da série 4 dá 3,1:1, então ali o texto é escuro (4,8:1 e 5,7:1). */ --viz-1-fg: oklch(0.16 0.025 225); --viz-2-fg: var(--gray-0); --viz-3-fg: var(--gray-0); --viz-4-fg: var(--gray-950); --viz-muted: oklch(0.80 0.010 205); /* série de contexto, quando uma só é o ponto */ --viz-grid: oklch(0.93 0.006 205); /* grade e eixo: fio de 1px, sempre sólido */ --viz-ink: var(--text-muted); /* texto do eixo, nunca a cor da série */ /* Sequencial: UM tom, claro → escuro. Para magnitude. Nunca arco-íris. */ --viz-seq-1: oklch(0.955 0.028 187); --viz-seq-2: oklch(0.880 0.060 190); --viz-seq-3: oklch(0.785 0.085 197); --viz-seq-4: oklch(0.680 0.100 204); --viz-seq-5: oklch(0.540 0.090 210); /* Divergente: dois tons OPOSTOS (frio ↔ quente) com neutro no meio. Para acima/abaixo de uma meta. Nunca dois tons frios nos dois polos. Como no sistema de origem: o polo frio é a marca e o quente é o desvio. */ --viz-div-1: oklch(0.545 0.092 210); --viz-div-2: oklch(0.800 0.060 195); --viz-div-3: oklch(0.900 0.006 205); --viz-div-4: oklch(0.800 0.090 68); --viz-div-5: oklch(0.600 0.140 52); /* ---------------------------------------------------------------- */ /* 3. TIPOGRAFIA */ /* ---------------------------------------------------------------- */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* A fonte do nome. Na interface, só nos três níveis de título (display, h1, h2), no título de estado vazio e na marca. Rótulo, botão, tabela e número seguem em Inter: a Unbounded é larga e, abaixo de 15px, cansa e ocupa espaço que a tela não tem. */ --font-display: "Unbounded", var(--font-sans); /* escala: tamanho / entrelinha / tracking por papel */ /* Unbounded é mais larga que a Inter: o mesmo peso visual sai 2 a 4px menor. */ --text-display: 600 30px/1.14 var(--font-display); --text-h1: 600 22px/1.25 var(--font-display); --text-h2: 600 17px/1.32 var(--font-display); --text-h3: 600 15px/1.4 var(--font-sans); --text-body-lg: 400 15px/1.6 var(--font-sans); --text-body: 400 14px/1.55 var(--font-sans); --text-body-sm: 400 13px/1.5 var(--font-sans); --text-caption: 400 12px/1.45 var(--font-sans); --text-label: 500 13px/1.3 var(--font-sans); --text-overline:700 11px/1.3 var(--font-sans); --text-code: 400 13px/1.6 var(--font-mono); --tracking-tight: -0.02em; /* títulos */ --tracking-display: -0.025em; /* títulos em Unbounded */ --tracking-normal: -0.005em; /* corpo */ --tracking-wide: 0.07em; /* overline / rótulo caixa alta */ /* ---------------------------------------------------------------- */ /* 4. ESPAÇAMENTO · base 4px */ /* ---------------------------------------------------------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ---------------------------------------------------------------- */ /* 5. RAIO */ /* O raio cresce com a SUPERFÍCIE, não com o gosto. Peças do mesmo */ /* papel usam o mesmo valor, sempre: e não existe raio fora desta */ /* escala em lugar nenhum da biblioteca. */ /* ---------------------------------------------------------------- */ --radius-xs: 4px; /* marca miúda: tag quadrada, swatch, checkbox, tecla */ --radius-sm: 6px; /* controle pequeno: botão sm, aba, item de menu, página */ --radius-md: 8px; /* controle padrão: botão, input, select E TODO chip de ícone quadrado, de 30 a 52px: eles têm um papel só, então têm um raio só */ --radius-lg: 16px; /* superfície média: card, tabela, aviso, menu, toast */ --radius-xl: 22px; /* superfície grande: modal, drawer, paleta, trilho */ --radius-2xl: 30px; /* superfície de vidro flutuante */ --radius-full: 999px; /* pílula, avatar, switch, navegação, e qualquer barra de 2–3px de altura */ /* ---------------------------------------------------------------- */ /* 6. SOMBRA · elevação por camada */ /* ---------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(7,40,50,.04); --shadow-sm: 0 1px 3px rgba(7,40,50,.06), 0 1px 2px rgba(7,40,50,.04); --shadow-md: 0 4px 16px -4px rgba(7,40,50,.08), 0 1px 2px rgba(7,40,50,.04); --shadow-lg: 0 12px 40px -8px rgba(7,40,50,.14), 0 2px 4px rgba(7,40,50,.05); --shadow-xl: 0 24px 64px -12px rgba(7,40,50,.20), 0 4px 8px rgba(7,40,50,.06); /* ---------------------------------------------------------------- */ /* 7. ÍCONES · traço, nunca preenchimento. Herdam currentColor. */ /* ---------------------------------------------------------------- */ --icon-stroke: 1.75; --icon-xs: 12px; --icon-sm: 14px; --icon-md: 16px; /* padrão: acompanha texto de 14px */ --icon-lg: 20px; --icon-xl: 24px; /* ---------------------------------------------------------------- */ /* 8. MOVIMENTO */ /* Curvas de Emil Kowalski. As nativas do CSS são fracas demais. */ /* ---------------------------------------------------------------- */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* entrar e sair */ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* mover na tela */ --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* drawer estilo iOS */ /* Molas, amostradas de um oscilador amortecido de verdade e escritas em linear(). Dão overshoot sem biblioteca de animação e sem JS por quadro. Use mola onde o movimento deve parecer ter massa: polegar de switch, marca de checkbox, chip selecionado, painel que assenta. Não use em hover nem em nada disparado em sequência rápida. */ --spring-snappy: linear(0.000 0%, 0.023 4%, 0.079 7%, 0.154 11%, 0.239 14%, 0.325 18%, 0.409 21%, 0.488 25%, 0.561 29%, 0.626 32%, 0.684 36%, 0.734 39%, 0.778 43%, 0.816 46%, 0.847 50%, 0.874 54%, 0.897 57%, 0.916 61%, 0.932 64%, 0.945 68%, 0.955 71%, 0.964 75%, 0.971 79%, 0.977 82%, 0.982 86%, 0.986 89%, 0.989 93%, 0.991 96%, 1.000 100%); --spring-soft: linear(0.000 0%, 0.038 4%, 0.130 7%, 0.251 11%, 0.382 14%, 0.509 18%, 0.626 21%, 0.727 25%, 0.811 29%, 0.879 32%, 0.931 36%, 0.969 39%, 0.995 43%, 1.013 46%, 1.023 50%, 1.028 54%, 1.029 57%, 1.028 61%, 1.025 64%, 1.022 68%, 1.018 71%, 1.014 75%, 1.011 79%, 1.008 82%, 1.005 86%, 1.003 89%, 1.002 93%, 1.001 96%, 1.000 100%); --spring-bounce: linear(0.000 0%, 0.078 4%, 0.262 7%, 0.487 11%, 0.706 14%, 0.889 18%, 1.022 21%, 1.105 25%, 1.143 29%, 1.146 32%, 1.127 36%, 1.096 39%, 1.063 43%, 1.032 46%, 1.008 50%, 0.991 54%, 0.982 57%, 0.978 61%, 0.979 64%, 0.983 68%, 0.988 71%, 0.993 75%, 0.997 79%, 1.000 82%, 1.002 86%, 1.003 89%, 1.003 93%, 1.003 96%, 1.000 100%); --ease-hover: ease; /* cor e hover */ --dur-press: 140ms; /* feedback de clique */ --dur-fast: 160ms; /* hover, cor, tooltip */ --dur-base: 200ms; /* dropdown, accordion, tab */ --dur-slow: 250ms; /* modal */ --dur-drawer: 420ms; /* drawer, sheet */ --dur-toast: 400ms; --dur-spring: 420ms; /* acompanha --spring-soft */ --dur-spring-lg: 560ms;/* acompanha --spring-bounce */ --dur-cometa: 600ms; /* cada arco do Cometa entrando (manual: abertura e entrada) */ --cometa-passo: 160ms; /* atraso entre um arco e o seguinte */ /* ---------------------------------------------------------------- */ /* 9. CAMADAS */ /* ---------------------------------------------------------------- */ --z-sticky: 20; --z-dropdown:40; --z-drawer: 60; --z-modal: 80; --z-toast: 90; --z-tooltip: 100; } /* ============================ RESET ============================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; border: 0 solid var(--border); } html { -webkit-text-size-adjust: 100%; } body { font: var(--text-body); letter-spacing: var(--tracking-normal); background-color: var(--bg); background-image: var(--bg-wash); background-attachment: fixed; color: var(--text); -webkit-font-smoothing: antialiased; transition: background var(--dur-base) var(--ease-hover), color var(--dur-base) var(--ease-hover); } img, svg { display: block; max-width: 100%; } /* `display:block` acima vence o `[hidden] { display:none }` do navegador, porque regra de autor ganha da folha do agente. Sem esta linha, um SVG com `hidden` continua aparecendo: era o caso dos dois ícones do mostrar/ocultar senha, que apareciam juntos. */ [hidden] { display: none !important; } button, input, select, textarea { font: inherit; color: inherit; background: none; } button { cursor: pointer; } a { color: inherit; text-decoration: none; } :where(svg) { stroke-width: var(--icon-stroke); } /* Anel de foco único: só no teclado, nunca no clique de mouse */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); } /* Movimento reduzido: mantém o que explica, remove o que desloca. Não é "zero animação": é animação mais curta e sem translado. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 120ms !important; scroll-behavior: auto !important; } }