/* ==========================================================================
   Supply Family — colour system (light + dark)

   This file is the single source of truth for every colour on the storefront,
   /my-account and the creator (vendor) dashboard. It is enqueued before every
   other theme/module stylesheet.

   How it works
   ------------
   1. Semantic tokens (--sf-color-*) are defined for light mode on :root and
      redefined for dark mode on :root[data-theme="dark"].
   2. Legacy palette names (--dark, --white, --grey …) and module palettes are
      aliases of the semantic tokens, so existing rules keep working and flip
      automatically.
   3. "Fixed-light" islands (always-dark chrome such as the header and footer,
      and anything sitting on the brand yellow) re-declare the light palette, so
      they look identical in both modes.
   4. The mode is stored in localStorage ("sf-theme") and applied to <html>
      by an inline script in <head> before first paint (inc/frontend/ThemeMode.php).

   Rules for new CSS
   -----------------
   - Never hard-code a colour in a component stylesheet. Use a token below.
   - Text on the brand yellow: var(--sf-color-on-accent).
   - Text that must stay white over photos: var(--sf-color-white).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fixed-light islands
   Elements listed here render with the light palette in both modes:
   always-dark chrome (header, footer …) and anything on the brand yellow.
   Add a selector here rather than hard-coding colours in a component.
   Elements under "dark resets" sit inside an island but follow the active mode.

   The island list appears in sections 2, 4 and 5 (palette, aliases, text
   colour) — keep the three lists in sync. In markup, the utility class
   .sf-theme-fixed-light does the same without touching this file.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. Light palette (default)
   -------------------------------------------------------------------------- */
:root,
:root[data-theme="dark"] :is(
	/* Always-dark chrome */
	header.site-header,
	.header-search-wrap,
	.hero,
	main.login .right,
	.pre-footer,
	footer,
	.floating-search,
	.home-search,
	#pf-filter-box,
	.cart-drawer-bottom.cart-drawer-actions,
	.cart-drawer .cart-drawer-bottom .cart-subtotal,
	.add-to-collection-dialog.saved .top,
	.welcome-box-lt,
	.bg-dark,
	.tooltip-lt :is(.tooltiptext, .tooltiptext2, .tooltiptext-bottomarrow, .tooltiptext-toparrow, .tooltiptext-leftarrow, .tooltiptext-rightarrow),
	.category-preview-block--view-all .media,
	.featured-creator-day,
	.sf-checkout_you_might_like-shortcode,
	.sf-shop-admin,
	body.woocommerce-lost-password .woocommerce > p,
	/* Content on the brand yellow */
	.bg-yellow,
	.yellow,
	.yellow-button,
	.home-ticker,
	.home-explore-sales,
	.featured-creator,
	.sf-promo-sale-flag,
	.sf-preview-notice,
	.sf-credits-chip.is-active,
	.sf-survey__copy,
	.sf-survey__btn--primary,
	.product-meta .woovr-variations .woovr-variation-tooltip,
	.cart-drawer .cart-drawer-bottom .cart-checkout a,
	.pagination_lt .page-numbers.current,
	.woocommerce-account .my-purchases-lt .download-item.first .inner,
	.woocommerce-account .download-list .download-icon,
	.afwc-kpi-box--highlight,
	.creator-promotions-start .button,
	.promo-modal-actions .promo-modal-confirm,
	.wcv-add-product-lt .add-product-content-lt .button-product-form,
	.woocommerce .success-message .btn-form-add,
	.button-apply-cropping,
	#tab-payouts button.payout-form-button-yellow,

	/* Dark buttons that carry white icon artwork */
	.wvc-main-content-lt .button-title-lt,
	.button-icon,
	.button-big-with-icon:not(.white),

	/* Light icon buttons that carry black icon artwork */
	.woocommerce-account .latest-invoices-lt .button.invoice,
	.woocommerce-account .download-icon,
	.wvc-main-content-lt .export-lt .button-lt,
	.wcv-add-product-lt .row-product-images .image-uploader .uploaded .uploaded-image .delete-image,
	.invoice-icon,

	/* Opt-in utility */
	.sf-theme-fixed-light
) {
	/* Surfaces */
	--sf-color-bg: #ffffff;              /* page / main background          */
	--sf-color-surface: #ffffff;         /* cards, dialogs, dropdowns       */
	--sf-color-surface-muted: #f6f6f6;   /* pills, subtle panels            */
	--sf-color-surface-sunken: #f4f4f4;  /* wells, secondary panels         */
	--sf-color-surface-strong: #ececec;  /* hover on muted, placeholders    */

	/* Lines */
	--sf-color-line: #dadada;            /* default borders / dividers      */
	--sf-color-line-subtle: #ededed;     /* hairlines inside cards          */
	--sf-color-line-strong: #2c2c2c;     /* borders on inverse surfaces     */

	/* Ink (text, icons, primary buttons) */
	--sf-color-ink: #101010;             /* primary text / primary button   */
	--sf-color-ink-strong: #4e4e4e;      /* hover of primary, dense text    */
	--sf-color-ink-secondary: #686868;   /* secondary text                  */
	--sf-color-ink-muted: #aaaaaa;       /* captions, meta, placeholders    */
	--sf-color-ink-disabled: #c8c8c8;    /* disabled controls               */
	--sf-color-ink-placeholder: #dadada; /* input placeholders              */
	--sf-color-on-ink: #ffffff;          /* text on an ink-coloured surface */

	/* Brand */
	--sf-color-accent: #fbc815;
	--sf-color-accent-hover: #fab912;
	--sf-color-on-accent: #101010;       /* fixed: text on yellow           */

	/* Status */
	--sf-color-danger: #d64545;
	--sf-color-danger-soft: #fdeaea;
	--sf-color-success: #2f9e44;
	--sf-color-success-soft: #e8f8ec;
	--sf-color-success-line: #cee8be;
	--sf-color-info-bg: #ebfbff;
	--sf-color-info-line: #bce8f5;
	--sf-color-info-ink: #5e86a2;
	--sf-color-warning-bg: #fff9ec;
	--sf-color-warning-line: #f4e6ca;
	--sf-color-warning-ink: #c28006;

	/* Effects */
	--sf-color-scrim: rgba(170, 170, 170, 0.96);  /* cart / drawer backdrop */
	--sf-color-scrim-strong: rgba(0, 0, 0, 0.55); /* modal backdrop          */
	--sf-color-shadow: rgba(0, 0, 0, 0.1);

	--sf-font-card-bg: #fffefe;

	color-scheme: light;
}

