/* ========================================================================== 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); --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); /* ---- 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; --altura-densa: 1.25; --altura-normal: 1.55; --altura-solta: 1.7; /* ---- 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 ------------------------------------------------------ */ --t-rapida: 120ms cubic-bezier(.4, 0, .2, 1); --t-media: 200ms cubic-bezier(.4, 0, .2, 1); --t-saida: 320ms cubic-bezier(.16, 1, .3, 1); /* ---- medidas do app ------------------------------------------------- */ --toque: 56px; /* alvo mínimo no fluxo do coletor — sol, uma mão */ --topo-h: 64px; --faixa-h: 32px; --largura: 1180px; 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); --tinta-3: var(--papel-500); --tinta-inversa: var(--papel-900); --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); --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: var(--papel-500); --tinta-inversa: var(--papel-900); --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); --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); }