/* ========================================================================== CONPSI · Design System · FUNDAMENTOS Camada 1 de 2. Nenhum componente aqui — só valores. Toda cor, medida, curva e duração da biblioteca nasce deste arquivo. ========================================================================== */ @font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-latin-v17.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Spline Sans Mono"; src: url("fonts/spline-sans-mono-latin-v13.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; } :root { /* ---------------------------------------------------------------- */ /* 1. PALETA CRUA — não usar direto em componente. Use os semânticos */ /* ---------------------------------------------------------------- */ /* Neutros (azulados, alinhados ao cinza da marca) */ --gray-0: oklch(1 0 0); --gray-25: oklch(0.985 0.002 250); --gray-50: oklch(0.972 0.003 250); --gray-100: oklch(0.951 0.004 250); --gray-200: oklch(0.911 0.006 250); --gray-300: oklch(0.856 0.008 251); --gray-400: oklch(0.706 0.013 252); --gray-500: oklch(0.503 0.017 254); --gray-600: oklch(0.412 0.017 253); --gray-700: oklch(0.320 0.017 252); --gray-800: oklch(0.256 0.015 252); --gray-900: oklch(0.207 0.017 252); --gray-950: oklch(0.155 0.012 252); /* ---- CORES OFICIAIS DA MARCA ---- As duas fitas do símbolo, medidas do arquivo original. ATENÇÃO: elas são cor de LOGO, não cor de ação. As duas são claras demais — texto branco sobre elas dá 1,85:1 e 2,14:1, muito abaixo do mínimo de 4,5:1. Nunca use como fundo de botão, badge ou link. Onde valem: o próprio logo, ilustração, e detalhe decorativo com texto escuro por cima. */ --brand-green: #78D0A0; /* oklch(0.789 0.110 159) */ --brand-blue: #78B8E8; /* oklch(0.758 0.096 242) */ /* Marca — teal ConPsi. Fica entre as duas fitas (hue 184, contra um ponto médio de 200) e escurecido até virar cor de ação utilizável. */ --teal-50: oklch(0.975 0.018 187); --teal-100: oklch(0.946 0.035 187); --teal-200: oklch(0.896 0.062 187); --teal-300: oklch(0.825 0.092 187); --teal-400: oklch(0.750 0.115 187); --teal-500: oklch(0.680 0.130 187); /* cor primária */ --teal-600: oklch(0.620 0.120 188); --teal-700: oklch(0.530 0.100 189); --teal-800: oklch(0.430 0.080 190); --teal-900: oklch(0.330 0.060 190); /* Feedback */ --red-500: oklch(0.577 0.245 27.3); --red-soft: oklch(0.972 0.020 20); --red-ink: oklch(0.450 0.180 25); --amber-500: oklch(0.790 0.160 75); --amber-soft: oklch(0.985 0.040 90); --amber-ink: oklch(0.450 0.130 60); --blue-500: oklch(0.550 0.090 240); --blue-soft: oklch(0.955 0.015 240); --blue-ink: oklch(0.420 0.080 245); --violet-500: oklch(0.560 0.150 295); --violet-soft:oklch(0.960 0.025 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. Monocromático: UM tom só — o teal 187 da marca — em três passos de luminosidade. Um mais claro, o da marca diluído, e um pouco mais escuro. Sem segundo hue: qualquer outro tom no campo introduz 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 teal. Contraste verificado contra os dois tokens de texto no passo mais escuro: --text 13,6:1 e --text-muted 4,5:1. Os dois passam. */ --wash-light: oklch(0.972 0.028 187); /* mais claro */ --wash-base: oklch(0.945 0.050 187); /* o teal da marca, diluído */ --wash-deep: oklch(0.900 0.068 187); /* um pouco mais escuro */ --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.070 187 / 0.95), transparent 66%), radial-gradient(500px 340px at 90% 88%, oklch(0.955 0.032 187 / 0.95), transparent 64%), linear-gradient(140deg, oklch(0.925 0.055 187), oklch(0.960 0.030 187)); /* ---- 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. Mesmo hue 187 da marca, escurecido. Texto branco dá 11,9:1 aqui. */ --surface-inverse: oklch(0.300 0.055 187); --text-on-inverse: oklch(0.985 0.005 187); --bg-field-deep: radial-gradient(620px 420px at 12% 4%, oklch(0.370 0.075 187), transparent 66%), radial-gradient(540px 380px at 88% 92%, oklch(0.255 0.045 200), transparent 64%), linear-gradient(140deg, oklch(0.315 0.060 187), oklch(0.235 0.042 197)); /* ---- SUPERFÍCIES ---- Branco, e as rebaixadas são branco com um fio de teal — 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 de 187 desaparece no fundo e continua parecendo ConPsi. */ --surface: var(--gray-0); /* card, tabela, painel */ --surface-raised: var(--gray-0); /* popover, modal, dropdown */ --surface-sunken: oklch(0.977 0.006 187); /* cabeçalho de tabela, rodapé */ --surface-hover: oklch(0.970 0.009 187); --surface-active: oklch(0.948 0.014 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(--teal-700); /* 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 */ --action: var(--teal-500); --action-hover: var(--teal-600); --action-active: var(--teal-700); --action-fg: var(--gray-0); /* Fundo do botão com texto branco: o teal-500 dá 2,7:1 e o mínimo é 4,5:1. O teal-700 dá 4,9:1. O teal-500 segue valendo para foco, barra e realce. */ --action-solid: var(--teal-700); --action-solid-hover: var(--teal-800); --action-solid-active: var(--teal-900); --action-soft: var(--teal-50); --action-soft-fg: var(--teal-700); --action-soft-hover: var(--teal-100); /* Ação destrutiva */ --danger: var(--red-500); --danger-hover: oklch(0.520 0.230 27.3); --danger-fg: var(--gray-0); --danger-soft: var(--red-soft); --danger-soft-fg: var(--red-ink); /* Feedback */ --success: var(--teal-700); --success-soft: var(--teal-50); --success-soft-fg: var(--teal-700); --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. */ --warning-line: oklch(0.66 0.17 50); /* #E16C10 · 3,30:1 sobre branco */ --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 */ --ring: var(--teal-500); --ring-shadow: 0 0 0 3px var(--teal-100); /* 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.207 0.017 252 / 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.207 0.017 252 / 0.28), 0 4px 12px -4px oklch(0.207 0.017 252 / 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 é teal" continua certo depois do filtro. Validadas com o validador de paleta: banda de luminosidade, piso de croma, separação sob daltonismo (ΔE ≥ 8), piso de visão normal (≥ 15) e contraste ≥ 3:1 contra a superfície. */ --viz-1: #00988B; /* teal da marca */ --viz-2: #7C5BB8; --viz-3: #C2843A; --viz-4: #4173B0; --viz-muted: oklch(0.80 0.008 250); /* série de contexto, quando uma só é o ponto */ --viz-grid: oklch(0.93 0.004 250); /* 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.945 0.035 187); --viz-seq-2: oklch(0.865 0.065 187); --viz-seq-3: oklch(0.775 0.100 187); --viz-seq-4: oklch(0.680 0.130 187); --viz-seq-5: oklch(0.540 0.110 189); /* Divergente: dois tons OPOSTOS (frio ↔ quente) com cinza neutro no meio. Para acima/abaixo de uma meta. Nunca dois tons frios nos dois polos. */ --viz-div-1: oklch(0.545 0.110 189); --viz-div-2: oklch(0.790 0.075 187); --viz-div-3: oklch(0.900 0.004 250); --viz-div-4: oklch(0.800 0.090 68); --viz-div-5: oklch(0.600 0.140 52); /* ---------------------------------------------------------------- */ /* 3. TIPOGRAFIA */ /* ---------------------------------------------------------------- */ --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* escala — tamanho / entrelinha / tracking por papel */ --text-display: 700 34px/1.15 var(--font-sans); --text-h1: 700 24px/1.25 var(--font-sans); --text-h2: 700 19px/1.3 var(--font-sans); --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-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(15,20,25,.04); --shadow-sm: 0 1px 3px rgba(15,20,25,.06), 0 1px 2px rgba(15,20,25,.04); --shadow-md: 0 4px 16px -4px rgba(15,20,25,.08), 0 1px 2px rgba(15,20,25,.04); --shadow-lg: 0 12px 40px -8px rgba(15,20,25,.14), 0 2px 4px rgba(15,20,25,.05); --shadow-xl: 0 24px 64px -12px rgba(15,20,25,.20), 0 4px 8px rgba(15,20,25,.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 */ /* ---------------------------------------------------------------- */ /* 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; } }