/* ============================================================ Bombou — base (tokens da marca: ver marca/README.md) Paleta laranja-brasa, neutros levemente quentes. O tema troca pelo atributo data-theme no : "claro" | "escuro". ============================================================ */ /* Fontes (Bricolage Grotesque + DM Sans + DM Mono) carregadas por no de cada página. */ /* ============================================================ Tokens Regra que sustenta o visual: os neutros puxam de leve para o quente (mesma família do laranja), sem virar bege. O laranja só aparece em ação principal, destaque e no estouro da marca. ============================================================ */ :root, :root[data-theme="claro"] { --font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, monospace; --font-display: 'Bricolage Grotesque', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --bg: #FAF8F6; --surface: #FFFFFF; --surface2: #F4F0EC; --hover: #FCFAF8; --border: #ECE6E1; --border-strong: #D9D0C9; --ink: #1A1210; --on-ink: #FFFFFF; --body: #57504B; /* 7.2:1 sobre --bg */ --muted: #756C66; /* 4.7:1 — é texto de apoio, precisa passar AA */ /* Acento. #C9390B dá 5.4:1 com branco — passa AA em botão. */ --accent: #C9390B; --accent-soft: #FFF0E8; --accent-strong: #A52E08; --red: #C6342A; --red-soft: #FDECEA; --yellow: #A96A05; --yellow-soft: #FDF3E2; --blue: #2563EB; --blue-soft: #EAF0FE; --good-bg: #FFF6F1; --bad-bg: #FDF6F5; --bar-bg: #1A1210; --bar-fg: #FFFFFF; --funnel-top: #3F3F46; --chrome-bg: #FFFFFF; --chrome-fg: #7E746E; --chrome-fg-strong: #1A1210; --chrome-active-bg: #F4F0EC; --topbar-h: 56px; --shadow-soft: 0 1px 2px rgba(16,17,20,.04), 0 1px 3px rgba(16,17,20,.03); --shadow-soft-lg: 0 6px 20px -6px rgba(16,17,20,.10), 0 2px 5px -2px rgba(16,17,20,.05); /* Marca: o estouro é sempre este laranja, nos dois temas. */ --brand: #FF5A1F; --brand-ink: #1A1210; color-scheme: light; } :root[data-theme="escuro"] { --bg: #110D0B; --surface: #1A1512; --surface2: #241D19; --hover: #1F1916; --border: #2E2622; --border-strong: #453A34; --ink: #FAF6F3; --on-ink: #110D0B; --body: #B5ABA4; --muted: #968C85; /* 5.6:1 sobre --bg escuro */ --accent: #FF7A45; --accent-soft: #3A1709; --accent-strong: #FF9A6E; --red: #F87171; --red-soft: #2E1616; --yellow: #E0A93C; --yellow-soft: #2B2211; --blue: #60A5FA; --blue-soft: #12203A; --good-bg: #24130C; --bad-bg: #241414; --bar-bg: #241D19; --bar-fg: #FAF6F3; --funnel-top: #57504B; --chrome-bg: #150F0D; --chrome-fg: #968C85; --chrome-fg-strong: #FAF6F3; --chrome-active-bg: #2A221E; --shadow-soft: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4); --shadow-soft-lg: 0 8px 24px -8px rgba(0,0,0,.65), 0 2px 5px -2px rgba(0,0,0,.5); color-scheme: dark; } /* Sem JavaScript (theme.js não rodou): segue a preferência do sistema. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #110D0B; --surface: #1A1512; --surface2: #241D19; --hover: #1F1916; --border: #2E2622; --border-strong: #453A34; --ink: #FAF6F3; --on-ink: #110D0B; --body: #B5ABA4; --muted: #968C85; --accent: #FF7A45; --accent-soft: #3A1709; --accent-strong: #FF9A6E; --red: #F87171; --red-soft: #2E1616; --yellow: #E0A93C; --yellow-soft: #2B2211; --blue: #60A5FA; --blue-soft: #12203A; --good-bg: #24130C; --bad-bg: #241414; --bar-bg: #241D19; --bar-fg: #FAF6F3; --chrome-bg: #150F0D; --chrome-fg: #968C85; --chrome-fg-strong: #FAF6F3; --chrome-active-bg: #2A221E; --shadow-soft: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4); --shadow-soft-lg: 0 8px 24px -8px rgba(0,0,0,.65), 0 2px 5px -2px rgba(0,0,0,.5); color-scheme: dark; } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--body); font-family: var(--font-ui); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { scroll-behavior: smooth; scroll-padding-top: 80px; } body { overflow-x: hidden; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font-family: inherit; } img, svg { max-width: 100%; } h1, h2, h3, h4 { color: var(--ink); font-weight: 600; letter-spacing: -0.02em; } h1, h2 { font-family: var(--font-display); font-weight: 800; } input:focus, select:focus, textarea:focus { border-color: var(--accent) !important; } input, select, textarea { color: var(--ink); } option { background: var(--surface); color: var(--ink); } :root[data-theme="escuro"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .6; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); } code { font-family: var(--font-mono); font-size: .92em; } /* ---------- tabelas ---------- */ table { border-collapse: collapse; width: 100%; } th { text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 10px; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface2); } td { padding: 10px; border-bottom: 1px solid var(--border); font-size: 13.5px; color: var(--body); vertical-align: middle; } tr:hover td { background: var(--hover); } /* ---------- interação ---------- */ button, a, [role="button"], summary { cursor: pointer; } :where(a, button, [tabindex], summary, input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; } .row { transition: background .16s ease; } .row:hover { background: var(--hover); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }