/* ========================================================================== NAVIT — DESIGN TOKENS Laboratório Editorial de Inteligência Sistema irmão do design system da Fteam (mesmo grupo): herda a arquitetura de tokens, a escala de raios, as sombras tintadas na cor-tinta da marca e a gramática de motion. Diverge na identidade — base off-white quente, tipografia editorial (serif) e linguagem gráfica "Rotas Inteligentes". Paleta conforme doc 03 — as 8 cores oficiais são imutáveis. ========================================================================== */ :root { /* ====================================================================== 1 · PALETA OFICIAL (doc 03 — não alterar) ====================================================================== */ --color-offwhite: #F5F4EF; /* fundo principal, áreas editoriais */ --color-graphite: #101318; /* texto principal, seções escuras */ --color-blue: #3484DA; /* institucional, links, destaques */ --color-blue-electric: #4572E7; /* CTAs, estados ativos, microinterações */ --color-cyan: #13AAC1; /* rotas, conexões, indicadores técnicos */ --color-white: #FFFFFF; /* cards, áreas de leitura */ --color-gray-100: #E7E9ED; /* bordas, divisórias, estados neutros */ --color-gray-400: #6E7480; /* textos secundários, legendas, metadados */ /* ---- Degraus derivados ---- As 8 cores acima são a marca e não mudam. Estes degraus existem porque as cores institucionais, aplicadas como TEXTO sobre off-white, não alcançam os 4.5:1 exigidos por WCAG AA — que o próprio doc 03 define como piso ("O premium invisível"). Medições sobre #F5F4EF: AZUL NAVIT #3484DA → 3.49:1 ✗ → --blue-700 #2B69B0 → 5.08:1 ✓ CIANO NAVIT #13AAC1 → 2.53:1 ✗ → --cyan-700 #0C7A8A → 4.58:1 ✓ CINZA MÉDIO #6E7480 → 4.26:1 ✗ → --gray-500 #646A75 → 4.94:1 ✓ As cores oficiais seguem em uso onde passam: fundos de ação, réguas decorativas, nós de rota, gradiente e tudo sobre grafite. */ --graphite-900: #0A0C10; --graphite-800: #101318; --graphite-700: #181C22; --graphite-600: #22272F; --graphite-500: #2E343D; --graphite-400: #4A515C; --blue-800: #1F4E85; --blue-700: #2B69B0; --blue-600: #3A5FCB; --blue-550: #3D66D9; /* fundo de CTA: branco alcança 5.12:1 */ --blue-500: #4572E7; --blue-400: #3484DA; --blue-200: #A9C4EE; --blue-100: #DCE7F9; --blue-50: #EEF3FC; --cyan-700: #0C7A8A; --cyan-600: #0F8C9E; --cyan-500: #13AAC1; --cyan-300: #6FCFDC; --gray-500: #646A75; --gray-450: #7C838E; /* borda de controle: 3.47:1 sobre off-white */ --offwhite-raised: #FBFAF6; /* Gradiente institucional — uso pontual (rotas, nós, números-chave). Nunca como fundo de seção repetido. */ --gradient-navit: linear-gradient(135deg, #13AAC1 0%, #3484DA 55%, #4572E7 100%); /* ====================================================================== 2 · TOKENS SEMÂNTICOS ====================================================================== */ /* ---- Superfícies ---- Base branca, alternando com um tom frio levíssimo derivado do azul da marca — a mesma mecânica de alternância da Fteam (branco ↔ #fcfcfc), em vez do off-white quente, que puxava o site para o editorial. */ --bg-page: var(--color-white); --bg-muted: #F7F9FC; --bg-raised: var(--color-white); --bg-card: var(--color-white); --bg-subtle: var(--blue-50); --bg-inverse: var(--graphite-800); --bg-inverse-2: var(--graphite-700); /* ---- Texto ---- */ --text-strong: var(--color-graphite); --text-body: #2A3038; --text-muted: var(--gray-500); --text-on-inverse: var(--color-offwhite); --text-on-inverse-muted: #A7ADB8; --text-link: var(--blue-700); --text-link-hover: var(--blue-800); /* ---- Bordas ---- */ --border-subtle: #EDEEF1; --border-default: var(--color-gray-100); /* Contorno de controle (input, botão secundário): 3:1 por WCAG 1.4.11 */ --border-strong: var(--gray-450); --border-inverse: #262B33; /* 3.23:1 sobre grafite-700 — contorno de controle no painel escuro */ --border-inverse-strong: #646C79; --border-focus: var(--blue-550); --border-width: 1px; /* ---- Ação ---- */ --action: var(--blue-550); --action-hover: var(--blue-600); --action-active: var(--blue-800); --text-on-action: var(--color-white); /* ---- Acento técnico ---- `accent` é a régua/nó decorativo (cor institucional cheia); `accent-deep` é a versão para TEXTO, que precisa passar AA. */ --accent: var(--color-cyan); --accent-deep: var(--cyan-700); /* ---- Feedback ---- */ --feedback-error: #C4432E; --feedback-error-bg: #FBEEEB; --feedback-success: var(--color-cyan); /* ====================================================================== 3 · TIPOGRAFIA "Editorial nos títulos. Precisão tecnológica no conteúdo." (doc 03) ====================================================================== */ /* Família única, como a Fteam faz com Roboto: a hierarquia vem de peso e tracking, não de troca de tipo. O mono fica reservado a dados e etiquetas. */ --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif; --font-display: var(--font-body); --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* ---- Pesos ---- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* ---- Escala fluida ---- O hero da Fteam vai a 68px porque a manchete dela tem 48 caracteres. A da Navit tem 95: no mesmo corpo ela quebraria em 8 linhas. 46px mantém o peso de manchete e resolve em 4 linhas na coluna de texto. */ --text-hero: clamp(1.875rem, 1.35rem + 1.9vw, 2.875rem); /* 30 → 46 */ --text-display: clamp(1.875rem, 1.35rem + 2.3vw, 3.25rem); /* 30 → 52 */ --text-h2: clamp(1.75rem, 1.35rem + 1.75vw, 2.75rem); /* 28 → 44 */ --text-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem); /* 20 → 24 */ --text-h4: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); /* 17 → 20 */ --text-quote: clamp(1.375rem, 1.15rem + 1vw, 2rem); /* 22 → 32 */ --text-lead: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem); /* 17 → 19 */ --text-base: 1rem; /* 16 */ --text-sm: 0.9375rem; /* 15 */ --text-xs: 0.875rem; /* 14 */ --text-label: 0.75rem; /* 12 — etiquetas mono */ --leading-tight: 1.04; --leading-snug: 1.1; --leading-heading: 1.25; --leading-normal: 1.55; --leading-relaxed: 1.65; /* Tracking negativo e fechado no display — a assinatura tipográfica do grupo. Valores absolutos, como na Fteam, para não escalar com o clamp. */ --tracking-hero: -1.5px; --tracking-display: -1px; --tracking-h2: -0.8px; --tracking-tight: -0.3px; --tracking-mono: 0.08em; --tracking-overline: 1.5px; /* ====================================================================== 4 · ESPAÇAMENTO (grade de 4px) ====================================================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ====================================================================== 5 · LAYOUT — grade editorial de 12 colunas ====================================================================== */ --container-max: 1200px; --container-wide: 1320px; --gutter: clamp(20px, 4vw, 40px); --grid-columns: 12; --grid-gap: clamp(20px, 2vw, 32px); /* Medidas de leitura (doc 03: "largura de leitura confortável") */ --measure-prose: 68ch; --measure-lead: 62ch; --measure-narrow: 720px; /* Ritmo vertical de seção */ --section-y: clamp(64px, 8vw, 112px); --section-y-tight: clamp(48px, 6vw, 80px); --header-h: 76px; /* ====================================================================== 6 · RAIOS — escala da Fteam. Sem pílula em botões: o rigor editorial pede cantos contidos. `pill` fica reservado a tags e pontos. ====================================================================== */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-pill: 999px; /* ====================================================================== 7 · SOMBRAS — tintadas no grafite da marca, baixa opacidade ====================================================================== */ --shadow-xs: 0 1px 2px rgba(16, 19, 24, 0.05); --shadow-sm: 0 1px 3px rgba(16, 19, 24, 0.07), 0 1px 2px rgba(16, 19, 24, 0.04); --shadow-md: 0 4px 12px rgba(16, 19, 24, 0.07), 0 2px 4px rgba(16, 19, 24, 0.04); --shadow-lg: 0 12px 28px rgba(16, 19, 24, 0.09), 0 4px 10px rgba(16, 19, 24, 0.05); --shadow-xl: 0 24px 56px rgba(16, 19, 24, 0.12), 0 8px 20px rgba(16, 19, 24, 0.06); --shadow-focus: 0 0 0 3px rgba(69, 114, 231, 0.32); /* ====================================================================== 8 · MOTION — "movimento que sussurra, com momentos de impacto" ====================================================================== */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-reveal: 620ms; --dur-route: 1400ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emphasized: cubic-bezier(0.3, 0, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ====================================================================== 9 · CAMADAS ====================================================================== */ --z-behind: -1; --z-base: 0; --z-decor: 1; --z-content: 2; --z-header: 50; --z-mobile-nav: 80; --z-skip: 100; } /* ========================================================================== SUPERFÍCIE INVERSA `.on-inverse` remapeia os papéis semânticos para blocos grafite, de modo que os componentes não precisam saber em que fundo estão. ========================================================================== */ .on-inverse { --bg-page: var(--graphite-800); --bg-raised: var(--graphite-700); --bg-card: var(--graphite-700); --bg-subtle: var(--graphite-600); --text-strong: var(--color-offwhite); --text-body: var(--color-offwhite); --text-muted: var(--text-on-inverse-muted); --border-subtle: var(--border-inverse); --border-default: var(--border-inverse); --border-strong: var(--border-inverse-strong); --text-link: var(--cyan-300); --text-link-hover: var(--color-white); --border-focus: var(--color-cyan); background: var(--graphite-800); color: var(--color-offwhite); }