/*
 * potensic/assets/css/tokens.css
 * 1:1 port of the Shopify Enterprise 1.6.1 `:root` block from store.potensic.com (theme instance /t/26/).
 * Source of truth: docs/spec/01-design-tokens.md §2, §3, §4, §8.
 *
 * Conventions (DO NOT CHANGE — 200+ rules in base/components depend on them):
 *   - Colours are stored as bare RGB triplets ("0 173 239"), consumed as
 *       rgb(var(--btn-bg-color))        → solid
 *       rgba(var(--text-color)/.15)     → derived alpha
 *   - Background colours are quadruplets ("255 255 255 / 1.0"), consumed as rgba(var(--bg-color)).
 *   - html { font-size: 62.5% } → 1rem = 10px. Every rem value in this theme assumes that base.
 *   - Spacing base: --space-unit: .4rem (= 4px). calc(N * var(--space-unit)) = 4N px.
 *
 * Loaded first; every other stylesheet in assets/css/ declares it as a dependency.
 */

html {
	font-size: 62.5%; /* 1rem = 10px */
}

:root {
	/* ---------- Base colours ---------- */
	--bg-color: 255 255 255 / 1.0;                 /* #FFFFFF */
	--bg-color-og: 255 255 255 / 1.0;
	--heading-color: 0 0 0;                        /* #000000 */
	--text-color: 0 0 0;
	--text-color-og: 0 0 0;
	--scrollbar-color: 0 0 0;
	--link-color: 24 24 24;                        /* #181818 */
	--link-color-og: 24 24 24;
	--star-color: 255 215 55;                      /* #FFD737 */
	--swatch-border-color-default: 204 204 204;    /* #CCCCCC */
	--swatch-border-color-active: 128 128 128;     /* #808080 */
	--swatch-card-size: 24px;
	--swatch-variant-picker-size: 64px;

	/* ---------- Colour scheme 1 — light blue-grey (featured collection / newsletter / blog index) ---------- */
	--color-scheme-1-bg: 241 244 249 / 1.0;        /* #F1F4F9 */
	--color-scheme-1-grad: linear-gradient(46deg, rgba(241, 244, 249, 1) 13%, rgba(249, 249, 249, 1) 86%);
	--color-scheme-1-heading: 0 0 0;
	--color-scheme-1-text: 0 0 0;
	--color-scheme-1-btn-bg: 0 173 239;            /* #00ADEF — brand blue */
	--color-scheme-1-btn-text: 255 255 255;
	--color-scheme-1-btn-bg-hover: 52 190 242;     /* #34BEF2 */

	/* ---------- Colour scheme 2 — dark grey (promo strip) ---------- */
	--color-scheme-2-bg: 42 43 42 / 1.0;           /* #2A2B2A */
	--color-scheme-2-grad: linear-gradient(180deg, rgba(0, 0, 0, 1), rgba(46, 46, 46, 1) 100%);
	--color-scheme-2-heading: 255 255 255;
	--color-scheme-2-text: 255 255 255;
	--color-scheme-2-btn-bg: 0 173 239;
	--color-scheme-2-btn-text: 255 255 255;
	--color-scheme-2-btn-bg-hover: 52 190 242;

	/* ---------- Colour scheme 3 — purple/black gradient (defined in the customiser, unused on the live site) ---------- */
	--color-scheme-3-bg: 255 255 255 / 1.0;
	--color-scheme-3-grad: linear-gradient(180deg, rgba(1, 2, 15, 1), rgba(20, 20, 22, 1) 41.652%, rgba(98, 25, 121, 1) 100%);
	--color-scheme-3-heading: 255 255 255;
	--color-scheme-3-text: 255 255 255;
	--color-scheme-3-btn-bg: 255 255 255;
	--color-scheme-3-btn-text: 0 173 239;
	--color-scheme-3-btn-bg-hover: 232 248 254;    /* #E8F8FE */

	/* ---------- Drawer / panel ---------- */
	--drawer-bg-color: 255 255 255 / 1.0;
	--drawer-text-color: 0 0 0;
	--panel-bg-color: 241 244 249 / 1.0;
	--panel-heading-color: 0 0 0;
	--panel-text-color: 0 0 0;

	/* ---------- Stock states ---------- */
	--in-stock-text-color: 13 164 74;              /* #0DA44A */
	--low-stock-text-color: 54 55 55;              /* #363737 */
	--very-low-stock-text-color: 227 43 43;        /* #E32B2B */
	--no-stock-text-color: 7 7 7;                  /* #070707 */
	--no-stock-backordered-text-color: 119 119 119;/* #777777 */

	/* ---------- Notices ---------- */
	--error-bg-color: 252 237 238;                 /* #FCEDEE */
	--error-text-color: 180 12 28;                 /* #B40C1C */
	--success-bg-color: 232 246 234;               /* #E8F6EA */
	--success-text-color: 44 126 63;               /* #2C7E3F */
	--info-bg-color: 228 237 250;                  /* #E4EDFA */
	--info-text-color: 26 102 210;                 /* #1A66D2 */

	/* ---------- Typography ---------- */
	--heading-font-family: "Open Sans", sans-serif;
	--heading-font-style: normal;
	--heading-font-weight: 700;
	--heading-scale-start: 6;                      /* h6 = --body-font-size + 6 = 22 */
	--navigation-font-family: "Open Sans", sans-serif;
	--navigation-font-style: normal;
	--navigation-font-weight: 400;
	--heading-text-transform: none;
	--subheading-text-transform: none;
	--body-font-family: "Open Sans", sans-serif;
	--body-font-style: normal;
	--body-font-weight: 400;
	--body-font-size: 16;                          /* unitless — used in calc() */

	/* ---------- Spacing ---------- */
	--section-gap: 48;                             /* × --fluid-1-5 → 48px @320 · 70.1px @1440 · 72px @≥1536 */
	--heading-gap: calc(8 * var(--space-unit));    /* 32px */
	--grid-column-gap: 20px;

	/* ---------- Buttons ---------- */
	--btn-bg-color: 0 173 239;
	--btn-bg-hover-color: 52 190 242;
	--btn-text-color: 255 255 255;
	--btn-bg-color-og: 0 173 239;
	--btn-text-color-og: 255 255 255;
	--btn-alt-bg-color: 255 255 255;
	--btn-alt-bg-alpha: 1.0;
	--btn-alt-text-color: 24 24 24;
	--btn-border-width: 1px;
	--btn-padding-y: 12px;
	--btn-border-radius: 27px;                     /* pill */
	--btn-lg-border-radius: 50%;
	--btn-icon-border-radius: 50%;
	--input-with-btn-inner-radius: var(--btn-border-radius);

	/* ---------- Inputs ---------- */
	--input-bg-color: 255 255 255 / 1.0;
	--input-text-color: 0 0 0;
	--input-border-width: 1px;
	--input-border-radius: 27px;
	--textarea-border-radius: 12px;
	--input-lg-border-radius: 33px;
	--input-bg-color-diff-3: #f7f7f7;
	--input-bg-color-diff-6: #f0f0f0;

	/* ---------- Modal / drawer radii ---------- */
	--modal-border-radius: 0px;
	--modal-overlay-color: 0 0 0;
	--modal-overlay-opacity: 0.4;
	--drawer-border-radius: 0px;
	--overlay-border-radius: 0px;

	/* ---------- Product labels ---------- */
	--custom-label-bg-color: 129 244 225;   --custom-label-text-color: 7 7 7;          /* #81F4E1 */
	--sale-label-bg-color: 227 43 43;       --sale-label-text-color: 255 255 255;      /* #E32B2B */
	--sold-out-label-bg-color: 84 84 84;    --sold-out-label-text-color: 255 255 255;  /* #545454 */
	--new-label-bg-color: 180 12 28;        --new-label-text-color: 255 255 255;       /* #B40C1C */
	--preorder-label-bg-color: 86 203 249;  --preorder-label-text-color: 0 0 0;        /* #56CBF9 */
	--collection-label-color: 0 126 18;                                                /* #007E12 */

	/* ---------- Page width / gutters ---------- */
	--page-width: 1440px;
	--gutter-sm: 20px;                             /* <600  */
	--gutter-md: 32px;                             /* ≥600  */
	--gutter-lg: 64px;                             /* ≥1280 */

	--payment-terms-bg-color: #ffffff;

	/* ---------- Cards ---------- */
	--coll-card-bg-color: #f1f4f9;
	--coll-card-border-color: #ffffff;
	--card-highlight-bg-color: #F9F9F9;
	--card-highlight-text-color: 85 85 85;
	--card-highlight-border-color: #E1E1E1;
	--card-bg-color: #f1f4f9;
	--card-text-color: 7 7 7;
	--card-border-color: #ffffff;
	--blend-bg-color: #f1f4f9;

	/* ---------- Animation ---------- */
	--aos-animate-duration: 1s;
	--aos-min-width: 0;

	--reading-width: 48em;                         /* 768px */
}

