/* * shared/tokens.css — CAMADA DE TOKENS (v2 · reconciliação GXON ↔ repo) * ------------------------------------------------------------------ * Evolui o antigo shared/theme.css. Fonte única das variáveis de tema * (fundo, superfície, borda, texto, marca/acento) MAIS as escalas de * ritmo (tipografia, raio, espaçamento, elevação) colhidas da GXON e * reexpressas nos valores do fibo. * * PRINCÍPIO DA RECONCILIAÇÃO (decisão: fonte da verdade = repo): * - COR manda o repo: marca navy #1E3A5F + acento #2563EB, superfícies * quentes. A paleta azul da GXON (#316AFF) foi DESCARTADA. * - RITMO entra da GXON: família Plus Jakarta Sans, escala de raio, * espaçamento e a base tipográfica (14px / 1.6). * * ZERO QUEBRA: todo o bloco ESTRUTURAL abaixo é idêntico ao theme.css * atual (mesmos nomes e apelidos --text2/--muted, --surface2/--surface-2 * etc.), então trocar theme.css por este arquivo não mexe em nenhuma * regra existente. As camadas novas (TIPO/RAIO/ESPAÇO/ELEVAÇÃO) são * ADITIVAS: nada sobrescreve o que os módulos já usam. * * TEMA: data-theme no , vindo do Shell (localStorage 'sgf-theme' + * postMessage 'sgf-theme'); default claro; NUNCA prefers-color-scheme. * * Framework-agnóstico de propósito: são custom properties puras — servem * igual nas páginas vanilla de hoje e no futuro app (Vue) do ERP. * ------------------------------------------------------------------ */ /* ===== Plus Jakarta Sans — VENDOR LOCAL (npm @fontsource, sem CDN) ===== Arquivos em /vendor/fonts/plus-jakarta-sans/ (subset latin, ~12 KB cada). Ver nota de vendoring no handoff da Fase 1. */ @font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('/vendor/fonts/plus-jakarta-sans/plus-jakarta-sans-400.woff2') format('woff2'); } @font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('/vendor/fonts/plus-jakarta-sans/plus-jakarta-sans-500.woff2') format('woff2'); } @font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('/vendor/fonts/plus-jakarta-sans/plus-jakarta-sans-600.woff2') format('woff2'); } @font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('/vendor/fonts/plus-jakarta-sans/plus-jakarta-sans-700.woff2') format('woff2'); } :root{ /* ================================================================ 1. ESTRUTURAIS — verbatim do theme.css em produção (zero quebra) ================================================================ */ /* CLARO = fundo do Metas em produção: off-white quente #f5f5f3, superfície branca, borda taupe #d3d1c7. Acento azul, marca navy. */ --bg:#F5F5F3; --surface:#FFFFFF; --surface2:#F1EFE8; --surface-2:#F1EFE8; /* banda/cabeçalho/hover */ --surface3:#E8E6DF; --hover:#F1EFE8; /* bordas — taupe quente (recorte dos cards) */ --border:#D3D1C7; --border2:#C6C2B8; /* texto (dois esquemas de nome) */ --text:#1A1A1A; --text2:#5F5E5A; --muted:#5F5E5A; --text3:#9A9180; --faint:#9A9180; --text4:#B4AC9C; /* marca navy + acento azul */ --blue:#1E3A5F; --navy:#1E3A5F; --brand:#1E3A5F; --brand-fill:#1E3A5F; --brand-fill-h:#162D4A; --brand-soft:#E8EEF5; --accent:#2563EB; --accent-soft:#EEF2FF; --active-bg:#EEF2FF; --active-color:#1D4ED8; --blue2:#2B5797; /* azul MÉDIO (não confundir com o acento #2563EB) */ /* status semântico (fonte única — antes duplicado por página) */ --red:#A32D2D;--red2:#FCEBEB;--green:#0F6E56;--green2:#E1F5EE;--orange:#854F0B;--orange2:#FAEEDA; --yellow:#F0C419;--yellow2:#FFF3CC;--blue2s:#E6F1FB;--gold-fg:#8B6000;--purple:#5B21B6;--purple2:#F5F3FF; /* notificação */ --badge:#E5484D; /* ================================================================ 2. TIPOGRAFIA — Plus Jakarta Sans (GXON) + escala (base 14px/1.6) ================================================================ */ --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --fs-xs:12px; --fs-sm:13px; --fs-base:14px; /* GXON $font-size-base 0.875rem */ --fs-md:15px; --fs-lg:16px; --fs-xl:18px; --fs-2xl:22px; --fs-3xl:28px; --lh-tight:1.3; --lh-base:1.6; /* GXON $line-height-base */ --lh-loose:1.75; --fw-normal:400; --fw-medium:500; /* GXON base */ --fw-semibold:600;/* GXON headings */ --fw-bold:700; /* ================================================================ 3. RAIO — ritmo da GXON reexpresso (px), com a escala do sistema ================================================================ */ --r-xs:4px; /* GXON .25rem */ --r-sm:6px; /* GXON .375rem (raio base) */ --r-md:8px; /* botões/inputs GXON */ --r-lg:10px; /* GXON .625rem (cards) */ --r-xl:16px; /* GXON 1rem */ --r-pill:999px; /* ================================================================ 4. ESPAÇAMENTO — escala GXON ($spacer 1rem) ================================================================ */ --sp-0:0; --sp-1:4px; /* .25rem */ --sp-2:8px; /* .5rem */ --sp-3:16px; /* 1rem */ --sp-4:24px; /* 1.5rem */ --sp-5:40px; /* 2.5rem */ --sp-6:45px; /* 2.813rem */ --sp-7:50px; /* 3.125rem */ /* ================================================================ 5. ELEVAÇÃO — sombras SUTIS do fibo (o recorte vem da borda); as escalas pesadas da GXON foram deliberadamente NÃO adotadas. ================================================================ */ --shadow-sm:0 1px 2px rgba(60,50,30,.05); --shadow:0 1px 2px rgba(60,50,30,.04),0 1px 3px rgba(60,50,30,.06); --shadow-lg:0 6px 20px rgba(60,50,30,.10); --shadow-xl:0 24px 64px rgba(60,50,30,.16); } [data-theme="dark"]{ /* ---- ESTRUTURAIS (verbatim do theme.css) ---- */ --bg:#0F141C; --surface:#161D29; --surface2:#1C2532; --surface-2:#1C2532; --surface3:#232E3E; --hover:#1C2532; --border:#2A3547; --border2:#33415A; --text:#E6EBF3; --text2:#93A0B4; --muted:#93A0B4; --text3:#66748C; --faint:#66748C; --text4:#55627A; --blue:#1E3A5F; --navy:#1E3A5F; --brand:#5B8CFF; --brand-fill:#2563EB; --brand-fill-h:#1D4ED8; --brand-soft:#1D2A4A; --accent:#5B8CFF; --accent-soft:#1B2740; --active-bg:#1D2A4A; --active-color:#60A5FA; --blue2:#60A5FA; --red2:#2D1515;--green2:#0D2420;--orange2:#2A1E0A;--yellow2:#2A2310;--blue2s:#17233A;--gold-fg:#E5B85C;--purple2:#1E1535; --badge:#F2555A; /* ---- ELEVAÇÃO (escuro) ---- */ --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 6px 20px rgba(0,0,0,.5); --shadow-xl:0 24px 64px rgba(0,0,0,.6); /* TIPO/RAIO/ESPAÇO herdam do :root (não mudam com o tema). */ }