/* ============================================================ Rios Asset — ERP Design System Color & Type tokens ============================================================ */ /* ---- Webfonts (Google Fonts substitutions — see CAVEATS) ---- */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* ============================================================ COLOR TOKENS ============================================================ */ /* --- Brand primaries (do logo) --- */ --rios-navy: #0E2148; /* navy do interior do brasão */ --rios-navy-deep: #081535; /* mais escuro — cabeçalhos, sidebars */ --rios-navy-soft: #1A2E5C; /* hover sobre navy */ --rios-gold: #C9B17A; /* champagne/gold do anel */ --rios-gold-warm: #B89A5E; /* gold em hover/press */ --rios-gold-soft: #E8DCC0; /* gold rebaixado, fundos sutis */ --gold-light: #DDC58E; /* gold mais claro — fill de tabs ativas, áreas com gold como fundo */ --rios-teal: #2E8A99; /* teal do "ASSET" */ --rios-teal-deep: #1F6573; /* teal pressionado */ --rios-teal-soft: #B8D6DC; /* teal claro */ /* --- Neutrals (paleta cool, alinhada ao navy) --- */ --gray-0: #FFFFFF; --gray-50: #F7F8FA; /* fundo de página em modo claro */ --gray-100: #EEF1F5; /* fundo de seção, hover sutil */ --gray-150: #E2E7EE; /* divisores, bordas suaves */ --gray-200: #CDD4DE; /* bordas de inputs */ --gray-300: #A8B1BF; /* texto desabilitado */ --gray-400: #818B9C; /* texto auxiliar / tertiary */ --gray-500: #5C6678; /* texto secundário */ --gray-600: #3F485A; /* texto primário em fundo claro */ --gray-700: #2A3142; /* títulos */ --gray-800: #1A1F2E; --gray-900: #0F1320; /* --- Semantic — financial colors --- NOTA: em ERP financeiro brasileiro, verde = alta/positivo, vermelho = baixa/negativo. Tons rebaixados (não saturados) — uso prolongado, sem cansar a vista. */ --pos: #2F8F5F; /* alta, positivo, lucro */ --pos-bg: #E6F2EC; --pos-border: #BFE0CE; --neg: #C0394A; /* baixa, negativo, prejuízo */ --neg-hover: #A82E3D; --neg-bg: #FAE6E9; --neg-border: #EFC2C8; --warn: #B8740E; /* atenção, pendente */ --warn-bg: #FBF1DE; --warn-border: #ECD5A0; --info: #2E6BB8; --info-bg: #E5EEF8; --info-border: #BFD3EE; --neutral-bg: var(--gray-100); /* --- Surfaces (modo claro — padrão do ERP) --- */ --bg-app: var(--gray-50); --bg-surface: var(--gray-0); --bg-elevated: var(--gray-0); --bg-sunken: var(--gray-100); --bg-sidebar: var(--rios-navy-deep); --bg-topbar: var(--gray-0); --bg-overlay: rgba(15, 19, 32, 0.48); /* --- Foregrounds --- */ --fg-1: var(--gray-700); /* texto principal */ --fg-2: var(--gray-500); /* secundário */ --fg-3: var(--gray-400); /* terciário/auxiliar */ --fg-disabled: var(--gray-300); --fg-inverse: var(--gray-0); --fg-on-navy: var(--gray-0); --fg-on-navy-2: rgba(255, 255, 255, 0.68); --fg-on-navy-3: rgba(255, 255, 255, 0.42); --fg-link: var(--rios-teal); --fg-link-hover: var(--rios-teal-deep); /* --- Borders --- */ --border-subtle: var(--gray-150); --border-default: var(--gray-200); --border-strong: var(--gray-300); --border-focus: var(--rios-teal); --border-on-navy: rgba(201, 177, 122, 0.24); /* gold @ low alpha */ /* --- Accent (gold como acento, não como fundo de área grande) --- */ --accent: var(--rios-gold); --accent-hover: var(--rios-gold-warm); --accent-bg: var(--rios-gold-soft); /* ============================================================ TYPOGRAPHY ============================================================ */ /* --- Font families --- */ --font-sans: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif; --font-serif: 'Fraunces', 'Times New Roman', Georgia, serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; --font-tabular: 'Space Grotesk', sans-serif; /* combinada com font-feature-settings tabular-nums */ /* --- Font sizes — escala compacta para ERP --- */ --text-2xs: 10px; /* micro-labels, badges */ --text-xs: 11px; /* labels de tabela, metadata */ --text-sm: 12px; /* body compacto, células */ --text-base: 13px; /* body padrão do ERP */ --text-md: 14px; /* body confortável, formulários */ --text-lg: 16px; /* subseções */ --text-xl: 18px; /* títulos de card/seção */ --text-2xl: 22px; /* títulos de página */ --text-3xl: 28px; /* KPIs grandes */ --text-4xl: 36px; /* hero numbers (PL total) */ --text-5xl: 48px; /* uso raro */ /* --- Font weights --- */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold: 600; /* @kind font */ --fw-bold: 700; /* @kind font */ /* --- Line heights --- */ --lh-tight: 1.15; /* @kind font */ --lh-snug: 1.30; /* @kind font */ --lh-normal: 1.45; /* @kind font */ --lh-relaxed: 1.60; /* @kind font */ /* --- Letter spacing --- */ --ls-tight: -0.01em; /* @kind font */ --ls-normal: 0; /* @kind font */ --ls-wide: 0.04em; /* @kind font */ --ls-wider: 0.08em; /* @kind font */ /* uppercase micro-labels */ /* ============================================================ CHARTS — paleta e parâmetros para visualização de dados ============================================================ Filosofia: gráficos no ERP Rios são FERRAMENTAIS, não decorativos. Cores são derivadas da marca (navy/gold/teal) e não competem com KPIs e tabelas. Eixos e grid em tons muito sutis para que a informação (linhas, barras) tenha o peso visual. Sem animações, sem gradientes, sem 3D. Convenções financeiras: - Performance vs. benchmark: navy = portfolio, gold = bench - Composição de carteira: paleta categórica (6 cores) - Variação financeira: --pos / --neg (NUNCA outras cores) - Sequencial (heatmap): rampa neg → neutro → pos ============================================================ */ /* --- Paleta categórica (6 séries) --- Para composição de carteira, alocação por classe de ativo, comparativos multi-fundo. Ordem importa: 1ª série usa navy (mais peso visual), última usa gray (menos peso). Todas com luminância semelhante para não criar hierarquia espúria entre séries equivalentes. */ --chart-1: #0E2148; /* navy — série principal / portfolio */ --chart-2: #C9B17A; /* gold — benchmark / 2ª série */ --chart-3: #2E8A99; /* teal — 3ª série */ --chart-4: #6B4F8F; /* roxo sóbrio — 4ª série (RF, alternativos) */ --chart-5: #8A6A3E; /* bronze — 5ª série */ --chart-6: #5C6678; /* gray-500 — outros / "demais" */ /* --- Pares semânticos para gráficos financeiros --- */ --chart-pos: var(--pos); --chart-pos-soft: rgba(47, 143, 95, 0.18); /* fill de área positiva */ --chart-neg: var(--neg); --chart-neg-soft: rgba(192, 57, 74, 0.18); /* fill de área negativa */ /* --- Cor da série principal (portfolio) e benchmark --- */ --chart-portfolio: var(--rios-navy); --chart-benchmark: var(--rios-gold-warm); /* --- Eixos, grid, tooltip --- */ --chart-axis: var(--gray-300); /* linha do eixo X/Y */ --chart-axis-label: var(--gray-500); /* texto dos ticks */ --chart-grid: var(--gray-150); /* linhas internas (split) */ --chart-grid-soft: var(--gray-100); /* grid alternada / zebra */ --chart-crosshair: var(--gray-400); /* linha de cursor (pontilhada) */ /* --- Tooltip de chart --- Sólido navy com texto branco. Não translúcido — coerente com a regra geral de tooltips do DS. */ --chart-tooltip-bg: var(--rios-navy-deep); --chart-tooltip-fg: var(--gray-0); --chart-tooltip-border: var(--rios-navy-soft); /* --- Heatmap (retornos mensais) — rampa divergente neg→pos --- Usa tons rebaixados consistentes com semantic colors. Ponto neutro é cinza muito claro, NUNCA branco puro (branco "some" no fundo do app). */ --chart-heat-neg-3: #8C2231; /* -3% ou pior */ --chart-heat-neg-2: #C0394A; /* -2% */ --chart-heat-neg-1: #E8A6AE; /* -1% */ --chart-heat-zero: #ECEFF3; /* ~0% (cinza muito claro) */ --chart-heat-pos-1: #A8D6BE; /* +1% */ --chart-heat-pos-2: #2F8F5F; /* +2% */ --chart-heat-pos-3: #1B6240; /* +3% ou melhor */ /* --- Sparkline --- Linha 1.5px, sem grid, sem eixos. Uso em células de tabela, KPIs compactos. Cor neutra por default; --pos/--neg para variação direcional explícita. */ --chart-spark: var(--gray-500); --chart-spark-pos: var(--pos); --chart-spark-neg: var(--neg); /* --- Drawdown (área negativa abaixo de zero) --- */ --chart-drawdown: var(--neg); --chart-drawdown-fill: var(--chart-neg-soft); /* --- Espessuras padrão --- */ --chart-line-w: 1.5px; /* linha principal */ --chart-line-w-bold: 2px; /* portfolio em comparativo */ --chart-line-w-thin: 1px; /* eixos, grid, sparkline */ /* ============================================================ SPACING (4px base) ============================================================ */ --sp-0: 0; /* @kind spacing */ --sp-1: 2px; --sp-2: 4px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 20px; --sp-7: 24px; --sp-8: 32px; --sp-9: 40px; --sp-10: 48px; --sp-12: 64px; --sp-16: 96px; /* ============================================================ RADII — discretos. ERP financeiro = pouco arredondado. ============================================================ */ --radius-xs: 2px; --radius-sm: 3px; /* inputs, botões */ --radius-md: 4px; /* cards */ --radius-lg: 6px; /* modais, panels */ --radius-pill: 999px; /* badges, status chips */ /* ============================================================ SHADOWS — sutis. ERP usa borders, não shadows pesadas. ============================================================ */ --shadow-xs: 0 1px 0 rgba(15, 19, 32, 0.04); --shadow-sm: 0 1px 2px rgba(15, 19, 32, 0.06), 0 1px 1px rgba(15, 19, 32, 0.04); --shadow-md: 0 2px 6px rgba(15, 19, 32, 0.08), 0 1px 2px rgba(15, 19, 32, 0.04); --shadow-lg: 0 8px 24px rgba(15, 19, 32, 0.12), 0 2px 6px rgba(15, 19, 32, 0.06); --shadow-xl: 0 16px 40px rgba(15, 19, 32, 0.18); --shadow-focus: 0 0 0 3px rgba(46, 138, 153, 0.22); /* teal halo */ --shadow-inset-input: inset 0 1px 2px rgba(15, 19, 32, 0.04); /* ============================================================ LAYOUT TOKENS ============================================================ */ --sidebar-w: 232px; --sidebar-w-collapsed: 56px; --topbar-h: 52px; --row-h-compact: 32px; --row-h-default: 40px; --row-h-comfortable: 48px; /* ============================================================ MOTION ============================================================ */ --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0); /* @kind other */ --ease-emphasized: cubic-bezier(0.3, 0.0, 0.0, 1.0); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 180ms; /* @kind other */ --dur-slow: 280ms; /* @kind other */ /* ============================================================ CONTROL / OVERLAY LAYOUT ============================================================ */ --control-h-sm: 28px; --control-h-md: 32px; --control-h-lg: 40px; --input-h: 34px; --pagenav-w: 256px; --pagenav-w-compact: 220px; --drawer-w: 420px; --z-sticky: 20; --z-dropdown: 40; --z-drawer: 80; --z-toast: 100; } /* ============================================================ DARK MODE — sistema alternativo ============================================================ Ativado via (controlado pelo rios-theme-toggle.js — persiste em localStorage e respeita prefers-color-scheme do SO no primeiro acesso). Filosofia: - A marca (navy / gold / teal) NÃO some — apenas muda de papel. No light, navy é "armadura" (sidebar, headers). No dark, o próprio app já é navy-profundo, então gold passa a ser o acento de hierarquia (ativo de sidebar, headers de tabela, KPI em destaque) e teal continua como cor de foco/link. - Superfícies têm tinge azul (não cinza neutro) para manter coerência com o navy da marca — "mesma família, valor menor". - Semânticos (verde/vermelho) ficam mais luminosos para vencer o fundo escuro sem perder a sobriedade (nada de neon). - Bordas viram alpha-white sutis em vez de gray-150/200, pra não criar linhas pretas sobre escuro. - Sombras pesam mais (luz vinda de cima fica mais "real" no dark — o eye espera profundidade maior). ============================================================ */ [data-theme="dark"] { /* --- Surfaces (dark — navy-tingido) --- */ --bg-app: #0A1024; /* tela de fundo (mais escuro que navy-deep) */ --bg-surface: #121A36; /* cards, painéis */ --bg-elevated: #172248; /* dropdowns, popovers, drawer */ --bg-sunken: #0E1530; /* áreas rebaixadas, hover de tabela */ --bg-sidebar: #060B1C; /* ainda mais escuro que app — separa visualmente */ --bg-topbar: #121A36; --bg-overlay: rgba(4, 7, 18, 0.62); /* --- Foregrounds (off-white com leve azul) --- */ --fg-1: #E6E9F2; /* texto principal */ --fg-2: #9AA3B5; /* secundário */ --fg-3: #6F7892; /* terciário/auxiliar */ --fg-disabled: #4A5168; --fg-inverse: var(--gray-900); --fg-on-navy: var(--gray-0); /* navy ainda existe em alguns badges */ --fg-on-navy-2: rgba(255, 255, 255, 0.68); --fg-on-navy-3: rgba(255, 255, 255, 0.42); --fg-link: #5BBFD0; /* teal mais luminoso */ --fg-link-hover: #7FCFDD; /* --- Borders (alpha-white sutis, não cinza) --- */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --border-focus: #5BBFD0; --border-on-navy: rgba(201, 177, 122, 0.28); /* gold mais presente no dark */ /* --- Accent (gold ganha mais protagonismo no dark) --- */ --accent: var(--rios-gold); --accent-hover: #D8C28F; /* hover ilumina, não escurece */ --accent-bg: rgba(201, 177, 122, 0.10); /* --- Semantic — luminosos sobre escuro, mas rebaixados --- */ --pos: #5BC48A; --pos-bg: rgba(91, 196, 138, 0.12); --pos-border: rgba(91, 196, 138, 0.30); --neg: #E2697A; --neg-hover: #C8505F; --neg-bg: rgba(226, 105, 122, 0.12); --neg-border: rgba(226, 105, 122, 0.32); --warn: #E0B25A; --warn-bg: rgba(224, 178, 90, 0.12); --warn-border: rgba(224, 178, 90, 0.32); --info: #6FA6E8; --info-bg: rgba(111, 166, 232, 0.12); --info-border: rgba(111, 166, 232, 0.32); --neutral-bg: var(--bg-sunken); /* --- Charts (dark) --- Marca não muda; o que muda é o papel: - Série 1 (portfolio) passa de navy para GOLD (no dark, navy some no fundo). Gold vira o "armadura" visual da série principal. - Benchmark passa para teal-luminoso (vencer fundo escuro). - Demais séries iluminam ~15% para terem corpo no dark. - Eixos/grid viram alpha-white sutis (não cinza). - Heatmap mantém rampa divergente, mas o ponto neutro é um navy-claro (não cinza), e os extremos ficam um pouco mais luminosos. */ --chart-1: #D4BC8A; /* gold luminoso — portfolio (era navy no light) */ --chart-2: #5BBFD0; /* teal luminoso — benchmark (era gold no light) */ --chart-3: #9B8AC4; /* roxo claro */ --chart-4: #C99A6B; /* bronze claro */ --chart-5: #7FCFDD; /* teal extra-claro */ --chart-6: #9AA3B5; /* gray claro — "demais" */ --chart-pos: var(--pos); /* já override no dark */ --chart-pos-soft: rgba(91, 196, 138, 0.18); --chart-neg: var(--neg); --chart-neg-soft: rgba(226, 105, 122, 0.18); --chart-portfolio: #D4BC8A; --chart-benchmark: #5BBFD0; --chart-axis: rgba(255, 255, 255, 0.20); --chart-axis-label: rgba(255, 255, 255, 0.55); --chart-grid: rgba(255, 255, 255, 0.06); --chart-grid-soft: rgba(255, 255, 255, 0.03); --chart-crosshair: rgba(255, 255, 255, 0.32); --chart-tooltip-bg: #060B1C; --chart-tooltip-fg: var(--gray-0); --chart-tooltip-border: rgba(255, 255, 255, 0.14); --chart-heat-neg-3: #7A1F2C; --chart-heat-neg-2: #B83A4B; --chart-heat-neg-1: #6B2A35; --chart-heat-zero: #1A2546; --chart-heat-pos-1: #1F4E3A; --chart-heat-pos-2: #3FA56E; --chart-heat-pos-3: #5BC48A; --chart-spark: rgba(255, 255, 255, 0.55); --chart-drawdown: var(--neg); --chart-drawdown-fill: rgba(226, 105, 122, 0.18); /* --- Shadows — mais densas no dark para criar profundidade real --- */ --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.40); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.50), 0 1px 1px rgba(0, 0, 0, 0.35); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.62), 0 2px 6px rgba(0, 0, 0, 0.45); --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.70); --shadow-focus: 0 0 0 3px rgba(91, 191, 208, 0.32); --shadow-inset-input: inset 0 1px 2px rgba(0, 0, 0, 0.30); } /* Respeita preferência do SO quando o usuário ainda não escolheu manualmente (o JS toggle remove esse fallback ao salvar uma escolha explícita aplicando data-theme no ). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; } }