/* Brand header gradients. Kept out of the island blocks so the gradient
   page headers pick up the dark-mode version too. */
:root {
	--sf-sales-header-bg: linear-gradient(0deg, #FFF4F7 14.11%, #FBC815 94.06%);
	--sf-curated-header-bg: linear-gradient(0deg, #FFF4F4 14.11%, #15FBE0 94.06%);
}

:root[data-theme="dark"] {
	--sf-sales-header-bg: linear-gradient(180deg, #101010 0%, #413336 35%, #b092a7 75%, #f4e5eb 100%);
	--sf-curated-header-bg: linear-gradient(180deg, #9dc8fb 0%, #da9ed9 33%, #466bc6 66%, #6650b5 100%);
}

/* Cart license notice: only the two deeper stops of the blue gradient. */
:root[data-theme="dark"] .cart-license-notice {
	--sf-curated-header-bg: linear-gradient(180deg, #466bc6 0%, #6650b5 100%);
}

/* --------------------------------------------------------------------------
   3. Dark palette
   -------------------------------------------------------------------------- */
:root[data-theme="dark"],
:root[data-theme="dark"] :is(
	/* Dark resets */
	.featured-creator-day__card
) {
	--sf-color-bg: #121212;
	--sf-color-surface: #1a1a1a;
	--sf-color-surface-muted: #1f1f1f;
	--sf-color-surface-sunken: #1c1c1c;
	--sf-color-surface-strong: #2a2a2a;

	--sf-color-line: #333333;
	--sf-color-line-subtle: #262626;
	--sf-color-line-strong: #d4d4d4;

	--sf-color-ink: #f2f2f2;
	--sf-color-ink-strong: #cfcfcf;
	--sf-color-ink-secondary: #a6a6a6;
	--sf-color-ink-muted: #7d7d7d;
	--sf-color-ink-disabled: #4a4a4a;
	--sf-color-ink-placeholder: #5c5c5c;
	--sf-color-on-ink: #121212;

	--sf-color-danger: #f07373;
	--sf-color-danger-soft: #3a1c1c;
	--sf-color-success: #5cc773;
	--sf-color-success-soft: #16301e;
	--sf-color-success-line: #24502f;
	--sf-color-info-bg: #12262d;
	--sf-color-info-line: #22434f;
	--sf-color-info-ink: #94bfdc;
	--sf-color-warning-bg: #2a2312;
	--sf-color-warning-line: #4a3c1c;
	--sf-color-warning-ink: #e8b04a;

	--sf-color-scrim: rgba(0, 0, 0, 0.78);
	--sf-color-scrim-strong: rgba(0, 0, 0, 0.72);
	--sf-color-shadow: rgba(0, 0, 0, 0.5);

	--sf-font-card-bg: #1a1a1a;

	/* WooCommerce form variables (its CSS falls back to #000 / #fff). */
	--wc-form-color-text: var(--sf-color-ink);
	--wc-form-color-background: var(--sf-color-surface);
	--wc-form-border-color: var(--sf-color-line);

	color-scheme: dark;
}

/* --------------------------------------------------------------------------
   4. Fixed colours + legacy aliases
   Aliases are re-declared on every island / reset so they resolve against the
   palette of that element. Prefer the semantic --sf-color-* names in new CSS.
   -------------------------------------------------------------------------- */
:root,
:root[data-theme="dark"] :is(
	/* Always-dark chrome */
	header.site-header,
	.header-search-wrap,
	.hero,
	main.login .right,
	.pre-footer,
	footer,
	.floating-search,
	.home-search,
	#pf-filter-box,
	.cart-drawer-bottom.cart-drawer-actions,
	.cart-drawer .cart-drawer-bottom .cart-subtotal,
	.add-to-collection-dialog.saved .top,
	.welcome-box-lt,
	.bg-dark,
	.tooltip-lt :is(.tooltiptext, .tooltiptext2, .tooltiptext-bottomarrow, .tooltiptext-toparrow, .tooltiptext-leftarrow, .tooltiptext-rightarrow),
	.category-preview-block--view-all .media,
	.featured-creator-day,
	.sf-checkout_you_might_like-shortcode,
	.sf-shop-admin,
	body.woocommerce-lost-password .woocommerce > p,
	/* Content on the brand yellow */
	.bg-yellow,
	.yellow,
	.yellow-button,
	.home-ticker,
	.home-explore-sales,
	.featured-creator,
	.sf-promo-sale-flag,
	.sf-preview-notice,
	.sf-credits-chip.is-active,
	.sf-survey__copy,
	.sf-survey__btn--primary,
	.product-meta .woovr-variations .woovr-variation-tooltip,
	.cart-drawer .cart-drawer-bottom .cart-checkout a,
	.pagination_lt .page-numbers.current,
	.woocommerce-account .my-purchases-lt .download-item.first .inner,
	.woocommerce-account .download-list .download-icon,
	.afwc-kpi-box--highlight,
	.creator-promotions-start .button,
	.promo-modal-actions .promo-modal-confirm,
	.wcv-add-product-lt .add-product-content-lt .button-product-form,
	.woocommerce .success-message .btn-form-add,
	.button-apply-cropping,
	#tab-payouts button.payout-form-button-yellow,

	/* Dark buttons that carry white icon artwork */
	.wvc-main-content-lt .button-title-lt,
	.button-icon,
	.button-big-with-icon:not(.white),

	/* Light icon buttons that carry black icon artwork */
	.woocommerce-account .latest-invoices-lt .button.invoice,
	.woocommerce-account .download-icon,
	.wvc-main-content-lt .export-lt .button-lt,
	.wcv-add-product-lt .row-product-images .image-uploader .uploaded .uploaded-image .delete-image,
	.invoice-icon,

	/* Opt-in utility */
	.sf-theme-fixed-light,
	/* Dark resets */
	.featured-creator-day__card
) {
	--sf-color-white: #ffffff;
	--sf-color-black: #101010;
	--sf-color-chrome-raised: #1f1f1f; /* dark cards in dark mode = dark --sf-color-surface-muted */
	--sf-color-chrome-floating: #222222; /* floating bars (search, filters) in dark mode */
	--sf-color-chrome-floating-raised: #333333; /* pills / chips on floating bars in dark mode */

	--dark: var(--sf-color-ink);
	--dark-border: var(--sf-color-line-strong);
	--grey: var(--sf-color-line);
	--light-grey: var(--sf-color-surface-muted);
	--light-grey-2: var(--sf-color-surface-sunken);
	--darker-grey: var(--sf-color-ink-secondary);
	--dark-grey: var(--sf-color-ink-muted);
	--very-dark-grey: var(--sf-color-ink-strong);
	--yellow: var(--sf-color-accent);
	--white: var(--sf-color-bg);
}

/* --------------------------------------------------------------------------
   5. Dark-mode adjustments that tokens alone can't express
   -------------------------------------------------------------------------- */

/* Islands and resets inherit text colour as a resolved value from their
   parent, so give them the ink of their own palette. Zero specificity:
   any component rule that sets its own colour still wins. */
:where(:root[data-theme="dark"]) :where(
	header.site-header, .header-search-wrap, .hero, main.login .right, .pre-footer, footer,
	.floating-search, .home-search, #pf-filter-box, .cart-drawer-bottom.cart-drawer-actions,
	.add-to-collection-dialog.saved .top, .welcome-box-lt, .bg-dark, .featured-creator-day,
	.sf-checkout_you_might_like-shortcode, .sf-shop-admin,
	.bg-yellow, .yellow, .yellow-button, .home-ticker, .home-explore-sales, .featured-creator,
	.sf-promo-sale-flag, .sf-preview-notice, .sf-credits-chip.is-active, .sf-survey__copy,
	.sf-survey__btn--primary, .product-meta .woovr-variations .woovr-variation-tooltip,
	.cart-drawer .cart-drawer-bottom .cart-checkout a, .pagination_lt .page-numbers.current,
	.woocommerce-account .my-purchases-lt .download-item.first .inner,
	.woocommerce-account .download-list .download-icon, .afwc-kpi-box--highlight,
	.creator-promotions-start .button, .promo-modal-actions .promo-modal-confirm,
	.wcv-add-product-lt .add-product-content-lt .button-product-form,
	.woocommerce .success-message .btn-form-add, .button-apply-cropping,
	#tab-payouts button.payout-form-button-yellow, .sf-theme-fixed-light,
	.wvc-main-content-lt .button-title-lt, .button-icon, .button-big-with-icon:not(.white),
	.woocommerce-account .latest-invoices-lt .button.invoice, .woocommerce-account .download-icon,
	.wvc-main-content-lt .export-lt .button-lt, .invoice-icon,
	.wcv-add-product-lt .row-product-images .image-uploader .uploaded .uploaded-image .delete-image,
	.featured-creator-day__card
) {
	color: var(--sf-color-ink);
}

/* In light mode the body paints a dark frame around <main> (behind the
   header, overscroll). In dark mode it matches the page so no darker bands
   show between sections. */
:root[data-theme="dark"] body {
	background-color: var(--sf-color-bg);
}

/* Dark cards (dashboard welcome boxes, .bg-dark text cards, the creator-of-
   the-week card on its dark section) would vanish on a dark page: lift them
   one step. */
:root[data-theme="dark"] :is(.welcome-box-lt, .bg-dark, .featured-creator-day__card) {
	background: var(--sf-color-chrome-raised);
}

/* Home ticker: yellow in light mode, light grey in dark mode (text stays dark;
   the ticker is a fixed-light island so the token resolves to light grey). */
:root[data-theme="dark"] .home-ticker {
	background-color: var(--sf-color-surface-strong);
}

/* Gradient page headers in dark mode: secondary / muted text becomes
   translucent white so it reads over every part of the gradient. */
:root[data-theme="dark"] :is(
	.section-header-block,
	body.pc-all-sellable-collections .section-header-block-wrapper,
	body.sf-discover-listing .section-header-block-wrapper,
	body.sf-category-hub .section-header-block-wrapper,
	.curated-collections-shortcode-template .section-header-block-wrapper,
	.cart-license-notice
) {
	--sf-color-ink: #ffffff;
	--sf-color-ink-secondary: rgba(255, 255, 255, 0.9);
	--sf-color-ink-muted: rgba(255, 255, 255, 0.82);
	--dark: var(--sf-color-ink);
	--darker-grey: var(--sf-color-ink-secondary);
	--dark-grey: var(--sf-color-ink-muted);
	color: var(--sf-color-ink);
}

/* Floating chrome (home search, catalog search, filter island) hovers over
   the page: give it a lighter shade than the page so it stands out. */
:root[data-theme="dark"] :is(.home-search, .floating-search, #pf-filter-box) {
	background-color: var(--sf-color-chrome-floating);
}

/* Filter bar: the stacked sub-category pill sits one step above the bar. */
:root[data-theme="dark"] .pf-breadcrumb-stack__base > .pf-breadcrumb-item.current {
	background-color: var(--sf-color-chrome-floating-raised);
}

/* Monochrome artwork shipped as black-on-transparent images (font category
   marks, the uploader "+" — despite its file name) is inverted so it reads
   on dark surfaces. */
:root[data-theme="dark"] :is(
	.font-category-button__mark,
	.category-preview-block__mark,
	.secure-payments-icons img,
	img[src*="icon-plus-product-white.svg"]
) {
	filter: invert(1);
}

/* Gallery "+" tile: the pseudo-element also paints the tile background, so
   swap in a light-stroked icon instead of inverting. */
:root[data-theme="dark"] .input-images-lt.additional-image-lt .uploaded::after {
	background-image: url(old_img/icon-plus-product-light.svg);
}

/* Cart drawer item divider: 2px ink line would read as near-white; soften it. */
:root[data-theme="dark"] .mini-cart-item {
	border-bottom-color: var(--sf-color-ink-disabled);
}

/* …except inside fixed-light islands, which keep light-mode art. */
:root[data-theme="dark"] .sf-theme-fixed-light :is(.font-category-button__mark, .category-preview-block__mark) {
	filter: none;
}

/* Always-dark chrome sits on a dark page: separate it with a hairline.
   (The header already has its own 1px bottom border.) */
:root[data-theme="dark"] .pre-footer {
	border-top: 1px solid #262626;
}

/* Native form controls, scrollbars and autofill follow the scheme.
   Fields that rely on the browser default (white) get the surface token;
   zero specificity so any component rule still wins. */
:where(:root[data-theme="dark"]) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="button"], [type="image"], [type="file"]), textarea, select) {
	background-color: var(--sf-color-surface);
	color: var(--sf-color-ink);
	border-color: var(--sf-color-line);
}

:where(:root[data-theme="dark"]) :where(input, textarea)::placeholder {
	color: var(--sf-color-ink-placeholder);
}

:root[data-theme="dark"] input:-webkit-autofill,
:root[data-theme="dark"] textarea:-webkit-autofill,
:root[data-theme="dark"] select:-webkit-autofill {
	-webkit-text-fill-color: var(--sf-color-ink);
	-webkit-box-shadow: inset 0 0 0 1000px var(--sf-color-surface-muted);
}

/* Third-party widgets rendered on theme pages (not editable in place). */
:root[data-theme="dark"] .select2-container--default .select2-selection--single,
:root[data-theme="dark"] .select2-container--default .select2-selection--multiple,
:root[data-theme="dark"] .select2-dropdown,
:root[data-theme="dark"] .select2-search--dropdown .select2-search__field {
	background-color: var(--sf-color-surface);
	border-color: var(--sf-color-line);
	color: var(--sf-color-ink);
}

:root[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
:root[data-theme="dark"] .select2-container--default .select2-results__option {
	color: var(--sf-color-ink);
}

:root[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"],
:root[data-theme="dark"] .select2-container--default .select2-results__option--selected {
	background-color: var(--sf-color-surface-strong);
}

:root[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
	background-color: var(--sf-color-surface-strong);
	border-color: var(--sf-color-line);
	color: var(--sf-color-ink);
}

:root[data-theme="dark"] .flatpickr-calendar {
	background: var(--sf-color-surface);
	box-shadow: 0 0 0 1px var(--sf-color-line), 0 8px 24px var(--sf-color-shadow);
}

:root[data-theme="dark"] .flatpickr-calendar :is(.flatpickr-month, .flatpickr-weekday, .flatpickr-day, .cur-month, .numInputWrapper input, .flatpickr-monthDropdown-months) {
	color: var(--sf-color-ink);
	fill: var(--sf-color-ink);
}

:root[data-theme="dark"] .flatpickr-calendar :is(.flatpickr-prev-month, .flatpickr-next-month) svg {
	fill: var(--sf-color-ink);
}

:root[data-theme="dark"] .flatpickr-day:is(.prevMonthDay, .nextMonthDay, .flatpickr-disabled) {
	color: var(--sf-color-ink-muted);
}

:root[data-theme="dark"] .flatpickr-day:hover {
	background: var(--sf-color-surface-strong);
	border-color: var(--sf-color-surface-strong);
}

:root[data-theme="dark"] .flatpickr-day:is(.selected, .startRange, .endRange) {
	background: var(--sf-color-ink);
	border-color: var(--sf-color-ink);
	color: var(--sf-color-on-ink);
}

/* Cookie consent banner (CookieYes / cookie-law-info). */
:root[data-theme="dark"] :is(.cky-consent-bar, .cky-modal, .cky-preference-center) {
	background-color: var(--sf-color-surface) !important;
	border-color: var(--sf-color-line) !important;
	color: var(--sf-color-ink) !important;
}

:root[data-theme="dark"] :is(.cky-consent-bar, .cky-modal) :is(.cky-title, .cky-notice-des, .cky-notice-des p, .cky-preference-title, .cky-accordion-header .cky-accordion-btn, .cky-dma-content-wrapper) {
	color: var(--sf-color-ink) !important;
}

/* WC Vendors notices. */
:root[data-theme="dark"] .wcv_notification_wrapper .wcv_notification {
	background-color: var(--sf-color-warning-bg);
	border-color: var(--sf-color-warning-line);
}

/* --------------------------------------------------------------------------
   6. Theme switch (footer)
   -------------------------------------------------------------------------- */
.sf-theme-switch {
	--sf-switch-size: 32px;
	position: relative;
	display: inline-flex;
	padding: 2px;
	border: 1px solid var(--sf-color-line-strong);
	border-radius: 999px;
}

/* Sliding knob: sits under the light icon, moves under the moon in dark mode. */
.sf-theme-switch__thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: var(--sf-switch-size);
	height: var(--sf-switch-size);
	border-radius: 50%;
	background: var(--sf-color-on-ink);
	transition: transform 0.35s var(--easingOut);
	pointer-events: none;
}

:root[data-theme="dark"] .sf-theme-switch__thumb {
	transform: translateX(100%);
}

.sf-theme-switch__option {
	position: relative;
	z-index: 1;
	display: inline-grid;
	place-items: center;
	width: var(--sf-switch-size);
	height: var(--sf-switch-size);
	margin: 0;
	padding: 0;
	appearance: none;
	border: 0;
	border-radius: 50%;
	background: transparent !important;
	color: var(--sf-color-ink-muted);
	cursor: pointer;
	transition: color 0.35s var(--easingOut);
}

.sf-theme-switch__icon {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sf-theme-switch__option:hover,
.sf-theme-switch__option:focus-visible {
	color: var(--sf-color-on-ink);
}

.sf-theme-switch__option:focus-visible {
	outline: 1px solid var(--sf-color-on-ink);
	outline-offset: 2px;
}

.sf-theme-switch__option[aria-pressed="true"] {
	color: var(--sf-color-ink);
}

@media (prefers-reduced-motion: reduce) {
	.sf-theme-switch__thumb,
	.sf-theme-switch__option {
		transition: none;
	}
}