/* CORTEX UI — tokens. Gerado da pesquisa de 03/09. Cole no topo da página. */ :root { /* Famílias — fallback de sistema obrigatório: com font-display:swap o primeiro paint é sempre com a fonte de sistema (Primer, Polaris, Linear e Fluent fazem igual). */ --font-sans: "Inter var", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Pesos — 3 pesos, nada abaixo de 400 em UI. Apple: evitar Ultralight/Thin/Light. Sem eixos não-redondos (450/650): o fallback de sistema arredonda e desloca a hierarquia inteira. */ --w-regular: 400; /* corpo, dado de célula */ --w-medium: 500; /* rótulo, texto ao lado de ícone, cabeçalho de coluna (Atlassian) */ --w-semibold:600; /* título, KPI, ação primária */ --w-light: 300; /* SÓ acima de 40px. Nunca em corpo, nunca em tema escuro. */ /* Números — largura fixa por dígito. "1" é 40-50% mais estreito que "0" em figuras proporcionais: a coluna treme a cada re-render e o right-align deixa de indicar magnitude. */ --fv-tabular: tabular-nums lining-nums slashed-zero; /* ESCALA — 13 tokens semânticos (tamanho+peso+lh amarrados). Aditiva (+2px) na faixa de UI, geométrica acima de 32px: 1.25 sobre 14px daria 17.5px, meio pixel que o browser arredonda de forma inconsistente entre zoom e DPI. */ --t-micro: 500 11px/16px var(--font-sans); --tr-micro: 0.01em; /* badge, eixo de gráfico — só se redundante com outra info */ --t-caption: 400 12px/16px var(--font-sans); --tr-caption: 0.005em; /* metadado, ajuda, timestamp. Piso de leitura. */ --t-body-compact: 400 14px/18px var(--font-sans); --tr-body: 0; /* DENTRO de container: célula, linha, card */ --t-body: 400 14px/20px var(--font-sans); /* fora de container: parágrafo, erro, descrição */ --t-body-lg: 400 16px/24px var(--font-sans); /* prosa longa, documentação, mobile */ --t-label: 500 14px/18px var(--font-sans); /* rótulo de campo E cabeçalho de coluna — mesmo corpo do dado, só peso muda */ --t-title-sm: 600 16px/24px var(--font-sans); --tr-title-sm: -0.006em; /* título de card, de grupo */ --t-title: 600 20px/28px var(--font-sans); --tr-title: -0.012em; /* título de seção e de diálogo — lh 28 casa com controle de 28px */ --t-title-lg: 600 24px/32px var(--font-sans); --tr-title-lg: -0.015em; /* título de página — lh 32 casa com botão md */ --t-metric: 600 24px/28px var(--font-sans); /* KPI. Usar SEMPRE com --fv-tabular */ --t-metric-lg: 600 32px/36px var(--font-sans); --tr-metric-lg: -0.02em; /* KPI de destaque */ --t-display: 300 48px/52px var(--font-sans); --tr-display: -0.022em; /* SÓ marketing/hero. Peso leve porque a área já domina. */ --t-code: 400 13px/20px var(--font-mono); /* SKU, hash, JSON, endpoint */ } :root { /* Base 4px. Nome = valor: elimina a consulta de tabela. A razão entre degraus cai de 2.0 para 1.2 (lei de Weber: a diferença mínima perceptível é proporcional ao estímulo — 2px sobre 2px é óbvio, 2px sobre 80px é invisível). */ --sp-2: 2px; /* correção óptica DENTRO do componente (nested unit, M3/Fluent sNudge) */ --sp-4: 4px; /* ícone ↔ rótulo em controle xs; gap de chips */ --sp-6: 6px; /* ícone ↔ rótulo em controle sm/md; rótulo ↔ campo */ --sp-8: 8px; /* menor gap ENTRE caixas */ --sp-12: 12px; /* padding interno de controle md */ --sp-16: 16px; /* padding de célula (constante em toda densidade); gap entre campos em modal */ --sp-20: 20px; /* padding de card compacto */ --sp-24: 24px; /* padding de card/diálogo; gap entre campos em página */ --sp-32: 32px; /* gap entre grupos de campos; gutter de grade */ --sp-40: 40px; /* separação entre blocos de uma seção */ --sp-48: 48px; /* último campo ↔ botões; separação entre seções */ --sp-64: 64px; /* separação entre seções de página */ --sp-80: 80px; --sp-96: 96px; /* respiro de página expressiva */ --sp-128:128px; /* hero */ } :root { /* CLARO — ΔL ≈ 2 pontos entre superfícies (1→5): hover e seleção vivem nesses meio-passos */ --n-1: oklch(99.2% 0.002 264); /* canvas da aplicação #FBFCFE */ --n-2: oklch(98.0% 0.003 264); /* superfície: card, painel, header fixo #F7F8FB */ --n-3: oklch(96.0% 0.004 264); /* preenchimento sutil: zebra, chip, input #F1F2F6 */ --n-4: oklch(93.5% 0.005 264); /* hover de linha/superfície #E8EAEF */ --n-5: oklch(90.5% 0.006 264); /* selecionado / pressionado #DDE0E7 */ --n-6: oklch(86.0% 0.007 264); /* divisória e borda decorativa (1.5:1) #CDD1DA */ --n-7: oklch(78.0% 0.009 264); /* borda de contorno: card, tabela (2.1:1) #B3B8C4 */ --n-8: oklch(66.0% 0.012 264); /* BORDA FUNCIONAL: campo, checkbox (3.05:1) #8E93A2 */ /* ⚠ --n-9 e --n-10 estão medidos contra --n-1/--n-2. Em --n-4 (hover) e --n-5 (selecionado) o --n-9 cai para 4,43:1 e 3,88:1 — texto terciário NÃO pode pousar ali: use --n-10. Ver medicoes-diretas.md, "O erro que só o tema claro revelou". Todo token de texto se calibra contra a superfície MAIS ALTA em que ele tem permissão de pousar, nunca contra o canvas. */ --n-9: oklch(55.0% 0.014 264); /* texto terciário, placeholder, ícone (4.9:1)#6E7382 */ --n-10: oklch(44.0% 0.017 264); /* texto secundário (7.8:1) #4E5361 */ --n-11: oklch(24.0% 0.020 264); /* texto primário + FILL da ação primária (16.4:1) #1D2028 */ --n-12: oklch(16.0% 0.020 264); /* hover do fill primário; número de máxima ênfase #0F1116 */ } :root:not([data-theme="light"]) { @media (prefers-color-scheme: dark) { /* ESCURO — ΔL ≈ 4 a 7 pontos entre superfícies. Perto do preto, a mesma diferença de luminância produz menos diferença percebida: copiar os deltas do claro faz as camadas sumirem. (Carbon: ΔL* 3.8 no claro vs 7.9-10.9 no escuro; M3: amplitude 10 tons no claro vs 18 no escuro.) */ --n-1: oklch(14.5% 0.006 264); /* canvas #0A0B0E */ --n-2: oklch(21.0% 0.008 264); /* superfície #17181D */ --n-3: oklch(26.0% 0.009 264); /* preenchimento sutil #212329 */ --n-4: oklch(30.0% 0.010 264); /* hover #2A2D34 */ --n-5: oklch(34.0% 0.011 264); /* selecionado #34373F */ --n-6: oklch(39.0% 0.012 264); /* divisória #40444D */ --n-7: oklch(47.0% 0.013 264); /* contorno #565A65 */ --n-8: oklch(57.0% 0.015 264); /* borda funcional (4.4:1) #74798A */ --n-9: oklch(66.0% 0.016 264); /* texto terciário (6.4:1) #8E93A3 */ --n-10: oklch(78.0% 0.014 264); /* texto secundário (9.9:1) #B3B8C6 */ --n-11: oklch(93.0% 0.008 264); /* texto primário (15.6:1) #E5E7ED */ --n-12: oklch(99.0% 0.003 264); /* fill primário (near-white)#FBFCFE */ }} :root[data-theme="dark"] { /* repetir o bloco acima literalmente */ } :root { /* ── ACENTO / INFO (hue 258) — usado em link, seleção, foco. NÃO é a cor da marca. */ --ac-soft: oklch(96.5% 0.022 258); /* #EDF2FE fundo de seleção de linha, chip informativo */ --ac-soft-hover: oklch(94.0% 0.035 258); /* #E0E9FD */ --ac-border: oklch(86.0% 0.070 258); /* #BFD1FA */ --ac-solid: oklch(55.0% 0.200 258); /* #2563EB fill; texto branco por cima = 5.1:1 */ --ac-solid-hover: oklch(49.0% 0.190 258); /* #1D4FD7 */ --ac-text: oklch(50.0% 0.190 258); /* #1E4FD8 link sobre --n-1/--n-2 = 6.0:1 */ /* ── CLASSE ESCURA (texto branco por cima) ─────────────────────────────── */ --dg-soft: oklch(96.5% 0.020 27); /* #FEF0EF */ --dg-border: oklch(87.0% 0.060 27); /* #F8C9C4 */ --dg-solid: oklch(53.0% 0.190 27); /* #C92A22 branco por cima = 5.5:1 */ --dg-text: oklch(48.0% 0.180 27); /* #B02318 6.5:1 sobre --n-1 */ --sc-soft: oklch(96.5% 0.025 155); /* #E9F7EF */ --sc-border: oklch(86.0% 0.070 155); /* #A8DCC0 */ --sc-solid: oklch(52.0% 0.125 155); /* #10794F branco por cima = 5.4:1 */ --sc-text: oklch(47.0% 0.120 155); /* #0C6B45 */ /* ── CLASSE CLARA (texto --n-11 por cima) ──────────────────────────────── */ --wn-soft: oklch(97.0% 0.035 85); /* #FDF3DC */ --wn-border: oklch(88.0% 0.090 85); /* #F0D28C */ --wn-solid: oklch(84.0% 0.150 85); /* #EFB63A --n-11 por cima = 9.0:1 */ --wn-text: oklch(45.0% 0.100 68); /* #7A5310 6.8:1 sobre --n-1 */ /* ── DADOS: ordem categórica FIXA. Esgota matiz antes de tom. Todas ≥3:1 contra --n-1 e --n-2 (WCAG 1.4.11 objeto gráfico essencial). */ --viz-1: oklch(58% 0.170 258); /* #3B72E0 azul */ --viz-2: oklch(68% 0.145 70); /* #B87A28 âmbar (escurecido: em 76% dava 2.5:1) */ --viz-3: oklch(56% 0.130 152); /* #1E8757 verde */ --viz-4: oklch(55% 0.190 300); /* #8B44C4 roxo */ --viz-5: oklch(56% 0.190 25); /* #D34733 vermelho */ --viz-6: oklch(58% 0.100 200); /* #2E8698 teal */ } :root { --r-2: 2px; /* célula de tabela densa, tag inline, barra de progresso */ --r-4: 4px; /* controle de 24-32px, checkbox, input compacto */ --r-6: 6px; /* controle de 36px, card pequeno, superfície base */ --r-8: 8px; /* controle de 40-48px, card, painel */ --r-12: 12px; /* menu, popover, diálogo */ --r-16: 16px; /* sheet, fullscreen */ --r-full:9999px; /* pílula, avatar, toggle, contador */ } :root { --sh-ring: 0 0 0 1px oklch(24% 0.02 264 / .08); /* aresta pura, sem altura */ --sh-1: 0 0 0 1px oklch(24% 0.02 264 / .07), 0 1px 2px oklch(24% 0.02 264 / .06); /* card em repouso */ --sh-2: 0 0 0 1px oklch(24% 0.02 264 / .07), 0 4px 8px -2px oklch(24% 0.02 264 / .09), 0 2px 4px -2px oklch(24% 0.02 264 / .06); /* dropdown, popover, tooltip */ --sh-3: 0 0 0 1px oklch(24% 0.02 264 / .09), 0 12px 32px -8px oklch(24% 0.02 264 / .16), 0 4px 8px -4px oklch(24% 0.02 264 / .08); /* diálogo, drawer */ } :root:not([data-theme="light"]) { @media (prefers-color-scheme: dark) { /* No escuro o anel INVERTE de polaridade: vira fio de luz, porque preto sobre quase-preto não gera gradiente. O desfoque permanece e só reforça. */ --sh-ring: 0 0 0 1px oklch(100% 0 0 / .09); --sh-1: 0 0 0 1px oklch(100% 0 0 / .08), 0 1px 2px oklch(0% 0 0 / .40); --sh-2: 0 0 0 1px oklch(100% 0 0 / .10), 0 4px 24px oklch(0% 0 0 / .40); --sh-3: 0 0 0 1px oklch(100% 0 0 / .12), 0 7px 32px oklch(0% 0 0 / .55); }} :root { /* Larguras por PAPEL do painel, não uma largura única de página */ --w-nav: 240px; /* cabe ícone 16-20px + rótulo de ~20 caracteres (consenso Polaris) */ --w-nav-collapsed: 56px; /* ícone 20px + alvo de 44px de folga */ --w-side: 320px; /* mínimo que comporta rótulo + valor lado a lado sem quebra */ --w-main-max: 664px; /* coluna primária: 55-70 caracteres a 14-16px */ --w-reading: 720px; /* medida de leitura corrida (Notion trava exatamente aqui) */ --w-prose: 68ch; /* alvo em CARACTERES; px falha porque o nº muda com fonte e corpo */ --w-field-min: 220px; /* abaixo disso o input trunca data/CEP/valor e o usuário perde o início */ --w-page-max: 1584px; /* teto da grade densa (Carbon) */ --w-dialog-sm: 400px; --w-dialog-md: 560px; --w-dialog-lg: 800px; /* Alturas de controle — pares FIXOS altura↔fonte↔padding↔raio. Razão altura/fonte entre 2.0 e 2.75 mantém constante o branco vertical interno. */ --h-xs: 24px; /* fonte 12, pad-x 8, raio 4 — só ponteiro fino, só em tabela xs */ --h-sm: 28px; /* fonte 13, pad-x 10, raio 4 — toolbar, filtro */ --h-md: 32px; /* fonte 14, pad-x 12, raio 6 — PADRÃO de UI densa */ --h-lg: 40px; /* fonte 14, pad-x 16, raio 8 — formulário, campo de página */ --h-xl: 48px; /* fonte 16, pad-x 20, raio 8 — CTA, touch */ /* Alturas de linha de tabela — múltiplas de 8, alinhadas à grade vertical em qualquer densidade */ --row-compact: 32px; /* piso prático quando há QUALQUER controle na linha */ --row-default: 40px; --row-comfy: 48px; --row-double: 64px; /* única razão de existir: 2 linhas de 14/20 + padding não cabem em 48 */ /* Alvos */ --target-fine: 24px; /* piso legal WCAG 2.2 SC 2.5.8, com exceção de espaçamento */ --target-coarse: 44px; /* piso ergonômico: polpa do dedo ≈ 9-11mm */ /* Breakpoints (documentação — repetir literalmente na media query) */ --bp-sm: 600px; /* 99,96% dos telefones em retrato ficam abaixo (medido, M3) */ --bp-md: 840px; /* 97,22% dos tablets em paisagem ficam acima */ --bp-lg: 1200px; /* dois painéis confortáveis */ --bp-xl: 1600px; /* três painéis */ /* Camadas */ --z-sticky: 100; --z-dropdown: 200; --z-overlay: 300; --z-dialog: 400; --z-toast: 500; } @media (pointer: coarse) { :root { --h-md: 44px; --h-lg: 48px; --row-compact: 44px; --target-fine: 44px; } } :root { --dur-0: 0ms; /* entrada de hover — resposta atrasada é lida como lentidão do sistema */ --dur-1: 70ms; /* micro: toggle, pressed, saída de hover (Carbon fast-01) */ --dur-2: 120ms; /* fade de cor, troca de valor numérico */ --dur-3: 180ms; /* popover, tooltip, expansão pequena */ --dur-4: 240ms; /* drawer, toast entrando, expansão de linha */ --dur-5: 400ms; /* painel grande, overlay de página */ --ease-standard: cubic-bezier(.2, 0, .38, .9); /* começa e termina na tela */ --ease-enter: cubic-bezier(0, 0, .38, .9); /* entra na tela — desacelera até parar */ --ease-exit: cubic-bezier(.2, 0, 1, .9); /* sai para NÃO voltar — acelera até a velocidade máxima */ --ease-exit-temp: cubic-bezier(.2, 0, .38, .9); /* sai temporariamente (drawer) — termina em repouso */ } :root { /* Duas polaridades: o anel interno separa do fundo, o externo dá o contraste. Um anel de cor única sempre falha em algum fundo do sistema. (Princípio GOV.UK.) */ --focus-ring: 0 0 0 2px var(--n-1), 0 0 0 4px var(--ac-solid); --focus-ring-inverse: 0 0 0 2px var(--n-11), 0 0 0 4px var(--n-1); /* sobre fill escuro/colorido */ } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: inherit; } @supports not selector(:focus-visible) { :where(a, button, input, select, textarea, [tabindex]):focus { box-shadow: var(--focus-ring); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: var(--dur-2) !important; transition-duration: var(--dur-2) !important; scroll-behavior: auto !important; } /* Trocar movimento por mudança não-espacial, NÃO desligar. */ .u-motion-slide, .u-motion-scale { transform: none !important; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--n-1); color: var(--n-11); font: var(--t-body); font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; } table { border-collapse: separate; border-spacing: 0; } td, th { padding-inline: var(--sp-16); text-align: start; } .num { text-align: end; font-variant-numeric: var(--fv-tabular); } .prose { max-width: var(--w-prose); font: var(--t-body-lg); } img, svg, video { max-width: 100%; display: block; } :target { scroll-margin-block-start: var(--sp-64); }