/* ============================================================ VARIABLES.CSS Tokens de diseño base. Las paletas se sobreescriben en tiempo real desde JS (ver card.js -> applyPalette()) según los datos guardados en Firestore para cada save-the-date. ============================================================ */ :root { /* ---- Paleta por defecto: Crema + Dorado ---- */ --color-bg-1: #fffef9; --color-bg-2: #f7ecd6; --color-bg-3: #fffdf8; --color-cream: #fffdf8; --color-cream-warm: #fbf3e4; --color-cream-deep: #f3e8d2; --color-accent: #c9a15c; --color-accent-light: #e6c98a; --color-accent-deep: #8a6e3d; --color-accent-shadow: #6e5426; --color-ink: #3a3530; --color-ink-soft: #5c5346; --color-paper-line: #e7ddc7; /* ---- Tipografía por defecto ---- */ --font-display: 'Parisienne', cursive; --font-serif: 'Cormorant Garamond', serif; --font-caps: 'Cormorant SC', serif; --font-body: 'Jost', sans-serif; /* ---- Layout ---- */ --radius-sm: 3px; --radius-md: 4px; --shadow-soft: 0 18px 40px -14px rgba(138, 110, 61, 0.35); --shadow-deep: 0 10px 26px -10px rgba(138, 110, 61, 0.4); } /* ============================================================ PALETAS PREDEFINIDAS Se activan añadiendo la clase correspondiente al , ej: El admin permite elegir una de estas o personalizar a mano. ============================================================ */ .palette-crema-dorado { --color-bg-1: #fffef9; --color-bg-2: #f7ecd6; --color-bg-3: #fffdf8; --color-cream: #fffdf8; --color-cream-warm: #fbf3e4; --color-cream-deep: #f3e8d2; --color-accent: #c9a15c; --color-accent-light: #e6c98a; --color-accent-deep: #8a6e3d; --color-accent-shadow: #6e5426; --color-ink: #3a3530; --color-ink-soft: #5c5346; --color-paper-line: #e7ddc7; } .palette-verde-salvia { --color-bg-1: #fbfcf9; --color-bg-2: #e7ede1; --color-bg-3: #f6f8f3; --color-cream: #f8faf6; --color-cream-warm: #eef2e8; --color-cream-deep: #dfe6d6; --color-accent: #96a67e; --color-accent-light: #b9c6a5; --color-accent-deep: #6b7a56; --color-accent-shadow: #4f5c3d; --color-ink: #3a3d34; --color-ink-soft: #5c6152; --color-paper-line: #d8e0cb; } .palette-burgundy-dorado { --color-bg-1: #fdf8f6; --color-bg-2: #ecd9d5; --color-bg-3: #fbf2f0; --color-cream: #fdf8f6; --color-cream-warm: #f6e8e5; --color-cream-deep: #edd5cf; --color-accent: #a8653f; --color-accent-light: #c98f68; --color-accent-deep: #6e2c2c; --color-accent-shadow: #4e1f1f; --color-ink: #3a2b28; --color-ink-soft: #5c4842; --color-paper-line: #e3c4bb; } .palette-azul-clasico { --color-bg-1: #f7f9fc; --color-bg-2: #dde6f0; --color-bg-3: #f2f6fa; --color-cream: #f7f9fc; --color-cream-warm: #eaf0f7; --color-cream-deep: #d7e2ee; --color-accent: #5b7ea3; --color-accent-light: #8fabc7; --color-accent-deep: #38536e; --color-accent-shadow: #263b4f; --color-ink: #2b3440; --color-ink-soft: #4a5566; --color-paper-line: #c9d7e6; } .palette-rosa-palo { --color-bg-1: #fdf9f8; --color-bg-2: #f2e0dd; --color-bg-3: #fbf3f1; --color-cream: #fdf9f8; --color-cream-warm: #f7ebe8; --color-cream-deep: #eed9d5; --color-accent: #c48d85; --color-accent-light: #dcb2ac; --color-accent-deep: #9a5b52; --color-accent-shadow: #6f3d36; --color-ink: #3d302d; --color-ink-soft: #5e4c47; --color-paper-line: #e6cfc9; } .palette-negro-dorado { --color-bg-1: #1b1a17; --color-bg-2: #2a2723; --color-bg-3: #201f1c; --color-cream: #232220; --color-cream-warm: #2c2a26; --color-cream-deep: #363330; --color-accent: #d4af6a; --color-accent-light: #e8cd97; --color-accent-deep: #b9924f; --color-accent-shadow: #8a6e3d; --color-ink: #f3ede0; --color-ink-soft: #d8cfba; --color-paper-line: #45413a; }