@media (max-width: 769px) {
	:root {
		--reading-width: 36em;                     /* 576px */
	}
}

/* ---------------------------------------------------------------------------
 * Derived layout / fluid-type variables (verbatim from the Shopify main.css).
 * Keep here so every other stylesheet can rely on them being defined first.
 * Measured output: h1 37.3px @375 · 53.3px @1440 · 54.7px @≥1536
 *                  .section margin 49.1px @375 · 70.1px @1440 · 72px @≥1536
 * ------------------------------------------------------------------------ */
:root{--fluid-vw: 100vw;--fluid-max-vw: 1536;--fluid-calc: (var(--fluid-vw) - 32rem) / (var(--fluid-max-vw) / 10 - 32) + .1rem;--fluid-1-065: ((1.065 / 10 - .1) * var(--fluid-calc));--fluid-1-125: ((1.125 / 10 - .1) * var(--fluid-calc));--fluid-1-2: ((1.2 / 10 - .1) * var(--fluid-calc));--fluid-1-25: ((1.25 / 10 - .1) * var(--fluid-calc));--fluid-1-3: ((1.3 / 10 - .1) * var(--fluid-calc));--fluid-1-4: ((1.4 / 10 - .1) * var(--fluid-calc));--fluid-1-5: ((1.5 / 10 - .1) * var(--fluid-calc))}
@media(min-width:1536px) {
  :root{--fluid-vw: calc(var(--fluid-max-vw) * 1px)}
}
:root{--column-gap: var(--grid-column-gap);--gutter: var(--gutter-sm, 20px);--row-gap: calc(10 * var(--space-unit));--space-unit: .4rem;--viewport-width: calc(100vw - var(--scrollbar-width, 0))}
@media(min-width:600px) {
  :root{--column-gap: calc(var(--grid-column-gap) * 1.6);--gutter: var(--gutter-md, 32px)}
}
@media(min-width:1280px) {
  :root{--gutter: var(--gutter-lg, 80px)}
}
:root{--heading-type-scale: 1.2;--h6: calc(var(--body-font-size) + var(--heading-scale-start));--h5: var(--h6) * var(--heading-type-scale);--h4: var(--h5) * var(--heading-type-scale);--h3: var(--h4) * var(--heading-type-scale);--h2: var(--h3) * var(--heading-type-scale);--h1: var(--h2) * var(--heading-type-scale);--h0: var(--h1) * var(--heading-type-scale);--h6-font-size: calc((var(--h6) / 1.065) * var(--fluid-1-065));--h5-font-size: calc((var(--h5) / 1.125) * var(--fluid-1-125));--h4-font-size: calc((var(--h4) / 1.2) * var(--fluid-1-2));--h3-font-size: calc((var(--h3) / 1.3) * var(--fluid-1-3));--h2-font-size: calc((var(--h2) / 1.4) * var(--fluid-1-4));--h1-font-size: calc((var(--h1) / 1.5) * var(--fluid-1-5));--h0-font-size: calc((var(--h0) / 1.5) * var(--fluid-1-5))}
/* ---------------------------------------------------------------------------
 * Region-level overrides (in Shopify these are printed inline per section).
 * ------------------------------------------------------------------------ */
