/* A ORDEM DAS CAMADAS — D0.4 (Design Premium, 17/09/2026). Declarada aqui porque este é o primeiro CSS com regra que o index.html carrega (fonts.css só tem @font-face, que não entra em camada). Uma camada posterior vence uma anterior SEMPRE, seja qual for a especificidade — é o que fecha as armadilhas de 11/09 (`.folha a` × `.bt`, `.grade` × `.grade`) por construção: tokens só variáveis (este arquivo) base reset, tipografia de raiz, foco (app.css, topo) app componentes e telas (app.css, o miolo) — a divisão em `componentes` e `telas` é o D0.4b, com o próprio diff de pixels ajustes as sobreposições da Frente D, fase 4 (app.css, fim): vencem tudo, que é o que elas já faziam por virem por último O `@media print` da OS fica FORA de camada: estilo sem camada vence qualquer camada, e a impressão precisa vencer sempre. */ @layer tokens, base, app, ajustes; @layer tokens { /* ========================================================================== RASTREIO — Sistema visual "Índigo & Linha" Fundação de tokens. Nível 1 (base, cru) → Nível 2 (semântico, o que se usa). -------------------------------------------------------------------------- POR QUE ESTA IDENTIDADE, E NÃO OUTRA O consenso de 2026 é que todo painel SaaS ficou igual: gradiente pastel, sans-serif amigável, pílula arredondada, ilustração decorativa. Quem trabalha não quer decoração — quer um instrumento que se leia rápido e não minta. Então a identidade vem do ofício, não do catálogo de templates: ÍNDIGO o azul do denim, o tecido universal da confecção. Profundo, levemente dessaturado, sem o brilho de "azul de startup". LATÃO a cor da linha industrial e do maquinário de costura. É o único acento quente, e por isso carrega hierarquia: o que é latão, importa. PAPEL o fundo não é branco puro. Romaneio é papel, e papel tem calor. TIPOGRAFIA Fraunces (serifa variável) nos títulos e nos números grandes. Serifa dá autoridade de documento — o app registra prova de quantidade, não é rede social. O eixo `SOFT`/`WONK` dá caráter sem virar enfeite. Inter no corpo: neutra, alta legibilidade em tela ruim e sob sol. Números SEMPRE tabulares. Coluna de quantidade que dança a cada dígito é erro de leitura esperando acontecer. COR EM OKLCH Perceptualmente uniforme: L de 0-100% corresponde ao que o olho lê como claro/escuro, e interpolar entre passos não cria zona morta cinzenta. Mesmo motivo pelo qual o portal do BCI migrou para OKLCH. ========================================================================== */ :root { /* ====================================================================== NÍVEL 1 — BASE. Escalas cruas. Não usar direto em componente. ====================================================================== */ /* Índigo — hue 264, chroma contida. É denim, não azul de landing page. */ --indigo-50: oklch(97.5% 0.012 264); --indigo-100: oklch(94% 0.028 264); --indigo-200: oklch(88% 0.055 264); --indigo-300: oklch(78% 0.090 264); --indigo-400: oklch(66% 0.130 264); --indigo-500: oklch(56% 0.155 264); --indigo-600: oklch(48% 0.160 264); /* primária */ --indigo-700: oklch(40% 0.145 264); --indigo-800: oklch(32% 0.115 264); --indigo-900: oklch(25% 0.085 264); --indigo-950: oklch(18% 0.060 264); /* Latão — hue 75. Linha de costura industrial. Único acento quente. */ --latao-50: oklch(97% 0.025 75); --latao-100: oklch(93% 0.055 75); --latao-200: oklch(86% 0.095 75); --latao-300: oklch(78% 0.125 75); --latao-400: oklch(70% 0.140 75); --latao-500: oklch(63% 0.142 75); --latao-600: oklch(55% 0.135 72); --latao-700: oklch(45% 0.115 70); /* Papel — neutros com um sopro de calor (hue 75, chroma mínima). Cinza puro em tela de celular sob sol vira chapa morta. */ --papel-50: oklch(99% 0.003 75); --papel-100: oklch(97.5% 0.005 75); --papel-200: oklch(94.5% 0.007 75); --papel-300: oklch(89% 0.008 70); --papel-400: oklch(78% 0.010 70); --papel-500: oklch(64% 0.012 68); --papel-600: oklch(50% 0.014 66); --papel-700: oklch(38% 0.014 264); --papel-800: oklch(28% 0.016 264); --papel-900: oklch(20% 0.018 264); /* Semânticas — chroma alinhada para que nenhuma grite mais que a outra */ --verde-100: oklch(94% 0.045 155); --verde-500: oklch(58% 0.130 155); --verde-700: oklch(44% 0.110 155); --ambar-100: oklch(95% 0.055 80); --ambar-500: oklch(70% 0.145 65); --ambar-700: oklch(52% 0.130 55); --rubro-100: oklch(95% 0.035 25); --rubro-500: oklch(58% 0.180 25); --rubro-700: oklch(46% 0.165 25); --violeta-100: oklch(95% 0.035 300); --violeta-500: oklch(58% 0.140 300); --violeta-700: oklch(45% 0.130 300); /* ====================================================================== NÍVEL 2 — SEMÂNTICO. É isto que os componentes usam. ====================================================================== */ --fundo: var(--papel-100); --fundo-fundo: var(--papel-200); /* recuado, atrás da superfície */ --superficie: oklch(100% 0 0); --superficie-2: var(--papel-50); --borda: var(--papel-300); --borda-forte: var(--papel-400); --borda-sutil: oklch(89% 0.008 70 / 0.6); --tinta: var(--papel-900); --tinta-2: var(--papel-700); --tinta-3: var(--papel-600); --tinta-inversa: var(--papel-50); --marca: var(--indigo-600); --marca-forte: var(--indigo-700); --marca-fraca: var(--indigo-100); --marca-tenue: var(--indigo-50); --marca-contorno: oklch(48% 0.160 264 / 0.22); --acento: var(--latao-600); /* latão: o que importa */ --acento-fraco: var(--latao-100); --acento-tenue: var(--latao-50); /* ---- AÇÃO — o botão primário (Frente D, 16/09) ----------------------- Até aqui o `.bt` pintava o fundo com `--acento` (latão-600) e a letra com índigo-950. O comentário do botão prometia "~7:1"; MEDIDO (OKLCH -> sRGB -> luminância relativa, a conta da WCAG) o par dá 3,80:1 — abaixo até do AA (4,5:1) nos 28 botões primários, inclusive o "Continuar" e o "Registrar remessa" de quem conta peça no sol. O guard `contraste` do smoke refaz a conta a cada execução. A saída não foi escurecer a letra (já é o índigo mais escuro), e sim clarear o latão do FUNDO: 73% dá 7,7:1 — AAA, que é o piso pedido para o texto de ação do coletor. O latão continua sendo a cor da ação; só ficou mais perto da linha de costura nova do que da gasta. `--acento` segue latão-600 porque é usado como TEXTO e fio sobre papel (4,97:1), onde o latão claro sumiria. A borda em latão-600 existe pela mesma razão do sol: o fundo claro contra o papel dá 2,3:1, e é a borda (4,6:1) que desenha o limite do alvo. */ --acao: oklch(73% 0.140 75); --acao-hover: oklch(78% 0.125 75); --acao-ativo: oklch(70% 0.140 75); --acao-tinta: var(--indigo-950); --acao-borda: var(--latao-600); --ok: var(--verde-700); --ok-bg: var(--verde-100); --atencao: var(--ambar-700); --atencao-bg: var(--ambar-100); --grave: var(--rubro-700); --grave-bg: var(--rubro-100); --neutro: var(--papel-700); --neutro-bg: var(--papel-200); --outro: var(--violeta-700); --outro-bg: var(--violeta-100); /* o laranja da inteireza (RN-12): a remessa buscada em parte — entre o âmbar do prazo e o rubro do atraso, e distinto dos dois */ --laranja: oklch(52% 0.170 45); --laranja-bg: oklch(94% 0.055 60); /* ---- tipografia ------------------------------------------------------ Escala modular 1.200 (terça menor) — mais contida que 1.25, porque a tela tem muita informação densa e um salto grande quebra a leitura em coluna. */ --fonte-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif; --fonte-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fonte-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --t-3xs: 0.667rem; /* 10.7px — rótulo de eixo, nada mais */ --t-2xs: 0.75rem; /* 12px — etiqueta, metadado */ --t-xs: 0.8125rem; /* 13px — texto de apoio */ --t-sm: 0.875rem; /* 14px — corpo denso, tabela */ --t-md: 1rem; /* 16px — corpo */ --t-lg: 1.2rem; --t-xl: 1.44rem; --t-2xl: 1.728rem; --t-3xl: 2.074rem; --t-4xl: 2.488rem; --peso-normal: 400; --peso-medio: 500; --peso-forte: 600; --peso-display: 600; /* O texto de ação do coletor: um degrau acima do corpo e mais pesado. Inter é variável, então 650 existe de verdade — medido no arquivo servido, não na documentação da família (a lição do `tnum` da Fraunces). */ --peso-acao: 650; --t-acao: 1.0625rem; /* 17px — o rótulo do botão que se lê em pé, sob sol */ --altura-densa: 1.25; --altura-normal: 1.55; --altura-solta: 1.7; /* Medida de leitura: parágrafo explicativo acima de ~68 caracteres por linha vira bloco que ninguém lê no desktop. */ --medida: 68ch; /* ---- espaço — escala de 4px, nomeada por passo ---------------------- */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.25rem; --e-6: 1.5rem; --e-8: 2rem; --e-10: 2.5rem; --e-12: 3rem; --e-16: 4rem; /* ---- forma ---------------------------------------------------------- Raio pequeno de propósito. Indústria tem canto; o app é ferramenta de trabalho, não brinquedo. Pílula só onde é etiqueta de estado. */ --r-sm: 3px; --r-md: 5px; --r-lg: 8px; --r-xl: 12px; --r-pilula: 999px; /* ---- profundidade --------------------------------------------------- Camadas, não borrão. Sombra curta + linha de luz interna: a superfície parece papel sobre papel, e não um cartão flutuando no vazio. */ --elev-0: 0 0 0 1px var(--borda-sutil); --elev-1: 0 1px 2px oklch(20% 0.018 264 / 0.05), 0 0 0 1px var(--borda-sutil); --elev-2: 0 2px 4px oklch(20% 0.018 264 / 0.06), 0 8px 16px -8px oklch(20% 0.018 264 / 0.10), 0 0 0 1px var(--borda-sutil); --elev-3: 0 4px 8px oklch(20% 0.018 264 / 0.07), 0 16px 32px -12px oklch(20% 0.018 264 / 0.14), 0 0 0 1px var(--borda-sutil); --luz-interna: inset 0 1px 0 oklch(100% 0 0 / 0.7); /* ---- movimento ------------------------------------------------------ Frente D: duração e curva viraram tokens separados, e nada passa de 200 ms. Movimento aqui é CONFIRMAÇÃO ("o toque pegou", "a folha abriu"), não espetáculo — acima de 200 ms a pessoa com pressa já tocou de novo. `prefers-reduced-motion` zera tudo num lugar só (app.css, topo). `--t-rapida`, `--t-media` e `--t-saida` continuam com o nome antigo porque 60 regras os usam; a `--t-saida` desceu de 320 para 200 ms. */ --dur-rapida: 120ms; --dur-media: 160ms; --dur-lenta: 200ms; --curva-padrao: cubic-bezier(.2, 0, 0, 1); --curva-entra: cubic-bezier(.16, 1, .3, 1); /* ease-OUT (revisao da sessao 12, V-19): curva que acelera no fim le como tranco na interface */ --curva-sai: cubic-bezier(0, 0, .2, 1); /* so o movimento ESPACIAL (a folha que sobe): a curva de gaveta do iOS, ate 280 ms — DP-3 da spec Design Premium, pendente; tudo zera em movimento reduzido */ --dur-espacial: 280ms; --curva-mola: cubic-bezier(.32, .72, 0, 1); --t-rapida: var(--dur-rapida) var(--curva-padrao); --t-media: var(--dur-media) var(--curva-padrao); --t-saida: var(--dur-lenta) var(--curva-entra); /* ---- medidas do app ------------------------------------------------- */ --toque: 56px; /* alvo mínimo no fluxo do coletor — sol, uma mão */ --toque-min: 44px; /* o piso de qualquer alvo, em qualquer tela (F21) */ --topo-h: 64px; --faixa-h: 32px; --largura: 1180px; --tabbar-h: 72px; /* a folga que a barra inferior ocupa no celular */ --barra-h: 52px; /* a barra de navegação do celular, sem a área segura (D1.4) */ /* ---- camadas --------------------------------------------------------- Os números já existiam espalhados (50, 60, 70, 71, 80). Nomeados, a ordem "topo < barra < folha < aviso" se lê num lugar só. */ --z-topo: 50; --z-tabbar: 60; --z-folha-fundo: 70; --z-folha: 71; --z-aviso: 80; /* ---- foco ------------------------------------------------------------ */ --anel-foco: 0 0 0 3px oklch(55% 0.135 72 / .26); color-scheme: light; } /* ========================================================================== Tema escuro — só quando a pessoa pediu. Não é modo secundário: o coletor usa o app de madrugada e no galpão escuro tanto quanto sob sol. Os tokens semânticos trocam; os componentes não sabem. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --fundo: var(--papel-900); --fundo-fundo: oklch(16% 0.020 264); --superficie: oklch(24% 0.018 264); --superficie-2: oklch(28% 0.018 264); --borda: oklch(34% 0.020 264); --borda-forte: oklch(42% 0.022 264); --borda-sutil: oklch(100% 0 0 / 0.08); --tinta: var(--papel-100); --tinta-2: var(--papel-400); /* 64% dava 4,9:1 sobre a superfície escura — AA no limite, para o metadado miúdo lido no galpão escuro. 68% dá 5,7:1 sem competir com a `--tinta-2`. */ --tinta-3: oklch(68% 0.012 68); --tinta-inversa: var(--papel-900); --acao: var(--latao-300); --acao-hover: var(--latao-200); --acao-ativo: var(--latao-400); --acao-tinta: var(--indigo-950); --acao-borda: var(--latao-400); --marca: var(--indigo-400); --marca-forte: var(--indigo-300); --marca-fraca: oklch(40% 0.145 264 / 0.35); --marca-tenue: oklch(40% 0.145 264 / 0.18); --marca-contorno: oklch(66% 0.130 264 / 0.35); --acento: var(--latao-300); --acento-fraco: oklch(45% 0.115 70 / 0.30); --acento-tenue: oklch(45% 0.115 70 / 0.15); --ok: oklch(78% 0.140 155); --ok-bg: oklch(44% 0.110 155 / 0.28); --atencao: oklch(82% 0.140 75); --atencao-bg: oklch(52% 0.130 55 / 0.28); --grave: oklch(76% 0.150 25); --grave-bg: oklch(46% 0.165 25 / 0.28); --neutro: var(--papel-400); --neutro-bg: oklch(100% 0 0 / 0.07); --outro: oklch(78% 0.120 300); --outro-bg: oklch(45% 0.130 300 / 0.28); --laranja: oklch(80% 0.150 50); --laranja-bg: oklch(50% 0.150 45 / 0.28); --elev-1: 0 1px 2px oklch(0% 0 0 / 0.4), 0 0 0 1px var(--borda-sutil); --elev-2: 0 2px 6px oklch(0% 0 0 / 0.45), 0 10px 24px -10px oklch(0% 0 0 / 0.5), 0 0 0 1px var(--borda-sutil); --elev-3: 0 4px 10px oklch(0% 0 0 / 0.5), 0 20px 40px -14px oklch(0% 0 0 / 0.6), 0 0 0 1px var(--borda-sutil); --luz-interna: inset 0 1px 0 oklch(100% 0 0 / 0.06); color-scheme: dark; } } /* A escolha explícita vence a preferência do sistema, nos dois sentidos. */ :root[data-tema="escuro"] { --fundo: var(--papel-900); --fundo-fundo: oklch(16% 0.020 264); --superficie: oklch(24% 0.018 264); --superficie-2: oklch(28% 0.018 264); --borda: oklch(34% 0.020 264); --borda-forte: oklch(42% 0.022 264); --borda-sutil: oklch(100% 0 0 / 0.08); --tinta: var(--papel-100); --tinta-2: var(--papel-400); --tinta-3: oklch(68% 0.012 68); --tinta-inversa: var(--papel-900); --acao: var(--latao-300); --acao-hover: var(--latao-200); --acao-ativo: var(--latao-400); --acao-tinta: var(--indigo-950); --acao-borda: var(--latao-400); --marca: var(--indigo-400); --marca-forte: var(--indigo-300); --marca-fraca: oklch(40% 0.145 264 / 0.35); --marca-tenue: oklch(40% 0.145 264 / 0.18); --marca-contorno: oklch(66% 0.130 264 / 0.35); --acento: var(--latao-300); --acento-fraco: oklch(45% 0.115 70 / 0.30); --acento-tenue: oklch(45% 0.115 70 / 0.15); --ok: oklch(78% 0.140 155); --ok-bg: oklch(44% 0.110 155 / 0.28); --atencao: oklch(82% 0.140 75); --atencao-bg: oklch(52% 0.130 55 / 0.28); --grave: oklch(76% 0.150 25); --grave-bg: oklch(46% 0.165 25 / 0.28); --neutro: var(--papel-400); --neutro-bg: oklch(100% 0 0 / 0.07); --outro: oklch(78% 0.120 300); --outro-bg: oklch(45% 0.130 300 / 0.28); --laranja: oklch(80% 0.150 50); --laranja-bg: oklch(50% 0.150 45 / 0.28); --elev-1: 0 1px 2px oklch(0% 0 0 / 0.4), 0 0 0 1px var(--borda-sutil); --elev-2: 0 2px 6px oklch(0% 0 0 / 0.45), 0 10px 24px -10px oklch(0% 0 0 / 0.5), 0 0 0 1px var(--borda-sutil); --elev-3: 0 4px 10px oklch(0% 0 0 / 0.5), 0 20px 40px -14px oklch(0% 0 0 / 0.6), 0 0 0 1px var(--borda-sutil); --luz-interna: inset 0 1px 0 oklch(100% 0 0 / 0.06); color-scheme: dark; } /* ========================================================================== Cores de dia da agenda. Não é enfeite: numa lista longa, a faixa de cor é o que permite ao olho achar onde um dia termina sem ler data nenhuma. São sete matizes de baixa croma, escolhidos para não competir com as cores semânticas (ok/atenção/grave) — fundo de dia nunca pode ser confundido com estado de remessa. Tokens, e não valores no JavaScript, justamente para o tema escuro funcionar. ========================================================================== */ :root { --dia-0: oklch(96.5% 0.018 264); --dia-1: oklch(96.5% 0.020 150); --dia-2: oklch(96.5% 0.022 75); --dia-3: oklch(96.5% 0.018 310); --dia-4: oklch(96.5% 0.020 195); --dia-5: oklch(96.5% 0.018 25); --dia-6: oklch(96.5% 0.006 264); } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --dia-0: oklch(27% 0.028 264); --dia-1: oklch(27% 0.030 150); --dia-2: oklch(27% 0.032 75); --dia-3: oklch(27% 0.028 310); --dia-4: oklch(27% 0.030 195); --dia-5: oklch(27% 0.028 25); --dia-6: oklch(27% 0.010 264); } } :root[data-tema="escuro"] { --dia-0: oklch(27% 0.028 264); --dia-1: oklch(27% 0.030 150); --dia-2: oklch(27% 0.032 75); --dia-3: oklch(27% 0.028 310); --dia-4: oklch(27% 0.030 195); --dia-5: oklch(27% 0.028 25); --dia-6: oklch(27% 0.010 264); } }