/* ========================================================================== UpLog Design System v2 — Camada 1: Tokens Nome interno da linguagem: OPERAÇÕES. Princípios que estes tokens materializam: · Separação por VALOR, não por borda e sombra. Superfícies se distinguem pela luminância; hairline de 1px só quando a leitura exige. · Uma cor de destaque. O azul da marca é sinal de ação, foco e estado — nunca decoração. Cor colorida na tela = algo requer atenção. · Zero gradiente decorativo. Nenhum "azul-para-roxo" em botão ou título. · Raio pequeno. 2 a 8px. Nada arredondado como cápsula. · Movimento curto. O produto tem que parecer rápido. Nenhuma regra visual neste arquivo. Só variáveis. ========================================================================== */ :root { /* ====================================================================== 1. PRIMITIVOS — não usar direto nos componentes ====================================================================== */ /* Neutros. Cinza levemente frio, sem virar azul-marinho: o navy #121822 da versão anterior "colore" toda a tela e compete com o azul da marca. Aqui o fundo é quase acromático, então o único ponto de cor é o sinal. */ --n-950: #0A0B0C; --n-900: #101113; --n-880: #16181A; --n-850: #1C1E21; --n-800: #24272B; --n-700: #33373C; --n-600: #4A4F56; /* #7E858D é o piso: abaixo disso, texto de 11–14px não alcança 4.5:1 sobre --bg-surface. Medido, não estimado. */ --n-500: #7E858D; --n-400: #8C939B; --n-300: #AEB4BB; --n-200: #CBD0D5; --n-100: #E6E9EC; --n-050: #F4F6F7; --n-000: #FFFFFF; /* Azul UpLog — a única cor de destaque. Escala derivada da cor oficial. */ --brand-200: #B4E6FA; --brand-300: #6FD0F3; --brand-400: #29B6EA; --brand-500: #01A4E0; /* oficial da marca */ --brand-600: #0187BA; --brand-700: #016B93; --brand-900: #04303F; /* Semânticos. Existem para significar estado, não para enfeitar. Dessaturados o bastante para conviver com o neutro sem gritar. */ --ok-400: #3DD68C; --ok-900: #0C2C1E; --warn-400: #E8B339; --warn-900: #2E2410; --crit-400: #F0616D; --crit-900: #33141A; /* ====================================================================== 2. SEMÂNTICOS — use estes ====================================================================== */ /* Superfícies, da mais funda para a mais alta */ --bg-canvas: var(--n-950); /* fundo da página */ --bg-sunken: var(--n-900); /* campo de formulário, poço */ --bg-surface: var(--n-900); /* faixa de seção alternada */ --bg-raised: var(--n-880); /* linha em hover, item ativo */ --bg-overlay: var(--n-850); /* menu, dropdown */ /* Texto — quatro níveis, e só quatro */ --fg-primary: var(--n-050); /* título, número, valor */ --fg-secondary: var(--n-300); /* corpo de texto */ --fg-tertiary: var(--n-500); /* rótulo, metadado, legenda */ --fg-onbrand: var(--n-000); /* Linhas. Hairline é a ferramenta de separação padrão — não a sombra. */ --line-faint: rgba(255, 255, 255, 0.06); --line: rgba(255, 255, 255, 0.10); --line-strong: rgba(255, 255, 255, 0.18); --line-brand: rgba(1, 164, 224, 0.55); /* Ação / foco / estado */ --accent: var(--brand-500); --accent-hover: var(--brand-400); --accent-press: var(--brand-600); --accent-quiet: rgba(1, 164, 224, 0.12); /* fundo de estado ativo */ --accent-ring: rgba(1, 164, 224, 0.35); /* anel de foco */ /* Estado semântico */ --state-ok: var(--ok-400); --state-warn: var(--warn-400); --state-crit: var(--crit-400); --state-ok-bg: var(--ok-900); --state-warn-bg: var(--warn-900); --state-crit-bg: var(--crit-900); /* ====================================================================== 3. TIPOGRAFIA ====================================================================== */ --font-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; /* Larguras do eixo wdth do Archivo. É o que dá presença ao título sem recorrer a peso extremo. */ --wdth-condensed: 84; --wdth-normal: 100; /* Escala. Salto grande entre display e corpo: hierarquia se lê à distância, não por diferença de 2px. */ --t-mega: clamp(3rem, 1.9rem + 5.2vw, 6.5rem); /* número herói */ --t-display: clamp(2.75rem, 1.8rem + 4.4vw, 5.25rem); /* H1 */ --t-h2: clamp(1.875rem, 1.4rem + 2.2vw, 3rem); --t-h3: clamp(1.25rem, 1.08rem + 0.75vw, 1.625rem); --t-h4: 1.0625rem; --t-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem); /* parágrafo guia */ --t-body: 0.9688rem; --t-sm: 0.875rem; --t-xs: 0.8125rem; --t-micro: 0.6875rem; /* rótulo mono em caixa alta */ --lh-tight: 1.04; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-black: 800; --ls-mega: -0.035em; /* texto grande precisa fechar mais */ --ls-tight: -0.02em; --ls-normal: 0; --ls-micro: 0.10em; /* caixa alta pequena precisa abrir */ /* ====================================================================== 4. ESPAÇO E GRADE ====================================================================== */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-28: 7rem; /* Grade editorial de 12 colunas. O layout assimétrico vem daqui: blocos ocupam faixas diferentes em vez de tudo centralizado. */ --grid-cols: 12; --grid-gap: clamp(1rem, 0.5rem + 1.6vw, 2rem); --shell-max: 1320px; --shell-pad: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem); --measure: 62ch; /* largura máxima de leitura confortável */ --section-y: clamp(4.5rem, 3rem + 6vw, 9rem); /* ====================================================================== 5. FORMA ====================================================================== */ /* Raio pequeno e discreto. Cápsula (999px) não existe nesta linguagem. */ --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 10px; /* Sombra é exceção, para o que realmente flutua sobre a página. Separação normal é feita por valor e hairline. */ --elev-menu: 0 12px 32px -8px rgba(0, 0, 0, 0.7); --elev-pop: 0 4px 16px -4px rgba(0, 0, 0, 0.6); /* ====================================================================== 6. MOVIMENTO — curto. O produto tem que parecer instantâneo. ====================================================================== */ --d-instant: 90ms; --d-quick: 140ms; --d-base: 200ms; --d-enter: 340ms; /* entrada de bloco ao rolar */ --e-out: cubic-bezier(0.22, 0.61, 0.36, 1); --e-io: cubic-bezier(0.65, 0, 0.35, 1); /* ====================================================================== 7. CAMADAS ====================================================================== */ --z-rail: 50; --z-header: 200; --z-menu: 300; --z-top: 400; --header-h: 64px; } @media (max-width: 860px) { :root { --header-h: 56px; } } /* -------------------------------------------------------------------------- Inversão para superfície clara. Os componentes leem só tokens semânticos, então uma seção clara não pede CSS novo — só a classe. Reservado para uso futuro (ex.: página de política). -------------------------------------------------------------------------- */ .on-light { --bg-canvas: var(--n-000); --bg-sunken: var(--n-050); --bg-surface: var(--n-050); --bg-raised: var(--n-100); --bg-overlay: var(--n-000); --fg-primary: var(--n-950); --fg-secondary: var(--n-700); --fg-tertiary: var(--n-500); --line-faint: rgba(10, 11, 12, 0.07); --line: rgba(10, 11, 12, 0.12); --line-strong: rgba(10, 11, 12, 0.22); --accent-quiet: rgba(1, 164, 224, 0.10); }