/* ========================================================================== theme.css — Sistema de tema basado en CSS custom properties. Edita el bloque :root para cambiar la paleta y tipografía de TODO el sitio. No requiere SASS ni build pipeline. ========================================================================== */ :root { /* ====== Brand palette (light theme) ====== */ --brand-primary: #3AAA64; --brand-primary-rgb: 58, 170, 100; --brand-primary-hover: #2d844e; --brand-secondary: #479FC8; --brand-secondary-hover: #3893bd; --brand-accent: #54ba4e; --brand-accent-hover: #49ac43; /* Surfaces & background */ --brand-bg: #DAE3E7; --brand-bg-alt: #f5f5f5; --brand-surface: #ffffff; --brand-header-bg: #f5f5f5; --brand-header-stripe: #778492; --brand-footer-bg: #32383e; --brand-footer-text: #a1aab4; /* Text */ --brand-text: #434343; --brand-text-strong: #49515a; --brand-text-muted: #778492; --brand-text-subtle: #999999; --brand-heading: #545e69; --brand-border: #e8e8e8; --brand-border-soft: #ccd1d6; /* Links */ --brand-link: #3AAA64; --brand-link-hover: #2d844e; /* States */ --brand-success: #3AAA64; --brand-warning: #f0ad4e; --brand-danger: #d9534f; --brand-info: #479FC8; /* Typography */ --brand-font-sans: 'Lato', arial, sans-serif; --brand-font-heading: 'Montserrat', sans-serif; --brand-font-base-size: 16px; /* ====== Override Bootstrap CSS variables (no SASS needed) ====== */ --bs-primary: var(--brand-primary); --bs-primary-rgb: var(--brand-primary-rgb); --bs-link-color: var(--brand-link); --bs-link-color-rgb: var(--brand-primary-rgb); --bs-link-hover-color: var(--brand-link-hover); --bs-body-bg: var(--brand-bg); --bs-body-color: var(--brand-text); --bs-body-font-family: var(--brand-font-sans); --bs-border-color: var(--brand-border); --bs-secondary-color: var(--brand-text-muted); --bs-tertiary-bg: var(--brand-bg-alt); } /* ====== Dark theme — toggle via [data-theme="dark"] on or ====== */ [data-theme="dark"] { --brand-bg: #17191c; --brand-bg-alt: #1e2124; --brand-surface: #1e2124; --brand-header-bg: #1e2124; --brand-header-stripe: #1e2124; --brand-footer-bg: #0f1112; --brand-footer-text: rgba(255, 255, 255, 0.7); --brand-text: rgba(255, 255, 255, 0.75); --brand-text-strong: rgba(255, 255, 255, 0.95); --brand-text-muted: rgba(255, 255, 255, 0.6); --brand-text-subtle: rgba(255, 255, 255, 0.5); --brand-heading: rgba(255, 255, 255, 0.9); --brand-border: rgba(255, 255, 255, 0.1); --brand-border-soft: rgba(255, 255, 255, 0.15); --brand-link: #53c47d; --brand-link-hover: #79d49a; --bs-body-bg: var(--brand-bg); --bs-body-color: var(--brand-text); --bs-border-color: var(--brand-border); } /* ====== Bootstrap component overrides that SASS would normally calculate ====== */ .btn-primary { background-color: var(--brand-primary); border-color: var(--brand-primary); color: #fff; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { background-color: var(--brand-primary-hover) !important; border-color: var(--brand-primary-hover) !important; color: #fff !important; box-shadow: none !important; } .btn-outline-primary { color: var(--brand-primary); border-color: var(--brand-primary); } .btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--brand-primary); border-color: var(--brand-primary); color: #fff; } .text-primary { color: var(--brand-primary) !important; } .bg-primary { background-color: var(--brand-primary) !important; } .border-primary { border-color: var(--brand-primary) !important; } a { color: var(--brand-link); text-decoration: none; transition: color .25s ease-in-out; } a:hover { color: var(--brand-link-hover); text-decoration: underline; } a:focus { text-decoration: none; } body { font-family: var(--brand-font-sans); color: var(--brand-text); background: var(--brand-bg); font-size: var(--brand-font-base-size); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--brand-font-heading); font-weight: 700; color: var(--brand-heading); }