/* Resolved Horizon design tokens from settings_data.json + theme-styles-variables.liquid + color-palette.liquid */

:root {
  /* Page Layout */
  --sidebar-width: 25rem;
  --theme-drawer-width: 30rem;
  --narrow-content-width: 36rem;
  --normal-content-width: 42rem;
  --narrow-page-width: 90rem;
  --normal-page-width: 120rem;
  --wide-page-width: 150rem;

  /* Section Heights */
  --section-height-small: 15rem;
  --section-height-medium: 25rem;
  --section-height-large: 35rem;

  @media screen and (min-width: 40em) {
    --section-height-small: 40svh;
    --section-height-medium: 55svh;
    --section-height-large: 70svh;
  }

  @media screen and (min-width: 60em) {
    --section-height-small: 50svh;
    --section-height-medium: 65svh;
    --section-height-large: 80svh;
  }

  /* Letter spacing */
  --letter-spacing-sm: 0.06em;

  /* Font families — live Shopify settings_data.json: roboto_n4 / n5 / n7 */
  --font-body--family: "Roboto", sans-serif;
  --font-body--style: normal;
  --font-body--weight: 400;
  --font-subheading--family: "Roboto", sans-serif;
  --font-subheading--style: normal;
  --font-subheading--weight: 500;
  --font-heading--family: "Roboto", sans-serif;
  --font-heading--style: normal;
  --font-heading--weight: 700;
  --font-accent--family: "Roboto", sans-serif;
  --font-accent--style: normal;
  --font-accent--weight: 400;

  /* Margin sizes */
  --font-heading--spacing: 0.25em;
  --font-h1--spacing: var(--font-heading--spacing);
  --font-h2--spacing: var(--font-heading--spacing);
  --font-h3--spacing: var(--font-heading--spacing);
  --font-h4--spacing: var(--font-heading--spacing);
  --font-h5--spacing: var(--font-heading--spacing);
  --font-h6--spacing: var(--font-heading--spacing);
  --font-paragraph--spacing: 0.5em;

  /* Z-Index / Layering */
  --layer-section-background: -2;
  --layer-lowest: -1;
  --layer-base: 0;
  --layer-flat: 1;
  --layer-raised: 2;
  --layer-heightened: 4;
  --layer-sticky: 8;
  --layer-window-overlay: 10;
  --layer-header-menu: 12;
  --layer-overlay: 16;
  --layer-menu-drawer: 18;
  --layer-temporary: 20;

  /* Max-width / Measure */
  --max-width--body-normal: 32.5em;
  --max-width--body-narrow: 22.75em;
  --max-width--heading-normal: 32.5em;
  --max-width--heading-narrow: 19.5em;
  --max-width--display-normal: 13em;
  --max-width--display-narrow: 9.75em;
  --max-width--display-tight: 3.25em;

  /* Letter-spacing / Tracking */
  --letter-spacing--display-tight: -0.03em;
  --letter-spacing--display-normal: 0em;
  --letter-spacing--display-loose: 0.03em;
  --letter-spacing--heading-tight: -0.03em;
  --letter-spacing--heading-normal: 0em;
  --letter-spacing--heading-loose: 0.03em;
  --letter-spacing--body-tight: -0.03em;
  --letter-spacing--body-normal: 0em;
  --letter-spacing--body-loose: 0.03em;

  /* Line height / Leading */
  --line-height: 1;
  --line-height--display-tight: 1;
  --line-height--display-normal: 1.1;
  --line-height--display-loose: 1.2;
  --line-height--heading-tight: 1.15;
  --line-height--heading-normal: 1.25;
  --line-height--heading-loose: 1.35;
  --line-height--body-tight: 1.2;
  --line-height--body-normal: 1.4;
  --line-height--body-loose: 1.6;

  /* Fluid / fixed type sizes from settings */
  --font-size--paragraph: 0.875rem;
  --font-size--h1: clamp(3rem, 5.6vw, 3.5rem);
  --font-size--h2: clamp(2.25rem, 4.8vw, 3rem);
  --font-size--h3: 2rem;
  --font-size--h4: 1.5rem;
  --font-size--h5: 0.875rem;
  --font-size--h6: 0.75rem;

  /* Typography presets */
  --font-paragraph--weight: 400;
  --font-paragraph--size: var(--font-size--paragraph);
  --font-paragraph--family: var(--font-body--family);
  --font-paragraph--style: var(--font-body--style);
  --font-paragraph--case: none;
  --font-paragraph--line-height: var(--line-height--body-loose);
  --font-paragraph-medium--size: 0.875rem;
  --font-paragraph-small--size: 0.75rem;

  --font-h1--weight: var(--font-heading--weight);
  --font-h1--letter-spacing: var(--letter-spacing--heading-normal);
  --font-h1--size: var(--font-size--h1);
  --font-h1--family: var(--font-heading--family);
  --font-h1--style: var(--font-heading--style);
  --font-h1--case: none;
  --font-h1--line-height: var(--line-height--display-tight);

  --font-h2--weight: var(--font-heading--weight);
  --font-h2--letter-spacing: var(--letter-spacing--heading-normal);
  --font-h2--size: var(--font-size--h2);
  --font-h2--family: var(--font-heading--family);
  --font-h2--style: var(--font-heading--style);
  --font-h2--case: none;
  --font-h2--line-height: var(--line-height--display-tight);

  --font-h3--weight: var(--font-heading--weight);
  --font-h3--letter-spacing: var(--letter-spacing--heading-normal);
  --font-h3--size: var(--font-size--h3);
  --font-h3--family: var(--font-heading--family);
  --font-h3--style: var(--font-heading--style);
  --font-h3--case: none;
  --font-h3--line-height: var(--line-height--display-normal);

  --font-h4--weight: var(--font-heading--weight);
  --font-h4--letter-spacing: var(--letter-spacing--heading-normal);
  --font-h4--size: var(--font-size--h4);
  --font-h4--family: var(--font-heading--family);
  --font-h4--style: var(--font-heading--style);
  --font-h4--case: none;
  --font-h4--line-height: var(--line-height--display-tight);

  --font-h5--weight: var(--font-subheading--weight);
  --font-h5--letter-spacing: var(--letter-spacing--heading-normal);
  --font-h5--size: var(--font-size--h5);
  --font-h5--family: var(--font-subheading--family);
  --font-h5--style: var(--font-subheading--style);
  --font-h5--case: none;
  --font-h5--line-height: var(--line-height--display-loose);

  --font-h6--weight: var(--font-subheading--weight);
  --font-h6--letter-spacing: var(--letter-spacing--heading-normal);
  --font-h6--size: var(--font-size--h6);
  --font-h6--family: var(--font-subheading--family);
  --font-h6--style: var(--font-subheading--style);
  --font-h6--case: none;
  --font-h6--line-height: var(--line-height--display-loose);

  /* Hardcoded font sizes */
  --font-size--3xs: 0.625rem;
  --font-size--2xs: 0.75rem;
  --font-size--xs: 0.8125rem;
  --font-size--sm: 0.875rem;
  --font-size--md: 1rem;
  --font-size--lg: 1.125rem;
  --font-size--xl: 1.25rem;
  --font-size--2xl: 1.5rem;
  --font-size--3xl: 2rem;
  --font-size--4xl: 2.5rem;
  --font-size--5xl: 3rem;
  --font-size--6xl: 3.5rem;

  /* Menu font sizes */
  --menu-font-sm--size: 0.875rem;
  --menu-font-sm--line-height: calc(1.1 + 0.5 * min(16 / 14));
  --menu-font-md--size: 1rem;
  --menu-font-md--line-height: calc(1.1 + 0.5 * min(16 / 16));
  --menu-font-xl--size: 1.25rem;
  --menu-font-xl--line-height: calc(1.1 + 0.5 * min(16 / 20));
  --menu-font-2xl--size: 1.75rem;
  --menu-font-2xl--line-height: calc(1.1 + 0.5 * min(16 / 28));

  /* Colors */
  --color-error: #8b0000;
  --color-success: #006400;
  --color-white: #ffffff;
  --color-white-rgb: 255 255 255;
  --color-instock: #3ed660;
  --color-lowstock: #ee9441;
  --color-outofstock: #c8c8c8;

  /* Opacity */
  --opacity-5: 0.05;
  --opacity-8: 0.08;
  --opacity-10: 0.1;
  --opacity-15: 0.15;
  --opacity-20: 0.2;
  --opacity-25: 0.25;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-80: 0.8;
  --opacity-85: 0.85;
  --opacity-90: 0.9;
  --opacity-subdued-text: 0.8;
  --opacity-muted-text: 0.6;

  --shadow-button: 0 2px 3px rgb(0 0 0 / 20%);
  --gradient-image-overlay: linear-gradient(to top, rgb(0 0 0 / 0.5), transparent);

  /* Spacing */
  --margin-3xs: 0.125rem;
  --margin-2xs: 0.3rem;
  --margin-xs: 0.5rem;
  --margin-sm: 0.7rem;
  --margin-md: 0.8rem;
  --margin-lg: 1rem;
  --margin-xl: 1.25rem;
  --margin-2xl: 1.5rem;
  --margin-4xl: 2rem;
  --margin-6xl: 5rem;

  --padding-3xs: 0.125rem;
  --padding-2xs: 0.25rem;
  --padding-xs: 0.5rem;
  --padding-sm: 0.7rem;
  --padding-md: 0.8rem;
  --padding-lg: 1rem;
  --padding-xl: 1.25rem;
  --padding-2xl: 1.5rem;
  --padding-3xl: 1.75rem;
  --padding-4xl: 2rem;
  --padding-5xl: 3rem;
  --padding-6xl: 4rem;

  --gap-3xs: 0.125rem;
  --gap-2xs: 0.3rem;
  --gap-xs: 0.5rem;
  --gap-sm: 0.7rem;
  --gap-md: 0.9rem;
  --gap-lg: 1rem;
  --gap-xl: 1.25rem;
  --gap-2xl: 2rem;
  --gap-3xl: 3rem;

  --spacing-scale-md: 0.7;
  --spacing-scale-default: 1;

  --checkout-button-gap: 10px;

  /* Borders */
  --style-border-width: 1px;
  --style-border-radius-xs: 0.2rem;
  --style-border-radius-sm: 0.6rem;
  --style-border-radius-md: 0.8rem;
  --style-border-radius-50: 50%;
  --style-border-radius-lg: 1rem;
  --style-border-radius-pills: 0px;
  --style-border-radius-inputs: 4px;
  --style-border-radius-buttons-primary: 4px;
  --style-border-radius-buttons-secondary: 4px;
  --style-border-width-primary: 0px;
  --style-border-width-secondary: 1px;
  --style-border-width-inputs: 1px;
  --style-border-radius-popover: 14px;
  --style-border-popover: 1px solid #dfdfdf;
  --style-border-drawer: 1px solid #dfdfdf;
  --style-border-swatch-opacity: 100%;
  --style-border-swatch-width: 1px;
  --style-border-swatch-style: solid;

  /* Animation */
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-out-quad: cubic-bezier(0.32, 0.72, 0, 1);
  --animation-speed-fast: 0.0625s;
  --animation-speed: 0.125s;
  --animation-speed-slow: 0.2s;
  --animation-speed-medium: 0.15s;
  --animation-easing: ease-in-out;
  --drawer-animation-speed: 0.2s;
  --animation-values: var(--animation-speed) var(--animation-easing);
  --animation-timing-hover: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --animation-timing-active: cubic-bezier(0.5, 0, 0.75, 0);
  --animation-timing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --animation-timing-default: cubic-bezier(0, 0, 0.2, 1);
  --animation-timing-fade-in: cubic-bezier(0.16, 1, 0.3, 1);
  --animation-timing-fade-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Focus */
  --focus-outline-width: 0.09375rem;
  --focus-outline-offset: 0.2em;

  /* Badges */
  --badge-rectangle-padding-block: 1px;
  --badge-rectangle-padding-inline: 6px;
  @media screen and (min-width: 750px) {
    --badge-rectangle-padding-block: 4px;
    --badge-rectangle-padding-inline: 10px;
  }

  /* Icons */
  --icon-size-2xs: 0.6rem;
  --icon-size-xs: 0.85rem;
  --icon-size-sm: 1.25rem;
  --icon-size-md: 1.375rem;
  --icon-size-lg: 1.5rem;
  --icon-stroke-width: 1.5px;

  /* Input */
  --input-padding-y: 0.8rem;
  --input-padding-x: 0.8rem;
  --input-padding: var(--input-padding-y) var(--input-padding-x);
  --input-box-shadow-width: var(--style-border-width-inputs);
  --input-box-shadow: 0 0 0 var(--input-box-shadow-width) var(--color-input-border);
  --input-box-shadow-focus: 0 0 0 calc(var(--input-box-shadow-width) + 0.5px) var(--color-input-border);
  --input-disabled-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
  --input-disabled-border-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  --input-disabled-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
  --input-textarea-min-height: 55px;

  /* Checkbox */
  --checkbox-size: 22px;
  --checkbox-border-radius: 7px;
  --checkbox-border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));
  --checkbox-label-padding: 8px;

  @media screen and (min-width: 750px) {
    --checkbox-size: 16px;
    --checkbox-border-radius: 5px;
    --checkbox-label-padding: 6px;
  }

  /* Button size */
  --button-size-md: 36px;
  --button-size: var(--minimum-touch-target);
  --button-padding-inline: 24px;
  --button-padding-block: 16px;
  --button-font-family-primary: var(--font-body--family);
  --button-font-family-secondary: var(--font-body--family);
  --button-text-case-primary: none;
  --button-text-case-secondary: none;

  /* Borders */
  --border-color: rgb(var(--color-border-rgb) / var(--opacity-50));
  --border-width-sm: 1px;
  --border-radius-sm: 0.25rem;

  /* Drawers */
  --drawer-header-desktop-top: 0rem;
  --drawer-padding: calc(var(--padding-sm) + 7px);
  --drawer-height: 100dvh;
  --drawer-width: 95vw;
  --drawer-max-width: 500px;

  /* Variant Picker */
  --variant-picker-swatch-width-unitless: 34;
  --variant-picker-swatch-height-unitless: 34;
  --variant-picker-swatch-width: 34px;
  --variant-picker-swatch-height: 34px;
  --variant-picker-swatch-radius: 32px;
  --variant-picker-border-width: 1px;
  --variant-picker-border-style: solid;
  --variant-picker-border-opacity: 100%;
  --variant-picker-button-radius: 14px;
  --variant-picker-button-border-width: 1px;
  --variant-option-label-color: var(--color, var(--color-foreground));

  /* Slideshow */
  --slideshow-controls-icon: 2rem;
  --peek-next-slide-size: 3rem;

  /* Utilities */
  --backdrop-opacity: 0.15;
  --backdrop-color-rgb: var(--color-shadow-rgb);
  --minimum-touch-target: 44px;
  --disabled-opacity: 0.5;
  --skeleton-opacity: 0.025;

  /* Buy buttons */
  --height-buy-buttons: calc(var(--padding-lg) * 2 + var(--icon-size-sm));

  /* Card */
  --card-width-small: 10rem;
  --height-small: 10rem;
  @media screen and (min-width: 750px) {
    --height-small: 17.5rem;
  }

  /* Modal */
  --modal-max-height: 65dvh;
  --quick-add-modal-height: min(38.5rem, 96vh);
  --quick-add-modal-width: min(54rem, 96vw);
  --quick-add-modal-gallery-width: 24rem;

  --card-bg-hover: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  --card-border-hover: rgb(var(--color-foreground-rgb) / var(--opacity-30));
  --card-border-focus: rgb(var(--color-foreground-rgb) / var(--opacity-10));

  /* Cart */
  --cart-primary-font-family: var(--font-body--family);
  --cart-primary-font-style: var(--font-body--style);
  --cart-primary-font-weight: var(--font-body--weight);
  --cart-secondary-font-family: var(--font-subheading--family);
  --cart-secondary-font-style: var(--font-subheading--style);
  --cart-secondary-font-weight: var(--font-subheading--weight);

  /* Palette — background #ffffff, foreground #000000, color1 #333333, color2 #DFDFDF */
  --color-background: #ffffff;
  --color-background-rgb: 255 255 255;
  --color-foreground: #000000;
  --color-foreground-rgb: 0 0 0;
  --color-border: #000000;
  --color-border-rgb: 0 0 0;
  --palette-lightest: #ffffff;
  --palette-lightest-rgb: 255 255 255;
  --palette-darkest: #000000;
  --palette-darkest-rgb: 0 0 0;
  --color-accent: #ffbe0d;
  --color-accent-rgb: 255 190 13;
  --color-shadow-rgb: 0 0 0;

  /* brightness-opacities for white page background */
  --opacity-5-15: 0.05;
  --opacity-10-25: 0.1;
  --opacity-35-55: 0.35;
  --opacity-40-60: 0.4;
  --opacity-30-60: 0.3;

  --color-primary-button-text: rgb(255 255 255 / 1);
  --color-primary-button-background: rgb(0 0 0 / 1);
  --color-primary-button-border: rgb(0 0 0 / 1);
  --color-primary-button-focus-outline: rgb(0 0 0);
  --color-primary-button-hover-text: rgb(255 255 255 / 1);
  --color-primary-button-hover-background: #262626;
  --color-primary-button-hover-border: #262626;

  --color-secondary-button-text: rgb(0 0 0 / 1);
  --color-secondary-button-background: rgb(0 0 0 / 0);
  --color-secondary-button-border: rgb(0 0 0 / 1);
  --color-secondary-button-hover-text: rgb(0 0 0 / 1);
  --color-secondary-button-hover-background: rgb(0 0 0 / 0.15);
  --color-secondary-button-hover-border: #262626;

  --color-input-background: rgb(255 255 255 / 1);
  --color-input-text: rgb(51 51 51 / 1);
  --color-input-text-rgb: 51 51 51;
  --color-input-border: rgb(223 223 223 / 1);

  --color-variant-background: rgb(255 255 255 / 1);
  --color-variant-border: rgb(223 223 223 / 1);
  --color-variant-text: rgb(0 0 0 / 1);
  --color-variant-text-rgb: 0 0 0;
  --color-variant-hover-background: #f2f2f2;
  --color-variant-hover-text: rgb(0 0 0 / 1);
  --color-variant-hover-border: #d3d3d3;

  --color-selected-variant-background: rgb(0 0 0 / 1);
  --color-selected-variant-border: rgb(0 0 0 / 1);
  --color-selected-variant-text: rgb(255 255 255 / 1);
  --color-selected-variant-text-rgb: 255 255 255;
  --color-selected-variant-hover-background: #262626;
  --color-selected-variant-hover-text: rgb(255 255 255 / 1);
  --color-selected-variant-hover-border: #262626;

  --color-foreground-muted: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-muted-text));
  --color-foreground-subdued: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  --color-drawer-shadow-rgb: 0 0 0;
  --color-popover-shadow-rgb: 0 0 0;

  --shadow-drawer: 0px 4px 20px rgb(var(--color-drawer-shadow-rgb) / var(--opacity-15));
  --shadow-blur: 20px;
  --shadow-popover: 0px 4px 20px rgb(var(--color-popover-shadow-rgb) / var(--opacity-15));
}

