/* Tokens de marca — Biorem (brandbook) */ :root { /* Base */ --color-blanco: #FFFFFF; --color-neutro-1: #F2EDD9; --color-neutro-2: #F0E8D9; --color-neutro-3: #D6D6D1; --color-neutro-4: #C2C4AB; /* Corporativos */ --color-primario: #265233; /* verde oscuro */ --color-acento: #B2BF4A; /* verde lima */ /* Naturaleza — verdes */ --verde-1: #597538; --verde-2: #94A861; --verde-3: #A3AB85; --verde-4: #ABC9B2; --verde-5: #666E4A; /* Naturaleza — tierra */ --tierra-1: #916638; --tierra-2: #A68A63; --tierra-3: #7D4F24; --tierra-4: #572E0D; --tierra-5: #C2B5A3; /* Naturaleza — azules */ --azul-1: #5291B5; --azul-2: #214561; --azul-3: #00387D; --azul-4: #009ED1; --azul-5: #99E8F5; --lima-claro: #EDF2A6; /* Color por pilar */ --pilar-salud: var(--color-primario); --pilar-felicidad: var(--color-acento); --pilar-conexion: var(--azul-1); --pilar-suenos: var(--verde-2); --pilar-mas-conectados: var(--azul-2); --pilar-beneficios: var(--tierra-1); /* Tipografía */ --fuente-titulo: 'Archivo Black', 'Arial Black', sans-serif; --fuente-cuerpo: 'Inter', 'Segoe UI', sans-serif; /* Layout */ --radio-tarjeta: 16px; --sombra-tarjeta: 0 2px 10px rgba(38, 82, 51, 0.10); --sombra-tarjeta-hover: 0 8px 24px rgba(38, 82, 51, 0.16); --ancho-maximo: 1200px; --texto-principal: #23291F; --texto-secundario: #5A5F52; /* ---------- Superficies semánticas (cambian con el tema) ---------- */ --superficie: var(--color-blanco); --superficie-alterna: var(--color-neutro-1); --superficie-alterna-2: var(--color-neutro-2); --superficie-tarjeta: var(--color-blanco); --borde: var(--color-neutro-3); --chip-gris: var(--color-neutro-3); --texto: var(--texto-principal); --color-titulo: var(--color-primario); --alerta-error-bg: #FBE9E7; --alerta-error-texto: #7D4F24; --alerta-exito-bg: var(--lima-claro); --alerta-exito-texto: var(--color-primario); } /* ---------- Modo oscuro ---------- */ /* Se activa automáticamente según preferencia del sistema... */ @media (prefers-color-scheme: dark) { :root { --superficie: #12181A; --superficie-alterna: #1B2420; --superficie-alterna-2: #171F1C; --superficie-tarjeta: #1E2622; --borde: #33403A; --chip-gris: #2B3530; --texto: #E7ECE7; --texto-secundario: #9FAAA2; --color-titulo: #A9CDB0; --sombra-tarjeta: 0 2px 10px rgba(0, 0, 0, 0.45); --sombra-tarjeta-hover: 0 10px 26px rgba(0, 0, 0, 0.6); --alerta-error-bg: #3A2420; --alerta-error-texto: #E3A97B; --alerta-exito-bg: #223226; --alerta-exito-texto: #B9E08C; } } /* ...y siempre puede forzarse manualmente con el botón de tema (guarda la preferencia en localStorage vía data-theme en ). */ :root[data-theme="light"] { --superficie: var(--color-blanco); --superficie-alterna: var(--color-neutro-1); --superficie-alterna-2: var(--color-neutro-2); --superficie-tarjeta: var(--color-blanco); --borde: var(--color-neutro-3); --chip-gris: var(--color-neutro-3); --texto: var(--texto-principal); --texto-secundario: #5A5F52; --color-titulo: var(--color-primario); --sombra-tarjeta: 0 2px 10px rgba(38, 82, 51, 0.10); --sombra-tarjeta-hover: 0 8px 24px rgba(38, 82, 51, 0.16); --alerta-error-bg: #FBE9E7; --alerta-error-texto: #7D4F24; --alerta-exito-bg: var(--lima-claro); --alerta-exito-texto: var(--color-primario); } :root[data-theme="dark"] { --superficie: #12181A; --superficie-alterna: #1B2420; --superficie-alterna-2: #171F1C; --superficie-tarjeta: #1E2622; --borde: #33403A; --chip-gris: #2B3530; --texto: #E7ECE7; --texto-secundario: #9FAAA2; --color-titulo: #A9CDB0; --sombra-tarjeta: 0 2px 10px rgba(0, 0, 0, 0.45); --sombra-tarjeta-hover: 0 10px 26px rgba(0, 0, 0, 0.6); --alerta-error-bg: #3A2420; --alerta-error-texto: #E3A97B; --alerta-exito-bg: #223226; --alerta-exito-texto: #B9E08C; }