/* variaveis.css — Paleta de cores e temas Defesa Civil de São Bento do Sul / SC ------------------------------------------------- Ordem de aplicação: incluir ANTES do main.css. Para trocar de tema, use (ou outro). As cores do tema padrão foram extraídas do brasão oficial (assets/img/logo.png). */ /* ============================= Tema Padrão — Defesa Civil SBS (azul-marinho / laranja do brasão) ============================= */ :root, .theme-default { /* Base / superfícies */ --bg-page: #F5F7FB; --bg-card: #FFFFFF; --bg-menu-login: #262B6A; --text-primary: #16202A; --text-secondary: #2B3B4B; --border-soft: #E6ECF4; --border-dashed: #D7E2F0; /* Marca (brasão Defesa Civil São Bento do Sul) */ --color-primary: #262B6A; /* azul-marinho do brasão */ --color-primary-600: #363D8F; /* azul de apoio / hover */ --color-primary-900: #1A1E4B; /* azul escuro (rodapé) */ --color-secondary: #FAA74A; /* laranja do brasão */ --color-accent: #E8892B; /* laranja de apoio / hover */ /* Estados */ --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --info: #06b6d4; /* Links */ --link: #363D8F; --link-hover: #262B6A; /* Sombra / raios / foco */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06); --shadow-md: 0 6px 18px rgba(38, 43, 106, .08); --shadow-lg: 0 10px 30px rgba(38, 43, 106, .10); --radius-sm: .375rem; --radius-md: .75rem; --radius-lg: 1rem; --radius-xl: 1.25rem; --focus-ring: 0 0 0 3px rgba(38, 43, 106, .25); /* Gradientes usados no hero e nas linhas do stepper */ --hero-gradient: linear-gradient(135deg, #1A1E4B 0%, #262B6A 55%, #363D8F 100%); --bar-gradient: linear-gradient(90deg, #262B6A, #FAA74A); } /* ============================= 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-primary-900: #880e4f; --color-secondary: #ff80ab; --color-accent: #ad1457; --link: #c2185b; --link-hover: #ad1457; --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, #880e4f 0%, #c2185b 60%, #e91e63 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: #1565c0; --color-primary-600: #1976d2; --color-primary-900: #0d47a1; --color-secondary: #29b6f6; --color-accent: #0288d1; --link: #1d4ed8; --link-hover: #1e40af; --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, #0d47a1 0%, #1565c0 60%, #1976d2 100%); --bar-gradient: linear-gradient(90deg, #1565c0, #29b6f6); } /* ============================= Tema: Luto (monocromático) Para uso em períodos de luto oficial decretado. ============================= */ .theme-luto { --bg-page: #f4f4f5; --bg-card: #ffffff; --text-primary: #18181b; --text-secondary: #52525b; --border-soft: #e4e4e7; --border-dashed: #d4d4d8; --color-primary: #27272a; --color-primary-600: #3f3f46; --color-primary-900: #18181b; --color-secondary: #71717a; --color-accent: #52525b; --link: #3f3f46; --link-hover: #18181b; --shadow-md: 0 6px 18px rgba(0, 0, 0, .08); --shadow-lg: 0 10px 30px rgba(0, 0, 0, .10); --focus-ring: 0 0 0 3px rgba(0, 0, 0, .18); --hero-gradient: linear-gradient(135deg, #18181b 0%, #27272a 60%, #3f3f46 100%); --bar-gradient: linear-gradient(90deg, #27272a, #71717a); }