/* * design-system.css — design tokens (CSS custom properties) for the Boomba site. * * Extracted from the original theme :root scope. All tokens are vendor-neutral: * - --spacing-* : spacing scale * - --color-* : color tokens (RGB triplets, used with rgb(var(--token))) * - --color-button-*, --color-base-*, --color-pr-* : component slots * - --hdt-btn-* : button surface tokens (HDT = the original Halo theme prefix, * left as-is because hundreds of theme CSS rules reference these names — * renaming would require a parallel sweep across cdn/shop/t/175/assets/*.css) * - --font-*, --text-* : typography scale * * Loaded as the FIRST stylesheet in so all later CSS (theme + custom) * inherits these tokens. See scripts/inject-shopify-shim.mjs + * scripts/strip-shopify.mjs for injection. */ :root { --aspect-ratiocus1: 0.716; --scrollbar-w: 0px; /* Spacing */ --spacing-0-2: 0.2rem; /* 2px */ --spacing-0-4: 0.4rem; /* 4px */ --spacing-0-6: 0.6rem; /* 6px */ --spacing-0-8: 0.8rem; /* 8px */ --spacing-1: 1rem; /* 10px */ --spacing-1-2: 1.2rem; /* 12px */ --spacing-1-4: 1.4rem; /* 14px */ --spacing-1-6: 1.6rem; /* 16px */ --spacing-1-8: 1.8rem; /* 18px */ --spacing-2: 2rem; /* 20px */ --spacing-2-2: 2.2rem; /* 22px */ --spacing-2-4: 2.4rem; /* 24px */ --spacing-2-6: 2.6rem; /* 26px */ --spacing-2-8: 2.8rem; /* 28px */ --spacing-3: 3rem; /* 30px */ --spacing-3-2: 3.2rem; /* 32px */ --spacing-3-4: 3.4rem; /* 34px */ --spacing-3-6: 3.6rem; /* 36px */ --spacing-3-8: 3.8rem; /* 38px */ --spacing-4: 4rem; /* 40px */ --spacing-4-2: 4.2rem; /* 42px */ --spacing-4-4: 4.4rem; /* 44px */ --spacing-4-8: 4.8rem; /* 48px */ --spacing-5: 5rem; /* 50px */ --spacing-5-6: 5.6rem; /* 56px */ --spacing-6: 6rem; /* 60px */ --spacing-6-4: 6.4rem; /* 64px */ --spacing-7: 7rem; /* 70px */ --spacing-7-2: 7.2rem; /* 72px */ --spacing-8: 8rem; /* 80px */ --spacing-9: 9rem; /* 90px */ --spacing-10: 10rem; /* 100px */ /* Colors */ --color-base-background: 254 251 251; --color-base-text: 34 34 34; --color-focus: 213 58 61; --payment-terms-background-color: rgb(254 251 251); /* Product badge colors */ --color-on-sale-badge-background: 252 87 50; --color-on-sale-badge-text: 255 255 255; --color-new-badge-background: 244 215 215; --color-new-badge-text: 0 0 0; --color-sold-out-badge-background: 242 242 242; --color-sold-out-badge-text: 0 0 0; --color-pre-order-badge-background: 85 166 83; --color-pre-order-badge-text: 255 255 255; --color-custom-badge-background: 131 183 53; --color-custom-badge-text: 255 255 255; /* Notices colors */ --color-tooltip-background: 35 35 35; --color-tooltip-text: 255 255 255; --color-success-background: 232 240 233; --color-success-text: 66 132 69; --color-warning-background: 251 246 234; --color-warning-text: 224 178 82; --color-error-background: 253 224 228; --color-error-text: 235 0 27;--f_family_1: "Playfair Display", serif;--f_family_2: "Archivo", sans-serif;--f_family_3: "Roboto Condensed", sans-serif;--f_family: var(--f_family_2);/* --bs-font-sans-serif: var(--f_family); */ --font-body-family: var(--f_family); --font-body-weight: 400; --font-body-weight-bold: 700; --font-heading-family: var(--f_family_1); --font-heading-weight: 400; --font-body-line-height: 1.6; --font-body-spacing: 0.0em; --font-heading-scale: 1.0; --font-heading-line-height: 1.2; --font-heading-spacing: 0.0em; --button-line-height: 1.2; --h0-size: 7.4rem; --h1-size: 6.4rem; --h2-size: 5.4rem; --h3-size: 4.2rem; --h4-size: 3.4rem; --h5-size: 2.8rem; --h6-size: 1.8rem; --h0-size-mb: 2.8rem; --h1-size-mb: 2.8rem; --h2-size-mb: 2.5rem; --h3-size-mb: 2.4rem; --h4-size-mb: 2.2rem; --h5-size-mb: 2.0rem; --h6-size-mb: 1.6rem; /* Font sizes */ --text-xs: 1.0rem; --text-sm: 1.2rem; --text-base: 1.4rem; --text-lg: 1.6rem; --text-xl: 1.8rem; --text-2xl: 2.0rem; --text-4xl: 2.2rem; --text-6xl: 2.4rem; --text-8xl: 2.6rem; --text-10xl: 2.8rem; --text-12xl: 3.0rem; /* Font Weight */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; --font-black: 900; --spacing-x: 15px; --spacing-y: 15px; --container-max-width: 144rem; --container-max-width-padding-lg: 154rem; --container-max-width-padding-md: 150rem; --container-width-margin: 0rem; --spacing-sections-desktop: 0px; --spacing-sections-mobile: 0px; /* Border Radius */ --radius-2xs: 0.0rem; --radius-xs: 0.0rem; --radius-sm: 0.0rem; --radius: 0.0rem; --radius-lg: 0.0rem; --radius-full: 9999px; --radius-button: 6.0rem; --radius-input: 0.3rem; --radius-product-card: 0.0rem; --radius-product-media: 1.0rem; --radius-collection-card: 1.0rem; --radius-blog-card: 1.0rem; --padding-block-input: var(--spacing-0-6); --padding-inline-input: var(--spacing-1); --height-input: var(--spacing-4-2); --thickness-btn: 0.1rem; --cursor-zoom-in-icon: url(cdn/shop/t/175/assets/cursor-zoom-in%EF%B9%96v=88807523373575012131763965586.svg); --cursor-close-svg-url: url(cdn/shop/t/175/assets/cursor-close%EF%B9%96v=47636334999695629861763965586.svg); /* RTL support */ --value-logical-flip: 1; --value-origin-start: left; --value-origin-end: right;} /* Color schemes */ [color-scheme="scheme-1"] { --color-background: 254 251 251; --gradient-background: #fefbfb; --color-background2: 242 242 242; --color-foreground: 0 0 0; --color-foreground2: 84 84 84; --color-accent: 219 18 21; --color-secondary: 191 191 191; --color-tertiary: 128 128 128; --color-button: 0 0 0; --color-button-text: 255 255 255; --color-button-border: 0 0 0; --color-secondary-button: 254 251 251; --color-secondary-button-text: 0 0 0; --hdt-btn-secondary-color: 76 76 76; --hdt-btn-secondary-bg: 191 191 191; --hdt-btn-tertiary-color: 51 51 51; --hdt-btn-tertiary-bg: 128 128 128; --color-secondary-brightness: 255 255 255; --color-link: 0 0 0; --color-accent: 219 18 21; --color-line-border: 235 235 235; --color-overlay: 0 0 0; --payment-terms-background-color: rgb(254 251 251); /* Product colors */ --color-pr-price: 135 135 135; --color-pr-sale-price: 34 34 34; --color-pr-text: 0 0 0; --color-pr-rating: ; /* Input colors */ --color-input-primary: 255 255 255; --color-input-secondary: 144 144 144; } [color-scheme="scheme-2"] { --color-background: 255 255 255; --gradient-background: #ffffff; --color-background2: 255 255 255; --color-foreground: 0 0 0; --color-foreground2: 84 84 84; --color-accent: 219 18 21; --color-secondary: 64 64 64; --color-tertiary: 128 128 128; --color-button: 255 255 255; --color-button-text: 0 0 0; --color-button-border: 235 235 235; --color-secondary-button: 255 255 255; --color-secondary-button-text: 0 0 0; --hdt-btn-secondary-color: 217 217 217; --hdt-btn-secondary-bg: 64 64 64; --hdt-btn-tertiary-color: 230 230 230; --hdt-btn-tertiary-bg: 128 128 128; --color-secondary-brightness: 255 255 255; --color-link: 0 0 0; --color-accent: 219 18 21; --color-line-border: 238 238 238; --color-overlay: 0 0 0; --payment-terms-background-color: rgb(255 255 255); /* Product colors */ --color-pr-price: 0 0 0; --color-pr-sale-price: 219 18 21; --color-pr-text: 0 0 0; --color-pr-rating: ; /* Input colors */ --color-input-primary: 255 255 255; --color-input-secondary: 0 0 0; } [color-scheme="scheme-3"] { --color-background: 255 255 255; --gradient-background: #ffffff; --color-background2: 255 255 255; --color-foreground: 0 0 0; --color-foreground2: 0 0 0; --color-accent: 219 18 21; --color-secondary: 64 64 64; --color-tertiary: 128 128 128; --color-button: 242 242 242; --color-button-text: 0 0 0; --color-button-border: 242 242 242; --color-secondary-button: 255 255 255; --color-secondary-button-text: 0 0 0; --hdt-btn-secondary-color: 217 217 217; --hdt-btn-secondary-bg: 64 64 64; --hdt-btn-tertiary-color: 230 230 230; --hdt-btn-tertiary-bg: 128 128 128; --color-secondary-brightness: 255 255 255; --color-link: 0 0 0; --color-accent: 219 18 21; --color-line-border: 238 238 238; --color-overlay: 0 0 0; --payment-terms-background-color: rgb(255 255 255); /* Product colors */ --color-pr-price: 0 0 0; --color-pr-sale-price: 219 18 21; --color-pr-text: 0 0 0; --color-pr-rating: ; /* Input colors */ --color-input-primary: 255 255 255; --color-input-secondary: 0 0 0; } [color-scheme="scheme-4"] { --color-background: 254 251 251; --gradient-background: #fefbfb; --color-background2: 255 255 255; --color-foreground: 34 34 34; --color-foreground2: 34 34 34; --color-accent: 219 18 21; --color-secondary: 191 191 191; --color-tertiary: 128 128 128; --color-button: 0 0 0; --color-button-text: 255 255 255; --color-button-border: 0 0 0; --color-secondary-button: 254 251 251; --color-secondary-button-text: 0 0 0; --hdt-btn-secondary-color: 76 76 76; --hdt-btn-secondary-bg: 191 191 191; --hdt-btn-tertiary-color: 51 51 51; --hdt-btn-tertiary-bg: 128 128 128; --color-secondary-brightness: 255 255 255; --color-link: 0 0 0; --color-accent: 219 18 21; --color-line-border: 235 235 235; --color-overlay: 0 0 0; --payment-terms-background-color: rgb(254 251 251); /* Product colors */ --color-pr-price: 0 0 0; --color-pr-sale-price: 219 18 21; --color-pr-text: 0 0 0; --color-pr-rating: ; /* Input colors */ --color-input-primary: 255 255 255; --color-input-secondary: 144 144 144; } [color-scheme="scheme-5"] { --color-background: 252 243 243; --gradient-background: #fcf3f3; --color-background2: 251 247 240; --color-foreground: 34 34 34; --color-foreground2: 34 34 34; --color-accent: 219 18 21; --color-secondary: 191 191 191; --color-tertiary: 128 128 128; --color-button: 34 34 34; --color-button-text: 255 255 255; --color-button-border: 34 34 34; --color-secondary-button: 252 243 243; --color-secondary-button-text: 0 0 0; --hdt-btn-secondary-color: 76 76 76; --hdt-btn-secondary-bg: 191 191 191; --hdt-btn-tertiary-color: 51 51 51; --hdt-btn-tertiary-bg: 128 128 128; --color-secondary-brightness: 255 255 255; --color-link: 0 0 0; --color-accent: 219 18 21; --color-line-border: 0 0 0; --color-overlay: 0 0 0; --payment-terms-background-color: rgb(252 243 243); /* Product colors */ --color-pr-price: 0 0 0; --color-pr-sale-price: 219 18 21; --color-pr-text: 0 0 0; --color-pr-rating: ; /* Input colors */ --color-input-primary: 255 255 255; --color-input-secondary: 104 104 104; } [color-scheme="scheme-67a7ca9f-3333-4245-b79f-2e9849d7e615"] { --color-background: 34 34 34; --gradient-background: #222222; --color-background2: 68 68 68; --color-foreground: 255 255 255; --color-foreground2: 231 231 231; --color-accent: 219 18 21; --color-secondary: 64 64 64; --color-tertiary: 128 128 128; --color-button: 255 255 255; --color-button-text: 0 0 0; --color-button-border: 255 255 255; --color-secondary-button: 34 34 34; --color-secondary-button-text: 255 255 255; --hdt-btn-secondary-color: 217 217 217; --hdt-btn-secondary-bg: 64 64 64; --hdt-btn-tertiary-color: 230 230 230; --hdt-btn-tertiary-bg: 128 128 128; --color-secondary-brightness: 0 0 0; --color-link: 255 255 255; --color-accent: 219 18 21; --color-line-border: 68 68 68; --color-overlay: 0 0 0; --payment-terms-background-color: rgb(34 34 34); /* Product colors */ --color-pr-price: 255 255 255; --color-pr-sale-price: 219 18 21; --color-pr-text: 255 255 255; --color-pr-rating: ; /* Input colors */ --color-input-primary: 255 255 255; --color-input-secondary: 144 144 144; } [color-scheme="scheme-4f7d5921-8567-40ac-8211-ef87792674d6"] { --color-background: 252 255 178; --gradient-background: #fcffb2; --color-background2: 255 255 255; --color-foreground: 0 0 0; --color-foreground2: 84 84 84; --color-accent: 219 18 21; --color-secondary: 191 191 191; --color-tertiary: 128 128 128; --color-button: 0 0 0; --color-button-text: 255 255 255; --color-button-border: 0 0 0; --color-secondary-button: 252 255 178; --color-secondary-button-text: 0 0 0; --hdt-btn-secondary-color: 76 76 76; --hdt-btn-secondary-bg: 191 191 191; --hdt-btn-tertiary-color: 51 51 51; --hdt-btn-tertiary-bg: 128 128 128; --color-secondary-brightness: 255 255 255; --color-link: 0 0 0; --color-accent: 219 18 21; --color-line-border: 238 238 238; --color-overlay: 255 255 255; --payment-terms-background-color: rgb(252 255 178); /* Product colors */ --color-pr-price: 0 0 0; --color-pr-sale-price: 219 18 21; --color-pr-text: 0 0 0; --color-pr-rating: ; /* Input colors */ --color-input-primary: 255 255 255; --color-input-secondary: 144 144 144; } [color-scheme="scheme-4f7d5921-8567-40ac-8211-ef87792674d3"] { --color-background: 255 255 255; --gradient-background: #ffffff; --color-background2: 242 242 242; --color-foreground: 0 0 0; --color-foreground2: 255 255 255; --color-accent: 219 18 21; --color-secondary: 191 191 191; --color-tertiary: 128 128 128; --color-button: 219 18 21; --color-button-text: 255 255 255; --color-button-border: 219 18 21; --color-secondary-button: 255 255 255; --color-secondary-button-text: 0 0 0; --hdt-btn-secondary-color: 76 76 76; --hdt-btn-secondary-bg: 191 191 191; --hdt-btn-tertiary-color: 51 51 51; --hdt-btn-tertiary-bg: 128 128 128; --color-secondary-brightness: 255 255 255; --color-link: 0 0 0; --color-accent: 219 18 21; --color-line-border: 235 235 235; --color-overlay: 0 0 0; --payment-terms-background-color: rgb(255 255 255); /* Product colors */ --color-pr-price: 0 0 0; --color-pr-sale-price: 219 18 21; --color-pr-text: 0 0 0; --color-pr-rating: ; /* Input colors */ --color-input-primary: 255 255 255; --color-input-secondary: 144 144 144; } [color-scheme="scheme-d3d44db8-3bcf-499e-a2ed-d652eaa913f1"] { --color-background: 190 231 183; --gradient-background: #bee7b7; --color-background2: 242 242 242; --color-foreground: 0 0 0; --color-foreground2: 84 84 84; --color-accent: 219 18 21; --color-secondary: 191 191 191; --color-tertiary: 128 128 128; --color-button: 0 0 0; --color-button-text: 255 255 255; --color-button-border: 0 0 0; --color-secondary-button: 190 231 183; --color-secondary-button-text: 0 0 0; --hdt-btn-secondary-color: 76 76 76; --hdt-btn-secondary-bg: 191 191 191; --hdt-btn-tertiary-color: 51 51 51; --hdt-btn-tertiary-bg: 128 128 128; --color-secondary-brightness: 255 255 255; --color-link: 0 0 0; --color-accent: 219 18 21; --color-line-border: 235 235 235; --color-overlay: 0 0 0; --payment-terms-background-color: rgb(190 231 183); /* Product colors */ --color-pr-price: 0 0 0; --color-pr-sale-price: 219 18 21; --color-pr-text: 0 0 0; --color-pr-rating: ; /* Input colors */ --color-input-primary: 255 255 255; --color-input-secondary: 144 144 144; } [color-scheme="scheme-3fd2c3d1-d752-42b9-a4d2-17bfc10b6555"] { --color-background: 249 245 239; --gradient-background: #f9f5ef; --color-background2: 242 242 242; --color-foreground: 0 0 0; --color-foreground2: 84 84 84; --color-accent: 219 18 21; --color-secondary: 191 191 191; --color-tertiary: 128 128 128; --color-button: 0 0 0; --color-button-text: 255 255 255; --color-button-border: 0 0 0; --color-secondary-button: 249 245 239; --color-secondary-button-text: 0 0 0; --hdt-btn-secondary-color: 76 76 76; --hdt-btn-secondary-bg: 191 191 191; --hdt-btn-tertiary-color: 51 51 51; --hdt-btn-tertiary-bg: 128 128 128; --color-secondary-brightness: 255 255 255; --color-link: 0 0 0; --color-accent: 219 18 21; --color-line-border: 235 235 235; --color-overlay: 0 0 0; --payment-terms-background-color: rgb(249 245 239); /* Product colors */ --color-pr-price: 0 0 0; --color-pr-sale-price: 219 18 21; --color-pr-text: 0 0 0; --color-pr-rating: ; /* Input colors */ --color-input-primary: 255 255 255; --color-input-secondary: 144 144 144; } [color-scheme="scheme-8fdd877f-5baf-4d4e-b881-1af3d95440a0"] { --color-background: 248 242 234; --gradient-background: #f8f2ea; --color-background2: 255 255 255; --color-foreground: 0 0 0; --color-foreground2: 0 0 0; --color-accent: 219 18 21; --color-secondary: 191 191 191; --color-tertiary: 128 128 128; --color-button: 0 0 0; --color-button-text: 255 255 255; --color-button-border: 0 0 0; --color-secondary-button: 248 242 234; --color-secondary-button-text: 0 0 0; --hdt-btn-secondary-color: 76 76 76; --hdt-btn-secondary-bg: 191 191 191; --hdt-btn-tertiary-color: 51 51 51; --hdt-btn-tertiary-bg: 128 128 128; --color-secondary-brightness: 255 255 255; --color-link: 0 0 0; --color-accent: 219 18 21; --color-line-border: 235 235 235; --color-overlay: 0 0 0; --payment-terms-background-color: rgb(248 242 234); /* Product colors */ --color-pr-price: 0 0 0; --color-pr-sale-price: 219 18 21; --color-pr-text: 0 0 0; --color-pr-rating: ; /* Input colors */ --color-input-primary: 255 255 255; --color-input-secondary: 144 144 144; } [color-scheme="scheme-bb52d084-a701-4221-b6e6-5f54e17511d7"] { --color-background: 245 225 143; --gradient-background: #f5e18f; --color-background2: 242 242 242; --color-foreground: 34 34 34; --color-foreground2: 34 34 34; --color-accent: 219 18 21; --color-secondary: 191 191 191; --color-tertiary: 128 128 128; --color-button: 0 0 0; --color-button-text: 255 255 255; --color-button-border: 0 0 0; --color-secondary-button: 245 225 143; --color-secondary-button-text: 0 0 0; --hdt-btn-secondary-color: 76 76 76; --hdt-btn-secondary-bg: 191 191 191; --hdt-btn-tertiary-color: 51 51 51; --hdt-btn-tertiary-bg: 128 128 128; --color-secondary-brightness: 255 255 255; --color-link: 0 0 0; --color-accent: 219 18 21; --color-line-border: 235 235 235; --color-overlay: 0 0 0; --payment-terms-background-color: rgb(245 225 143); /* Product colors */ --color-pr-price: 135 135 135; --color-pr-sale-price: 34 34 34; --color-pr-text: 0 0 0; --color-pr-rating: ; /* Input colors */ --color-input-primary: 255 255 255; --color-input-secondary: 144 144 144; } [color-scheme="scheme-359006d3-7c96-4a80-862c-977e65fe3303"] { --color-background: 252 243 243; --gradient-background: #fcf3f3; --color-background2: 252 243 243; --color-foreground: 34 34 34; --color-foreground2: 34 34 34; --color-accent: 219 18 21; --color-secondary: 191 191 191; --color-tertiary: 128 128 128; --color-button: 0 0 0; --color-button-text: 255 255 255; --color-button-border: 0 0 0; --color-secondary-button: 252 243 243; --color-secondary-button-text: 0 0 0; --hdt-btn-secondary-color: 76 76 76; --hdt-btn-secondary-bg: 191 191 191; --hdt-btn-tertiary-color: 51 51 51; --hdt-btn-tertiary-bg: 128 128 128; --color-secondary-brightness: 255 255 255; --color-link: 0 0 0; --color-accent: 219 18 21; --color-line-border: 235 235 235; --color-overlay: 0 0 0; --payment-terms-background-color: rgb(252 243 243); /* Product colors */ --color-pr-price: 135 135 135; --color-pr-sale-price: 34 34 34; --color-pr-text: 0 0 0; --color-pr-rating: ; /* Input colors */ --color-input-primary: 255 255 255; --color-input-secondary: 144 144 144; } @media screen and (min-width: 768px) { :root { /* Font sizes */ --text-xs: 1.0rem; --text-sm: 1.2rem; --text-base: 1.4rem; --text-lg: 1.6rem; --text-xl: 1.8rem; --text-2xl: 2.0rem; --text-4xl: 2.2rem; --text-6xl: 2.4rem; --text-8xl: 2.6rem; --text-10xl: 2.8rem; --text-12xl: 3.0rem; --spacing-x: 30px; --spacing-y: 30px; } } .hdt-btn--size-custom-1 { --padding-button: 5px 16px; --height-button: 44px; --font-size-button: 14px;--min-width-btn: 100px; --min-width-btn-dt: 100px; }