/* ============================================================ FSJ LOGÍSTICA — Portal de Terceiros tokens.css · fonte única de verdade do design system Paleta derivada da identidade FSJ (verde-oliva #57841c), com os valores ajustados para contraste mínimo 4.5:1. O tema claro é o padrão: o cadastro é preenchido no pátio, sob sol, onde fundo escuro reflete e prejudica a leitura. ============================================================ */ :root { /* ── Marca ───────────────────────────────────────────── */ --verde-fsj: #4C7518; /* ação primária — 5.1:1 no branco */ --verde-escuro: #2F4A0E; /* títulos, texto de destaque */ --verde-vivo: #57841c; /* acento da identidade original */ --verde-claro: #EBF2E0; /* fundo de seção, item marcado */ --verde-borda: #C9DCAE; /* borda de item marcado */ /* ── Neutros (viés verde, escolhidos e não herdados) ── */ --fundo: #F7F9F4; --superficie: #FFFFFF; --superficie-2: #F0F4EA; --borda: #D8E0CE; --borda-forte: #B4C2A4; --texto: #16211A; /* 14.8:1 no fundo */ --texto-2: #3F4F45; /* 8.1:1 */ --texto-3: #63755F; /* 4.6:1 — limite para texto auxiliar */ /* ── Semânticos (nunca usados sozinhos: sempre com ícone e rótulo) */ --sucesso: #15803D; --sucesso-bg: #E7F5EC; --sucesso-borda: #A8D9BC; --atencao: #B45309; --atencao-bg: #FDF3E4; --atencao-borda: #EBC894; --erro: #B91C1C; --erro-bg: #FDECEC; --erro-borda: #F0B4B4; --info: #1D5D77; --info-bg: #E6F1F6; --info-borda: #A9CEDF; /* ── Tipografia ──────────────────────────────────────── */ --fonte-titulo: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif; --fonte-corpo: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif; /* 17px de base: acima dos 16px que evitam o auto-zoom do iOS, com folga para leitura ao sol e para usuários présbitas. */ --t-xs: 0.8125rem; /* 13px — apenas rótulos maiúsculos */ --t-sm: 0.9375rem; /* 15px — texto auxiliar */ --t-base: 1.0625rem; /* 17px — corpo e campos */ --t-lg: 1.1875rem; /* 19px */ --t-xl: 1.4375rem; /* 23px — título de etapa */ --t-2xl: 1.8125rem; /* 29px */ --t-3xl: 2.25rem; /* 36px — números grandes */ /* ── Espaçamento (escala de 4px) ─────────────────────── */ --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; /* ── Alvos de toque ──────────────────────────────────── */ /* 56px, não 44px: o motorista usa de pé, com luva, muitas vezes com o caminhão em movimento ao lado. */ --toque: 3.5rem; --toque-min: 2.75rem; /* ── Formas e sombras ────────────────────────────────── */ --raio-sm: 6px; --raio: 10px; --raio-lg: 16px; --raio-full: 999px; --sombra-1: 0 1px 2px rgba(22,33,26,.06); --sombra-2: 0 2px 8px rgba(22,33,26,.08); --sombra-3: 0 8px 24px -8px rgba(22,33,26,.18); --sombra-cta: 0 -4px 16px -6px rgba(22,33,26,.16); /* ── Camadas ─────────────────────────────────────────── */ --z-base: 0; --z-sticky: 20; --z-cta: 30; --z-overlay: 40; --z-modal: 50; --z-toast: 60; /* ── Ícone embutido ──────────────────────────────────── */ /* A seta do select vem do token para acompanhar o tema: um SVG com cor fixa fica invisível no modo escuro. */ --seta-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2363755F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); /* ── Movimento ───────────────────────────────────────── */ --d-rapido: 120ms; --d-padrao: 200ms; --d-lento: 320ms; --ease: cubic-bezier(.4, 0, .2, 1); --ease-saida: cubic-bezier(.4, 0, 1, 1); } /* ── Tema escuro ────────────────────────────────────────── Mantido para quem usa o celular no modo escuro à noite. Os tokens são redefinidos; nenhum componente declara cor fora daqui, então os dois temas resolvem como conjunto. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --verde-fsj: #8FC93C; --verde-escuro: #C3E38A; --verde-vivo: #7AB02E; --verde-claro: #172A12; --verde-borda: #2F4A18; --fundo: #0D1410; --superficie: #151F18; --superficie-2: #1C2A20; --borda: #2A3B2F; --borda-forte: #3E5645; --texto: #E8F1E9; --texto-2: #BCCDBF; --texto-3: #8CA391; --sucesso: #4ADE80; --sucesso-bg: #10231A; --sucesso-borda: #1F5136; --atencao: #FBBF24; --atencao-bg: #241C0C; --atencao-borda: #5A4413; --erro: #F87171; --erro-bg: #2A1414; --erro-borda: #5E2626; --info: #7DD3FC; --info-bg: #0E2029; --info-borda: #1E4457; --seta-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238CA391' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); --sombra-1: 0 1px 2px rgba(0,0,0,.4); --sombra-2: 0 2px 8px rgba(0,0,0,.5); --sombra-3: 0 8px 24px -8px rgba(0,0,0,.7); --sombra-cta: 0 -4px 16px -6px rgba(0,0,0,.6); } } :root[data-tema="escuro"] { --verde-fsj: #8FC93C; --verde-escuro: #C3E38A; --verde-vivo: #7AB02E; --verde-claro: #172A12; --verde-borda: #2F4A18; --fundo: #0D1410; --superficie: #151F18; --superficie-2: #1C2A20; --borda: #2A3B2F; --borda-forte: #3E5645; --texto: #E8F1E9; --texto-2: #BCCDBF; --texto-3: #8CA391; --sucesso: #4ADE80; --sucesso-bg: #10231A; --sucesso-borda: #1F5136; --atencao: #FBBF24; --atencao-bg: #241C0C; --atencao-borda: #5A4413; --erro: #F87171; --erro-bg: #2A1414; --erro-borda: #5E2626; --info: #7DD3FC; --info-bg: #0E2029; --info-borda: #1E4457; --seta-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238CA391' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); --sombra-1: 0 1px 2px rgba(0,0,0,.4); --sombra-2: 0 2px 8px rgba(0,0,0,.5); --sombra-3: 0 8px 24px -8px rgba(0,0,0,.7); --sombra-cta: 0 -4px 16px -6px rgba(0,0,0,.6); }