body {
  color: var(--color-foreground);
  background-color: var(--color-background);
}

.color-custom-badge-sale {
  --color-background: #ffffff;
  --color-foreground: #000000;
  color: var(--color-foreground);
  background-color: var(--color-background);
}

.color-custom-badge-sold-out {
  --color-background: #eef1ea;
  --color-foreground: #000000;
  color: var(--color-foreground);
  background-color: var(--color-background);
}

.color-custom-why-us {
  --color-background: #000000;
  --color-background-rgb: 0 0 0;
  --color-foreground: #ffffff;
  --color-foreground-rgb: 255 255 255;
  --color-border: #ffffff;
  --color-border-rgb: 255 255 255;
  --opacity-5-15: 0.15;
  --opacity-10-25: 0.25;
  --opacity-35-55: 0.55;
  --opacity-40-60: 0.6;
  --opacity-30-60: 0.6;
  color: var(--color-foreground);
  background-color: var(--color-background);
}

.color-custom-footer {
  --color-background: #000000;
  --color-background-rgb: 0 0 0;
  --color-foreground: #ffffff;
  --color-foreground-rgb: 255 255 255;
  --color-border: #ffffff;
  --color-border-rgb: 255 255 255;
  --opacity-5-15: 0.15;
  --opacity-10-25: 0.25;
  --opacity-35-55: 0.55;
  --opacity-40-60: 0.6;
  --opacity-30-60: 0.6;
  color: var(--color-foreground);
  background-color: var(--color-background);
}

