/* ========================================================================== Design Tokens — Cidades.io Portal (VPS1) Carregado ANTES dos demais CSS. Fornece variáveis canônicas para tipografia, espaçamento, sizing, sombras e transições. Referência: vps1-interface/public/docs/STYLE-GUIDE.md ========================================================================== */ /* ============================================================================ BRAND TOKENS — fonte única da verdade pra cor de marca. Pra trocar paleta inteira do site (rebrand permanente OU tema sazonal), altere apenas estes 7 valores. Bootstrap, dark mode e todos os tokens semânticos abaixo seguem automaticamente. Pra ativar tema sazonal: setar atributo `data-theme="X"` no (ex: data-theme="natal" / "independencia" / "outubro_rosa"). Veja seção "Holiday Themes" no final deste arquivo. ============================================================================ */ :root { /* ─── Brand (rebrand 2026-05-27 — teal) ─── */ --brand: #02AA8D; /* primária — botões, links ativos, ícones destaque */ --brand-hover: #02997F; /* hover/active states */ --brand-dark: #027866; /* WCAG AA pra texto pequeno fundo branco (~4.6:1) */ --brand-light: #E6F8F5; /* fundos sutis de cards e seções */ --brand-contrast: #FFFFFF; /* texto sobre fundo brand */ /* ─── Accent (laranja existente — mantido pra continuidade) ─── */ --accent: #EA580C; /* CTAs secundários, "Chama o Cid", FeedAgora */ --accent-hover: #C2410C; --accent-light: #FED7AA; /* ─── Text base ─── */ --text-dark: #102A2C; /* verde-petróleo escuro pra títulos */ /* ─── Override Bootstrap (cascata automática pra todos os .btn-primary, .text-primary, .bg-primary, etc) ─── */ --bs-primary: var(--brand); --bs-primary-rgb: 2, 170, 141; --bs-link-color: var(--brand-dark); --bs-link-hover-color: var(--brand); --fs-section-title: 1.5rem; --fs-card-title: 1rem; --fs-card-body: 0.9rem; --fs-meta: 0.82rem; --fs-badge: 0.75rem; --fw-section-title: 700; --fw-card-title: 600; --fw-body: 400; --lh-title: 1.35; --lh-body: 1.55; /* ─── Spacing ─── */ --sp-card-pad-y: 1.25rem; --sp-card-pad-x: 1.5rem; --sp-grid-gap: 1.5rem; --sp-section-mb: 2rem; /* 10/09 (dono): 32 px — a oferta empurrava Novidades para longe */ --sp-card-gap-internal: 0.75rem; --sp-card-gap-meta: 0.4rem; --sp-header-mb: 1.5rem; /* ─── Sizing ─── */ --size-logo: 56px; --size-logo-compact: 48px; --radius-card: 16px; --radius-logo: 14px; --radius-badge: 8px; --grid-min-card: 300px; --card-min-height: 160px; /* ─── Elevation / Shadows (Light) ─── */ --shadow-card: 0 1px 3px rgba(15,23,42,0.06), 0 2px 8px rgba(15,23,42,0.04); --shadow-card-hover: 0 6px 20px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.05); --border-card: 1px solid rgba(15,23,42,0.08); /* ─── Color Semantic Aliases ─── */ --c-surface: var(--bs-body-bg); --c-surface-muted: var(--bs-tertiary-bg); --c-text-primary: var(--bs-body-color); --c-text-secondary: var(--bs-secondary-color); --c-text-tertiary: var(--bs-tertiary-color); --c-accent-distance: #0891b2; --c-accent-new: #16a34a; --c-accent-primary: var(--brand); /* ─── Transitions ─── */ --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --t-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1); --t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); /* ─── Breakpoints (informativos, usados em @media nos consumidores) ─── */ --bp-sm: 576px; --bp-md: 768px; --bp-lg: 992px; --bp-xl: 1200px; } /* ─── Mobile overrides ─── */ @media (max-width: 767.98px) { :root { --fs-section-title: 1.25rem; --fs-card-title: 0.95rem; --fs-card-body: 0.88rem; --fs-meta: 0.78rem; --fs-badge: 0.72rem; --lh-body: 1.5; --sp-card-pad-y: 1rem; --sp-card-pad-x: 1.15rem; --sp-grid-gap: 1rem; --sp-section-mb: 2rem; --sp-header-mb: 1.25rem; --size-logo: 48px; --size-logo-compact: 40px; } } /* ─── Dark mode overrides ─── */ [data-bs-theme='dark'] { --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.2); --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.4); --border-card: 1px solid rgba(255,255,255,0.08); --c-accent-distance: #22d3ee; /* c-accent-new mantém (verde tem boa legibilidade em ambos) */ /* Brand em dark: levemente mais clara pra contraste com fundo preto */ --brand: #03C4A4; --brand-light: rgba(2,170,141,0.18); --brand-dark: #02AA8D; /* em dark, "dark" vira a versão padrão */ --bs-primary: var(--brand); --bs-primary-rgb: 3, 196, 164; --bs-link-color: var(--brand); --bs-link-hover-color: #4DD9BD; } /* ============================================================================ HOLIDAY THEMES — sobrescreve apenas brand/accent. Ativar via JS ou PHP setando ``. Mês padrão sugerido (auto-detect opcional): 12 → natal 09 → independencia 10 → outubro_rosa 11 → novembro_azul 06 → festa_junina Ver /js-dev/brand-theme.js (auto-detect por mês via localStorage override). ============================================================================ */ [data-theme="natal"] { --brand: #C8102E; --brand-hover: #B0091F; --brand-dark: #8B0820; --brand-light: #FFE5E9; --accent: #006B3C; --bs-primary: var(--brand); --bs-primary-rgb: 200, 16, 46; } [data-theme="independencia"] { --brand: #009C3B; --brand-hover: #00802F; --brand-dark: #005A21; --brand-light: #E6F7EC; --accent: #FFDF00; --bs-primary: var(--brand); --bs-primary-rgb: 0, 156, 59; } [data-theme="outubro_rosa"] { --brand: #E91E63; --brand-hover: #C2185B; --brand-dark: #880E4F; --brand-light: #FCE4EC; --accent: #FF7A1A; --bs-primary: var(--brand); --bs-primary-rgb: 233, 30, 99; } [data-theme="novembro_azul"] { --brand: #1976D2; --brand-hover: #1565C0; --brand-dark: #0D47A1; --brand-light: #E3F2FD; --accent: #EA580C; --bs-primary: var(--brand); --bs-primary-rgb: 25, 118, 210; } [data-theme="festa_junina"] { --brand: #D32F2F; --brand-hover: #C62828; --brand-dark: #B71C1C; --brand-light: #FFEBEE; --accent: #FBC02D; --bs-primary: var(--brand); --bs-primary-rgb: 211, 47, 47; } /* ─── Mixin: .elev-card ─── */ /* Aplica sombra/hover padrão em qualquer card. Use ao invés de reinventar. */ .elev-card { box-shadow: var(--shadow-card); transition: box-shadow var(--t-normal), transform var(--t-normal); } .elev-card:hover { box-shadow: var(--shadow-card-hover); } .elev-card:focus-visible { outline: 2px solid var(--c-accent-primary); outline-offset: 2px; }