/* Lazy Vacations — SKINS ──────────────────────────────────────────────────────────────────────── A "skin" is a look: colors + corner radii + fonts. It is applied by setting a single attribute high in the tree: …or any wrapper:
Every skin only *overrides token values* — it never touches component code. Components read base tokens (--lv-green, --lv-coral, --lv-radius-*, --lv-font-*), and the semantic aliases in colors.css resolve through them, so re-skinning is automatic. To add a skin: copy a block, rename the [data-skin] value, change the values. ──────────────────────────────────────────────────────────────────────── */ /* ============================ COASTAL (base) ============================ */ /* Matches the :root defaults; declared explicitly so it's switch-to-able. */ [data-skin="coastal"] { --lv-green: #00aca6; --lv-green-deep: #329794; --lv-green-light: #98e8e6; --lv-green-haze: #ebfffe; --lv-green-ink: #005868; --lv-coral: #ff6f5e; --lv-coral-deep: #e8503c; --lv-coral-haze: #fff1ee; --lv-ink: #333333; --lv-text: #4d4d4d; --lv-grey: #979797; --lv-grey-soft: #adadad; --lv-smoke: #ececec; --lv-link: #1f6fff; --lv-link-hover: #0b4fc9; --lv-radius-xs: 3px; --lv-radius-sm: 4px; --lv-radius-md: 5px; --lv-radius-lg: 8px; --lv-radius-pill: 16px; --lv-font-display: 'Source Sans 3','Source Sans Pro',system-ui,sans-serif; --lv-font-body: 'Source Sans 3','Source Sans Pro',system-ui,sans-serif; --lv-font-label: 'Lato','Open Sans',system-ui,sans-serif; } /* ============================ WARM CABIN ============================ */ /* Forest green + amber, sharp corners, slab-serif display. */ [data-skin="cabin"] { --lv-green: #356b4d; --lv-green-deep: #244e38; --lv-green-light: #cfe3d3; --lv-green-haze: #eef3ee; --lv-green-ink: #1f3d2c; --lv-coral: #d98a2b; --lv-coral-deep: #b86f1c; --lv-coral-haze: #fbf1e2; --lv-ink: #2b2a26; --lv-text: #4a4844; --lv-grey: #8a8780; --lv-grey-soft: #a8a59d; --lv-smoke: #ece8e1; --lv-link: #356b4d; --lv-link-hover: #244e38; --lv-radius-xs: 2px; --lv-radius-sm: 2px; --lv-radius-md: 2px; --lv-radius-lg: 3px; --lv-radius-pill: 4px; --lv-font-display: 'Zilla Slab', Georgia, serif; --lv-font-body: 'Source Sans 3', system-ui, sans-serif; --lv-font-label: 'Oswald', 'Lato', system-ui, sans-serif; } /* ============================ MODERN MINIMAL ============================ */ /* Near-black + a single hot accent, square corners, grotesk type. */ [data-skin="minimal"] { --lv-green: #141414; --lv-green-deep: #000000; --lv-green-light: #e6e6e6; --lv-green-haze: #f5f5f5; --lv-green-ink: #111111; --lv-coral: #ff4d2e; --lv-coral-deep: #e23a1c; --lv-coral-haze: #ffece8; --lv-ink: #0f0f0f; --lv-text: #444444; --lv-grey: #8a8a8a; --lv-grey-soft: #b0b0b0; --lv-smoke: #efefef; --lv-link: #141414; --lv-link-hover: #000000; --lv-radius-xs: 0px; --lv-radius-sm: 0px; --lv-radius-md: 0px; --lv-radius-lg: 0px; --lv-radius-pill: 0px; --lv-font-display: 'Space Grotesk', system-ui, sans-serif; --lv-font-body: 'Archivo', system-ui, sans-serif; --lv-font-label: 'Space Grotesk', system-ui, sans-serif; } /* ============================ PLAYFUL ============================ */ /* Bright coral-pink + sunny yellow, big pill corners, rounded sans. */ [data-skin="playful"] { --lv-green: #ff5a6e; --lv-green-deep: #e63e57; --lv-green-light: #ffd6dc; --lv-green-haze: #fff0f2; --lv-green-ink: #b3324a; --lv-coral: #ffb02e; --lv-coral-deep: #f5990a; --lv-coral-haze: #fff6e3; --lv-ink: #2b2440; --lv-text: #5b5470; --lv-grey: #9a93ad; --lv-grey-soft: #b7b1c6; --lv-smoke: #f0ecf6; --lv-link: #ff5a6e; --lv-link-hover: #e63e57; --lv-radius-xs: 10px; --lv-radius-sm: 14px; --lv-radius-md: 16px; --lv-radius-lg: 20px; --lv-radius-pill: 999px; --lv-font-display: 'Fredoka', system-ui, sans-serif; --lv-font-body: 'Nunito', system-ui, sans-serif; --lv-font-label: 'Nunito', system-ui, sans-serif; } /* ============================ LUXE ============================ */ /* Deep navy + gold, soft corners, serif display over a geometric sans. */ [data-skin="luxe"] { --lv-green: #1c2b46; --lv-green-deep: #11203a; --lv-green-light: #c9d2e0; --lv-green-haze: #f4f1ea; --lv-green-ink: #1c2b46; --lv-coral: #c2a14d; --lv-coral-deep: #a3823a; --lv-coral-haze: #f7f0dd; --lv-ink: #1b2438; --lv-text: #4a5266; --lv-grey: #8b91a1; --lv-grey-soft: #aab0bd; --lv-smoke: #eceae3; --lv-link: #c2a14d; --lv-link-hover: #a3823a; --lv-radius-xs: 4px; --lv-radius-sm: 6px; --lv-radius-md: 8px; --lv-radius-lg: 10px; --lv-radius-pill: 16px; --lv-font-display: 'Cormorant Garamond', Georgia, serif; --lv-font-body: 'Jost', system-ui, sans-serif; --lv-font-label: 'Jost', system-ui, sans-serif; }