/* ============================================================================ variables.css — Presets visuales. Cada bloque define EXACTAMENTE los mismos nombres de variable. El preset se activa con [data-style="..."] en (lo pone config.js). styles.css sólo usa estas variables → cambiar de preset no toca el layout. ============================================================================ */ /* ---- Tipografía self-hosted: Spectral (serif) --------------------------- */ @font-face { font-family: "Spectral"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/spectral-400.woff2") format("woff2"); } @font-face { font-family: "Spectral"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/spectral-500.woff2") format("woff2"); } @font-face { font-family: "Spectral"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/spectral-600.woff2") format("woff2"); } @font-face { font-family: "Spectral"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/spectral-700.woff2") format("woff2"); } /* ---------------------------------------------------------------------------- PALETA DE MARCA (preset rustic, activo en la demo): Cream #F5F1E8 fondos Dark Brown #3B2A1E texto y titulares Apple Green #6A8F3A acento / botones Amber #C89B3C highlight (precios, "hoy") ---------------------------------------------------------------------------- */ /* ---- Valores por defecto (= rustic) para que nunca falte una variable ---- */ :root { --bg: #f5f1e8; --bg-alt: #ece5d5; --surface: #fffdf8; --text: #3b2a1e; --text-muted: #7c6a58; --heading: #3b2a1e; --accent: #6a8f3a; --accent-strong: #3b2a1e; --highlight: #c89b3c; --on-accent: #f5f1e8; --border: #e0d6c2; --today: #f2e8cd; --font-heading: "Spectral", Georgia, "Times New Roman", serif; --font-body: "Spectral", Georgia, "Times New Roman", serif; --radius: 6px; --radius-lg: 10px; --shadow: 0 6px 20px rgba(59, 42, 30, 0.12); --page-texture: radial-gradient(circle at 20% 15%, rgba(106, 143, 58, 0.06) 0, transparent 45%), radial-gradient(circle at 85% 60%, rgba(200, 155, 60, 0.07) 0, transparent 40%); } /* ---- RUSTIC: cream + marrón, acento verde manzana, highlight ámbar -------- */ :root[data-style="rustic"] { --bg: #f5f1e8; --bg-alt: #ece5d5; --surface: #fffdf8; --text: #3b2a1e; --text-muted: #7c6a58; --heading: #3b2a1e; --accent: #6a8f3a; --accent-strong: #3b2a1e; --highlight: #c89b3c; --on-accent: #f5f1e8; --border: #e0d6c2; --today: #f2e8cd; --font-heading: "Spectral", Georgia, "Times New Roman", serif; --font-body: "Spectral", Georgia, "Times New Roman", serif; --radius: 6px; --radius-lg: 10px; --shadow: 0 6px 20px rgba(59, 42, 30, 0.12); --page-texture: radial-gradient(circle at 20% 15%, rgba(106, 143, 58, 0.06) 0, transparent 45%), radial-gradient(circle at 85% 60%, rgba(200, 155, 60, 0.07) 0, transparent 40%); } /* ---- MODERN: paleta oscura neutra, sans-serif, alto contraste, sobrio ---- */ :root[data-style="modern"] { --bg: #14151a; --bg-alt: #1d1f27; --surface: #23262f; --text: #e8e9ec; --text-muted: #9aa0ab; --heading: #ffffff; --accent: #d8a24a; --accent-strong: #e7b662; --highlight: #e7b662; --on-accent: #14151a; --border: #333742; --today: #2c2f39; --font-heading: "Spectral", Georgia, "Times New Roman", serif; --font-body: "Spectral", Georgia, "Times New Roman", serif; --radius: 0px; --radius-lg: 0px; --shadow: 0 10px 30px rgba(0, 0, 0, 0.5); --page-texture: none; } /* ---- COASTAL: azules y arenas, más ligero y aireado, esquinas redondeadas - */ :root[data-style="coastal"] { --bg: #f5f9fb; --bg-alt: #e6f0f4; --surface: #ffffff; --text: #1f3a45; --text-muted: #5f7d88; --heading: #14607a; --accent: #1b8aa8; --accent-strong: #146c85; --highlight: #e0913f; --on-accent: #ffffff; --border: #cfe3ea; --today: #d6ecf3; --font-heading: "Spectral", Georgia, "Times New Roman", serif; --font-body: "Spectral", Georgia, "Times New Roman", serif; --radius: 14px; --radius-lg: 22px; --shadow: 0 8px 26px rgba(27, 138, 168, 0.15); --page-texture: radial-gradient(circle at 15% 10%, rgba(27, 138, 168, 0.06) 0, transparent 45%), radial-gradient(circle at 90% 70%, rgba(20, 96, 122, 0.05) 0, transparent 40%); }