/* ── Variables globales — paleta sepia/vintage ─────────────── */ :root { /* Colores principales */ --color-primary: #8B5E3C; --color-primary-d: #6b4428; --color-secondary: #D4A96A; --color-accent: #c27a3a; /* Fondos */ --bg-page: #fdf6ec; --bg-card: #fffbf4; --bg-dark: #2c1e0f; /* Texto */ --text-main: #3d2b1f; --text-muted: #7a5c3e; --text-light: #b89a74; --text-on-dark: #f5e9d5; /* Bordes */ --border-color: #e2c99a; --border-light: #f0dfc0; /* Tipografía */ --font-serif: 'Georgia', 'Times New Roman', serif; --font-sans: 'Segoe UI', system-ui, sans-serif; /* Sombras */ --shadow-sm: 0 1px 3px rgba(100, 60, 20, .12); --shadow-md: 0 4px 12px rgba(100, 60, 20, .18); --shadow-lg: 0 8px 32px rgba(100, 60, 20, .22); /* Radios */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* Transiciones */ --transition: 0.25s ease; } /* Modo oscuro (opcional, activado por clase .dark en ) */ body.dark { --bg-page: #1a1108; --bg-card: #261905; --text-main: #f0e0c0; --text-muted: #c8a878; --border-color: #4a3018; --border-light: #3a2010; }