@theme{ --color-base: rgb(0, 0, 0); --color-section: rgb(127, 127, 127); --color-main: rgb(191, 191, 191); --color-primary: rgb(255, 255, 255); --color-debug: rgb(255, 0, 0); --hover-amount: 20%; --hover-duration: .2s; --font-base: Arial; --font-debug: Monospace; }@theme inline{ --breakpoint-3xl: 1792px; --color-text: var(--color-base); --color-link: var(--color-primary); --color-link_hover: color-mix(in hsl, var(--color-primary), black var(--hover-amount)); --color-background: var(--color-main); --color-container: var(--color-section); --color-button_text: var(--color-primary); --color-button_background: var(--color-base); --color-button_background_hover: color-mix(in hsl, var(--color-base), white var(--hover-amount)); --color-input_text: var(--color-base); --color-input_background: var(--color-primary); --color-input_background_hover: color-mix(in hsl, var(--color-primary), black var(--hover-amount)); --color-input_outline: var(--color-base); --color-select_text: var(--color-base); --color-select_background: var(--color-primary); --color-select_background_hover: color-mix(in hsl, var(--color-primary), black var(--hover-amount)); --color-select_outline: var(--color-base); --color-select_border: var(--color-base); --color-mobile_burger: var(--color-primary); --color-mobile_burger_hover: color-mix(in hsl, var(--color-primary), black var(--hover-amount)); --color-mobile_filter: var(--color-primary); --color-mobile_filter_hover: color-mix(in hsl, var(--color-primary), black var(--hover-amount)); --color-mobile_overlay: var(--color-base); --color-header_background: var(--color-base); --color-page_text: var(--color-primary); --color-page_text_hover: color-mix(in hsl, var(--color-primary), black var(--hover-amount)); --color-category_text: var(--color-base); --color-category_text_hover: var(--color-base); --color-category_text_active: var(--color-primary); --color-category_background: var(--color-primary); --color-category_background_hover: color-mix(in hsl, var(--color-primary), black var(--hover-amount)); --color-category_background_active: var(--color-section); --color-product_background: var(--color-primary); --color-product_weekday: var(--color-base); --color-product_weekday_hover: color-mix(in hsl, var(--color-base), white var(--hover-amount)); --color-product_wishlist: var(--color-base); --color-product_wishlist_hover: color-mix(in hsl, var(--color-base), white var(--hover-amount)); --color-product_shop: var(--color-base); --color-product_shop_hover: color-mix(in hsl, var(--color-base), white var(--hover-amount)); --color-product_name: var(--color-base); --color-product_description: var(--color-base); --color-product_discount_price: var(--color-base); --color-product_original_price: var(--color-base); --color-product_omnibus_price: var(--color-base); --color-product_shadow: var(--color-base); --color-top_button: var(--color-section); --color-top_button_hover: color-mix(in hsl, var(--color-section), black var(--hover-amount)); --color-wishlist_header: var(--color-base); --color-footer_text: var(--color-primary); --color-footer_background: var(--color-base); --color-unpublished_background: var(--color-debug); --color-unpublished_text: var(--color-base); --font-base: var(--font-base); --font-button: var(--font-base); --font-input: var(--font-base); --font-select: var(--font-base); --font-page: var(--font-base); --font-category: var(--font-base); --font-product_weekday: var(--font-base); --font-product_shop: var(--font-base); --font-product_name: var(--font-base); --font-product_description: var(--font-base); --font-product_discount_price: var(--font-base); --font-product_original_price: var(--font-base); --font-product_omnibus_price: var(--font-base); --font-unpublished: var(--font-debug); --animate-heart-filledTW: heartAnimation .4s; --animate-heart-outlineTW: heartAnimationRemove .4s; @keyframes heartAnimation { 0%, 100% { transform: scale(1.25); } 50% { transform: scale(1.5); } } @keyframes heartAnimationRemove { 0%, 100% { transform: scale(1.25); } 50% { transform: scale(1.1); } } }