/* ============================================================ DRE - TOKENS DE TEMA (fonte unica da identidade visual) Carregado ANTES de style.css em todas as paginas. TEMA CLARO e o padrao (o app original era claro). O escuro fica em :root[data-theme="dark"], alternado pelo botao do header (public/js/theme.js, persistido em localStorage). Contraste: os DOIS conjuntos foram MEDIDOS contra WCAG 2.1 AA (texto 4.5:1; marcas de grafico e contorno de campo 3:1). As fontes vem por no - nunca @import (atrasa ~1s). ============================================================ */ :root { color-scheme: light; /* superficies (do fundo para o topo) */ --bg: #eef1f7; --surface: #f7f9fc; --card-bg: #ffffff; --elevated: #eef1f8; --border: #cdd4e4; --border-soft: #e2e7f0; --field-border: #8791b0; /* 3.13:1 sobre card: contorno de campo */ /* tintas (AA sobre todas as superficies acima) */ --ink: #182035; /* 16.2:1 sobre card */ --ink-2: #3f4a68; /* 8.8:1 - secundario, labels */ --ink-3: #5d6884; /* 5.6:1 - terciario, hints e captions */ /* semantica */ --accent: #4a6ce8; /* PREENCHIMENTO: branco em cima 4.56 */ --accent-text: #3453c4; /* TEXTO/link: 6.6 sobre card */ --accent-soft: rgba(74, 108, 232, 0.10); --accent-hover: #4463d5; /* branco em cima: 5.26 — hover ESCURECE */ --accent-border: rgba(52, 83, 196, 0.45); --pos: #17a863; --pos-fill: #128552; --pos-text: #0d7a45; --pos-soft: rgba(18, 133, 82, 0.12); --neg: #d94848; --neg-fill: #c53a3a; --neg-text: #b32828; --neg-soft: rgba(197, 58, 58, 0.10); --warning: #ffbb33; /* PREENCHIMENTO de selo */ --warn-text: #8a5f08; /* TEXTO de aviso: 5.0 sobre elevated */ --warn-soft: rgba(255, 187, 51, 0.22); --brand-kirvano: #7c3aed; --brand-kirvano-soft: rgba(124, 58, 237, 0.10); /* series do grafico (>=3:1 sobre o card, CVD-safe na ordem usada) */ --chart-revenue: #4a6ce8; --chart-cost: #d94848; --chart-profit: #128552; --chart-grid: #e3e8f2; /* forma e ritmo */ --radius: 10px; --radius-sm: 7px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --shadow-1: 0 1px 2px rgba(23, 30, 60, 0.08); --shadow-2: 0 8px 24px rgba(23, 30, 60, 0.14); --font-sans: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', 'Cascadia Mono', Consolas, monospace; --t-fast: 0.15s; --t-base: 0.2s; } /* -- TEMA ESCURO (opcional, via toggle) ---------------------- */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0d1021; --surface: #141830; --card-bg: #171c33; --elevated: #1d2342; --border: #333a5e; --border-soft: #262c48; --field-border: #616a97; --ink: #eef0f8; --ink-2: #a3aac7; --ink-3: #868eb0; --accent: #4a6ce8; --accent-text: #849cf6; --accent-soft: rgba(90, 124, 240, 0.16); --accent-hover: #4463d5; --accent-border: rgba(132, 156, 246, 0.45); --pos: #17a863; --pos-fill: #128552; --pos-text: #45d68f; --pos-soft: rgba(23, 168, 99, 0.15); --neg: #d94848; --neg-fill: #c53a3a; --neg-text: #ff8080; --neg-soft: rgba(217, 72, 72, 0.15); --warning: #ffbb33; --warn-text: #ffbb33; --warn-soft: rgba(255, 187, 51, 0.15); --brand-kirvano: #cba6f7; --brand-kirvano-soft: rgba(203, 166, 247, 0.15); --chart-revenue: #5b7cf0; --chart-cost: #d94848; --chart-profit: #17a863; --chart-grid: #20253e; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45); } /* -- base ---------------------------------------------------- */ body { font-family: var(--font-sans); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; } /* Dinheiro alinha em coluna com digitos de largura fixa. */ .num, .value, .total, td.money { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* -- primitivos compartilhados ------------------------------- */ .eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); } /* Selo de estado. Cor sozinha nunca carrega significado: quem usa deve incluir texto (e icone quando for status). */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .badge.up, .badge.pos { color: var(--pos-text); background: var(--pos-soft); } .badge.down, .badge.neg { color: var(--neg-text); background: var(--neg-soft); } .badge.info { color: var(--accent-text); background: var(--accent-soft); } .badge.warn { color: var(--warn-text); background: var(--warn-soft); } .badge.muted { color: var(--ink-2); background: var(--elevated); } /* -- botao de tema (header de todas as paginas) -------------- */ .btn-theme { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--ink-2); cursor: pointer; transition: color var(--t-base), border-color var(--t-base); } .btn-theme:hover { color: var(--ink); border-color: var(--ink-3); } .btn-theme svg { width: 15px; height: 15px; } /* claro mostra a lua (ir para o escuro); escuro mostra o sol */ .btn-theme .icone-sol { display: none; } :root[data-theme="dark"] .btn-theme .icone-sol { display: block; } :root[data-theme="dark"] .btn-theme .icone-lua { display: none; } /* -- acessibilidade ------------------------------------------ */ :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 4px; } @media (pointer: coarse) { button, .nav-link, a.btn, select, textarea, input:not([type="checkbox"]):not([type="radio"]) { min-height: 44px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* -- controles de formulario --------------------------------- */ :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"])), :where(select), :where(textarea) { background: var(--surface); color: var(--ink); border: 1px solid var(--field-border); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 15px; padding: 9px 12px; transition: border-color var(--t-base), background var(--t-base); } input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; } :where(input, select, textarea):hover:not(:disabled) { border-color: var(--ink-3); } /* Campo de texto troca o outline por borda + halo, que da sinal suficiente. Checkbox e radio NAO: eles nao tem borda visivel, e o halo de --accent-soft fica em 1.14:1 — indicador de foco invisivel para quem navega por teclado. Por isso saem da regra e recebem anel de verdade. */ :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-soft); } input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; } :where(input, select, textarea):disabled { opacity: 0.5; cursor: not-allowed; } input[type="number"] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } label { color: var(--ink-2); } label.required::after { content: ' *'; color: var(--neg-text); } ::selection { background: var(--accent); color: #fff; } /* -- barra de rolagem ---------------------------------------- */ * { scrollbar-color: var(--border) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-pill); border: 3px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--ink-3); } /* -- marcador de identidade de plataforma -------------------- */ .plat-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: var(--ink-3); flex: 0 0 auto; } button svg, .badge svg, .hero-delta svg, .nav-link svg { vertical-align: -2px; }