/* =========================================================================== theme.css - Tokens de color. Identidad de marca: antracita + oro. El tema se fija en (script anti-FOUC en head). =========================================================================== */ :root { /* Marca (constantes en ambos temas) */ --brand-ink: #23272F; /* antracita del logo */ --brand-gold: #C8963E; /* oro del logo */ --brand-gold-2: #B07E2C; /* oro oscuro (hover) */ /* Semanticos - TEMA CLARO */ --bg: #FFFFFF; --bg-alt: #F5F3EF; /* seccion alterna, calido neutro */ --surface: #FFFFFF; --text: #23272F; --text-muted: #6B7280; --muted: #6B7280; /* alias usado por el panel */ --accent: #C8963E; --accent-strong: #B07E2C; --border: #E4E2DD; --shadow: 0 1px 2px rgba(35, 39, 47, .06), 0 8px 24px rgba(35, 39, 47, .06); /* Footer: siempre oscuro en ambos temas (ancla de marca) */ --footer-bg: #1B1E24; --footer-text: #C9CDD4; --footer-head: #FFFFFF; } html[data-theme="dark"] { --bg: #16181D; --bg-alt: #1E2127; --surface: #1E2127; --text: #EDEEF0; --text-muted: #9AA1AC; --muted: #9AA1AC; --accent: #D6A652; --accent-strong: #E0B876; --border: #2E333C; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35); --footer-bg: #101216; --footer-text: #A9AEB6; --footer-head: #FFFFFF; } @media (prefers-reduced-motion: no-preference) { html { color-scheme: light dark; } }