.color-custom-announcement {
  --color-background: #153d24;
  --color-background-rgb: 21 61 36;
  --color: #ffffff;
  --color-rgb: 255 255 255;
  --color-foreground: #ffffff;
  --color-foreground-rgb: 255 255 255;
  --color-border: #153d24;
  --color-border-rgb: 21 61 36;
  color: var(--color-foreground);
  background-color: var(--color-background);
}

.color-custom-top-header {
  --color-background: #111111;
  --color-background-rgb: 17 17 17;
  --color: #ffffff;
  --color-rgb: 255 255 255;
  --color-foreground: #ffffff;
  --color-foreground-rgb: 255 255 255;
  --color-border: #ffffff;
  --color-border-rgb: 255 255 255;
  --opacity-5-15: 0.15;
  --opacity-10-25: 0.25;
  --opacity-35-55: 0.55;
  --opacity-40-60: 0.6;
  --opacity-30-60: 0.6;
  color: var(--color-foreground);
}

.color-custom-bottom-header {
  --color-background: #ffffff;
  --color-background-rgb: 255 255 255;
  --color: #222222;
  --color-rgb: 34 34 34;
  --color-foreground: #222222;
  --color-foreground-rgb: 34 34 34;
  --color-border: #222222;
  --color-border-rgb: 34 34 34;
  color: var(--color-foreground);
}