/* variaveis.css — Paleta de cores e temas (ajustada) ------------------------------------------------- Ordem de aplicação: incluir ANTES do main.css Use (ou outro tema) se quiser trocar dinamicamente. */ /* ============================= Tema Padrão — Defesa Civil RS (azul/laranja do seu index) ============================= */ :root, .theme-default { /* Base / superfícies */ --bg-page: #F5F7FB; /* fundo geral (era --dc-bg) */ --bg-card: #FFFFFF; /* cartões */ --bg-menu-login: #040235; /* fundo do menu de login */ --text-primary: #16202A;/* texto principal (era --dc-ink) */ --text-secondary: #2B3B4B; --border-soft: #E6ECF4; --border-dashed: #D7E2F0; /* Marca */ --color-primary: #040235; /* azul principal (era --dc-blue) */ --color-primary-600: #0C77E3; /* azul de apoio/hover (era --dc-blue-2) */ --color-secondary: #FF5B00; /* laranja principal (era --dc-orange) */ --color-accent: #FF8F2C; /* laranja de apoio (era --dc-orange-2) */ /* Estados */ --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --info: #06b6d4; /* Links */ --link: #0C77E3; --link-hover: #0757a8; /* Sombra / raios / foco */ --shadow-sm: 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 6px 18px rgba(0,0,0,.06); --shadow-lg: 0 10px 30px rgba(0,0,0,.08); --radius-sm: .375rem; --radius-md: .75rem; --radius-lg: 1rem; --radius-xl: 1.25rem; --focus-ring: 0 0 0 3px rgba(0,74,141,.25); /* Gradientes usados no hero/linhas de passo */ --hero-gradient: linear-gradient(135deg, #004A8D 0%, #025FB8 60%, #0C77E3 100%); --hero-bg: url("/../voluntarios_assets/img/banner_site.svg"); /* ajuste o caminho */ --bar-gradient: linear-gradient(90deg, #004A8D, #F57C00); } /* ============================= Tema: Outubro Rosa ============================= */ .theme-outubro-rosa { --bg-page: #fff7fb; --bg-card: #ffffff; --text-primary: #3a1436; --text-secondary: #7a3a71; --border-soft: #f4d7ea; --border-dashed: #f2c6de; --color-primary: #e91e63; --color-primary-600: #d81b60; --color-secondary: #ff80ab; --color-accent: #ad1457; --success: #22c55e; --warning: #fb923c; --danger: #ef4444; --info: #06b6d4; --link: #c2185b; --link-hover: #ad1457; --shadow-sm: 0 1px 2px rgba(233,30,99,.08); --shadow-md: 0 6px 18px rgba(233,30,99,.10); --shadow-lg: 0 10px 30px rgba(233,30,99,.14); --focus-ring: 0 0 0 3px rgba(233,30,99,.25); --hero-gradient: linear-gradient(135deg, #e91e63 0%, #f06292 60%, #d81b60 100%); --bar-gradient: linear-gradient(90deg, #e91e63, #ff80ab); } /* ============================= Tema: Novembro Azul ============================= */ .theme-novembro-azul { --bg-page: #f5f9ff; --bg-card: #ffffff; --text-primary: #0f172a; --text-secondary: #475569; --border-soft: #dbeafe; --border-dashed: #cfe4fd; --color-primary: #1976d2; --color-primary-600: #1565c0; --color-secondary: #7dd3fc; --color-accent: #0ea5e9; --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --info: #06b6d4; --link: #1d4ed8; --link-hover: #1e40af; --shadow-sm: 0 1px 2px rgba(25,118,210,.08); --shadow-md: 0 6px 18px rgba(25,118,210,.10); --shadow-lg: 0 10px 30px rgba(25,118,210,.14); --focus-ring: 0 0 0 3px rgba(25,118,210,.25); --hero-gradient: linear-gradient(135deg, #1565c0 0%, #1e88e5 60%, #1976d2 100%); --bar-gradient: linear-gradient(90deg, #1976d2, #7dd3fc); } /* ============================= Tema: Luto (monocromático) ============================= */ .theme-luto { --bg-page: #0b0b0b; --bg-card: #111213; --text-primary: #f5f5f5; --text-secondary: #cfcfcf; --border-soft: #1f2022; --border-dashed: #2a2b2d; --color-primary: #2f2f2f; --color-primary-600: #3a3a3a; --color-secondary: #5a5a5a; --color-accent: #9e9e9e; --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --info: #60a5fa; --link: #93c5fd; --link-hover: #bfdbfe; --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 6px 18px rgba(0,0,0,.35); --shadow-lg: 0 10px 30px rgba(0,0,0,.45); --focus-ring: 0 0 0 3px rgba(255,255,255,.18); --hero-gradient: linear-gradient(135deg, #0f0f10 0%, #141516 60%, #1a1b1d 100%); --bar-gradient: linear-gradient(90deg, #2f2f2f, #5a5a5a); }