.announcement {
	--announcement-text-color: 42 43 42;           /* #2A2B2A */
	background-color: #f1f4f9;
}

.header {
	--bg-color: 255 255 255 / 1.0;
	--text-color: 7 7 7;                           /* #070707 */
	--nav-bg-color: 255 255 255;
	--nav-text-color: 7 7 7;
	--nav-child-bg-color: 255 255 255;
	--nav-child-text-color: 7 7 7;
	--header-accent-color: 119 119 119;            /* #777777 */
	--search-bg-color: #e6e6e6;
	--header-transition-speed: 300ms;
}

.footer {
	--bg-color: 0 0 0 / 1.0;
	--heading-color: 255 255 255;
	--text-color: 255 255 255;
}

/* ---------------------------------------------------------------------------
 * Web fonts — Open Sans, self-hosted (assets/fonts/), lifted from the Shopify CDN.
 * ------------------------------------------------------------------------ */
@font-face {
	font-family: "Open Sans";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/opensans_n4.woff2") format("woff2"), url("../fonts/opensans_n4.woff") format("woff");
}

@font-face {
	font-family: "Open Sans";
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/opensans_n7.woff2") format("woff2"), url("../fonts/opensans_n7.woff") format("woff");
}

@font-face {
	font-family: "Open Sans";
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	src: url("../fonts/opensans_i4.woff2") format("woff2"), url("../fonts/opensans_i4.woff") format("woff");
}

@font-face {
	font-family: "Open Sans";
	font-weight: 700;
	font-style: italic;
	font-display: swap;
	src: url("../fonts/opensans_i7.woff2") format("woff2"), url("../fonts/opensans_i7.woff") format("woff");
}