@layer color-scheme {
	:root {
		--primary: #F32927;
		--primary-light: color-mix(var(--primary), white 94%);
		--primary-dark: color-mix(var(--primary), black 12%);
		--accent: #FFB435;

        --light-header-color: color-mix(oklch(0.424 0.0 0.0), var(--primary) 5%);
        --light-title-color: color-mix(oklch(0.525 0.0 0.0), var(--primary) 5%);        
        --light-text-color: color-mix(oklch(0.575 0.0 0.0), var(--primary) 5%);
        --light-text-color-muted: color-mix(oklch(0.675 0.0 0.0), var(--primary) 5%);
        --light-text-color-darker: color-mix(var(--light-text-color), black 20%);
        --light-link-color: var(--accent);
        --light-price-color: var(--primary);
        --light-shadow-color: rgba(0,0,0,0.1);
		--light-bg-color: #fff;
		--light-bg-color-100: oklch(from var(--light-bg-color) calc(l - 0.015) c h);
		--light-bg-color-200: oklch(from var(--light-bg-color) calc(l - 0.030) c h);
		--light-outline-color: oklch(from var(--light-bg-color) calc(l - 0.050) c h);
		--light-divider-color: oklch(from var(--light-bg-color) calc(l - 0.050) c h);

        --dark-header-color: oklch(1 0 0);
        --dark-title-color: oklch(0.90 0 0);
        --dark-text-color: oklch(0.85 0 0);        
        --dark-text-color-muted: oklch(0.75 0 0);
        --dark-text-color-darker: oklch(1 0 0);
        --dark-link-color: var(--accent);
        --dark-price-color: var(--primary);
        --dark-shadow-color: rgba(0,0,0,0.1);
        --dark-bg-color: color-mix(oklch(24.4% 0 0), var(--primary) 3%);
        --dark-bg-color-100: oklch(from var(--dark-bg-color) calc(l + 0.02) c h);
        --dark-bg-color-200: oklch(from var(--dark-bg-color) calc(l + 0.04) c h);
        --dark-outline-color: oklch(from var(--dark-bg-color) calc(l + 0.04) c h);
        --dark-divider-color: oklch(from var(--dark-bg-color) calc(l + 0.04) c h);

		--button-border-radius: 6em;		
	}
}

@layer {
	:root[data-theme="light"] {
        --header-color: var(--light-header-color);
        --title-color: var(--light-title-color);
        --text-color: var(--light-text-color);
        --text-color-muted: var(--light-text-color-muted);
        --text-color-darker: var(--light-text-color-darker);
        --link-color: var(--light-link-color);
        --price-color: var(--light-price-color);
        --shadow-color: var(--light-shadow-color);
		--placeholder-bg-color: oklch(from var(--light-bg-color) calc(l - 0.020) c h);
		--placeholder-icon-color: var(--light-text-color);
		--outline-color: var(--light-outline-color);
		--divider-color: var(--light-divider-color);

		--badge-text-color: var(--light-text-color);
		--badge-bg-color: var(--light-bg-color);
		--badge-outline-color: var(--light-outline-color);

		.button {
			--button-bg: white;
			--button-outline-color: oklch(from var(--button-bg-color) calc(l - 0.080) c h);
			--button-text-color: oklch(from var(--light-text-color) calc(l + 0.03) c h);
			--button-text-color-hover: oklch(from var(--light-text-color) calc(l - 0.03) c h);
			--button-icon-color: var(--primary);
			--button-icon-color-hover: var(--primary);
		}

		.card {
			--card-bg-color: white;
			--card-outline-color: oklch(from var(--card-bg-color) calc(l - 0.050) c h);
			--placeholder-bg-color: oklch(from var(--light-bg-color) calc(l - 0.020) c h);
			--placeholder-icon-color: var(--light-text-color);
			--outline-color: oklch(from var(--card-bg-color) calc(l - 0.050) c h);
			--divider-color: oklch(from var(--card-bg-color) calc(l - 0.050) c h);
			box-shadow: none;
		}

		[color-scheme="neutral-100"] {
			--bg-color: var(--light-bg-color-100);			
			--placeholder-bg-color: oklch(from white calc(l - 0.040) c h);
			--placeholder-icon-color: var(--light-text-color);
			--drag-handler-icon-color: var(--light-text-color);
			--divider-color: oklch(from var(--bg-color) calc(l - 0.045) c h);

			.card {
				--card-bg-color: white;
				--header-color: var(--light-header-color);
				--title-color: var(--light-title-color);
				--text-color: var(--light-text-color);
				--placeholder-bg-color: color-mix(oklch(from var(--card-bg-color) calc(l - 0.020) c h), var(--primary) 3%);
				--placeholder-icon-color: var(--primary);
			}
		}

		[color-scheme="neutral-200"] {
			--bg-color: var(--light-bg-color-200);		
			--placeholder-bg-color: color-mix(var(--bg-color), white 80%);
			--placeholder-icon-color: var(--light-text-color);
			--drag-handler-icon-color: var(--light-text-color);
			--divider-color: oklch(from var(--bg-color) calc(l - 0.045) c h);

			.card {
				--card-bg-color: white;
				--header-color: var(--light-header-color);
				--title-color: var(--light-title-color);
				--text-color: var(--light-text-color);
				--placeholder-bg-color: color-mix(oklch(from var(--card-bg-color) calc(l - 0.020) c h), var(--primary) 3%);
				--placeholder-icon-color: var(--primary);
			}
		}
	}

	:root[data-theme="dark"] {
        --header-color: var(--dark-header-color);
        --title-color: var(--dark-title-color);
        --text-color: var(--dark-text-color);
        --text-color-muted: var(--dark-text-color-muted);
        --text-color-darker: var(--dark-text-color-darker);
        --link-color: var(--dark-link-color);
        --price-color: var(--dark-price-color);
        --shadow-color: var(--dark-shadow-color);

		--placeholder-bg-color: oklch(from var(--dark-bg-color) calc(l + 0.02) c h);
		--placeholder-icon-color: var(--dark-text-color);
		--outline-color: var(--dark-outline-color);
		--divider-color: var(--dark-divider-color);
		--link-color: var(--dark-link-color);

		.button {
			--button-bg: oklch(from var(--dark-bg-color) calc(l + 0.065) c h);
			--button-outline-color: oklch(from var(--dark-bg-color) calc(l + 0.040) c h);
			--button-text-color: var(--text-color);
			--button-text-color-hover: var(--text-color);
			--button-icon-color: var(--primary);
			--button-icon-color-hover: var(--primary);
		}

		.card {
			--card-bg-color: oklch(from var(--dark-bg-color) calc(l + 0.020) c h);
			--card-outline-color: oklch(from var(--card-bg-color) calc(l - 0.030) c h);
			--placeholder-bg-color: oklch(from var(--card-bg-color) calc(l + 0.040) c h);
			--outline-color: oklch(from var(--card-bg-color) calc(l - 0.050) c h);
			--divider-color: oklch(from var(--card-bg-color) calc(l + 0.070) c h);

			box-shadow: none;
		}

		[color-scheme="neutral-100"] {
			--bg-color: var(--dark-bg-color-100);
			--placeholder-bg-color: oklch(from var(--dark-bg-color) calc(l + 0.04) c h);
			--placeholder-icon-color: var(--dark-text-color);
			--drag-handler-icon-color: var(--dark-text-color);
		
			.card {
				--card-bg-color: oklch(from var(--dark-bg-color) calc(l + 0.040) c h);
				--card-outline-color: oklch(from var(--dark-bg-color) calc(l + 0.0) c h);
			}
		}

		[color-scheme="neutral-200"] {
			--bg-color: var(--dark-bg-color-200);
			--placeholder-bg-color: oklch(from var(--bg-color) calc(l + 0.06) c h);
			--placeholder-icon-color: var(--dark-text-color);
			--drag-handler-icon-color: var(--dark-text-color);

			.card {
				--card-bg-color: oklch(from var(--dark-bg-color) calc(l + 0.060) c h);
				--card-outline-color: oklch(from var(--dark-bg-color) calc(l + 0.02) c h);
				--placeholder-bg-color: oklch(from var(--dark-bg-color) calc(l + 0.080) c h);	
			}
		}
	}
}

@layer {
	wx-block {
		&[color-scheme="primary"] {
			--header-color: white;
			--title-color: white;
			--text-color: white;
			--text-color-muted: color-mix(white, var(--primary) 25%);
			--bg-color: var(--primary);
			--shadow-color: rgba(0,0,0,0.05);

			--drag-handler-icon-color: white;
			--placeholder-bg-color: oklch(from var(--bg-color) calc(l + 0.03) c h);
			--placeholder-icon-color: white;
			--divider-color: oklch(from var(--bg-color) calc(l + 0.055) c h);

			.card {
				--header-color: var(--light-header-color);
				--title-color: var(--light-title-color);
				--text-color: var(--light-text-color);
				--text-color-muted: var(--light-bg-color-muted);
				--card-bg-color: white;
				--card-outline-color: oklch(from var(--card-bg-color) calc(l - 0.03) c h);
				--placeholder-bg-color: color-mix(oklch(from var(--card-bg-color) calc(l - 0.020) c h), var(--primary) 3%);
				--placeholder-icon-color: var(--text-color);
			}

			.button {
				--button-bg: white;
				--button-outline-color: oklch(from var(--button-bg-color) calc(l - 0.080) c h);
				--button-text-color: oklch(from var(--light-text-color) calc(l + 0.03) c h);
				--button-text-color-hover: oklch(from var(--light-text-color) calc(l - 0.03) c h);
				--button-icon-color: var(--primary);
				--button-icon-color-hover: var(--primary);
			}
		}

		&[color-scheme="primary-light"] {
			--header-color: var(--light-header-color);
			--title-color: var(--light-title-color);
			--text-color: var(--light-text-color);
			--text-color-muted: var(--light-text-color-muted);
			--bg-color: var(--primary-light);
			--placeholder-bg-color: color-mix(white, var(--primary) 1.0%);
			--placeholder-icon-color: var(--primary);
			--divider-color: oklch(from var(--bg-color) calc(l - 0.045) c h);

			.card {
				--card-bg-color: white;
				--card-outline-color: oklch(from var(--card-bg-color) calc(l - 0.03) c h);
				--placeholder-bg-color: oklch(from var(--card-bg-color) calc(l - 0.02) c h);
				--placeholder-icon-color: var(--light-text-color);
				box-shadow: none;
			}
		}

		&[color-scheme="primary-dark"] {
			--header-color: white;
			--title-color: white;
			--text-color: white;
			--text-color-muted: color-mix(white, var(--primary-dark) 25%);
			--bg-color: var(--primary-dark);
			--shadow-color: rgba(0,0,0,0.05);

			--drag-handler-icon-color: white;
			--placeholder-bg-color: oklch(from var(--bg-color) calc(l + 0.03) c h);
			--placeholder-icon-color: white;
			--divider-color: oklch(from var(--bg-color) calc(l + 0.055) c h);

			.card {
				--header-color: var(--light-header-color);
				--title-color: var(--light-title-color);
				--text-color: var(--light-text-color);
				--text-color-muted: var(--light-bg-color-muted);
				--card-bg-color: white;
				--card-outline-color: oklch(from var(--card-bg-color) calc(l - 0.03) c h);
				--placeholder-bg-color: color-mix(oklch(from var(--card-bg-color) calc(l - 0.020) c h), var(--primary) 3%);
				--placeholder-icon-color: var(--primary);
			}
		}

		&[color-scheme="black"] {
			--header-color: var(--dark-header-color);
			--title-color: var(--dark-title-color);
			--text-color: var(--dark-text-color);
			--text-color-muted: var(--dark-text-color-muted);
			--bg-color: var(--dark-bg-color);

			--drag-handler-icon-color: var(--text-color);
			--placeholder-bg-color: oklch(from var(--bg-color) calc(l + 0.035) c h);
			--placeholder-icon-color: white;
			--divider-color: oklch(from var(--bg-color) calc(l + 0.05) c h);

			.card {
				--placeholder-bg-color: oklch(from var(--bg-color) calc(l + 0.065) c h);
				--placeholder-icon-color: var(--text-color);
				--card-bg-color: oklch(from var(--bg-color) calc(l + 0.035) c h);
				--card-outline-color: oklch(from var(--bg-color) calc(l + 0.0) c h);
			}

			.button {
				--button-bg: oklch(from var(--dark-bg-color) calc(l + 0.065) c h);
				--button-outline-color: oklch(from var(--dark-bg-color) calc(l - 0.020) c h);
				--button-text-color: var(--text-color);
				--button-text-color-hover: var(--text-color);
				--button-icon-color: white;
				--button-icon-color-hover: white;
			}
		}

		&[color-scheme="white"] {
			--header-color: var(--light-header-color);
			--title-color: var(--light-title-color);
			--text-color: var(--light-text-color);
			--text-color-muted: var(--light-text-color-muted);
			--bg-color: white;

			--drag-handler-icon-color: var(--text-color);
			--placeholder-bg-color: oklch(from var(--bg-color) calc(l - 0.02) c h);
			--placeholder-icon-color: var(--primary);
			--divider-color: oklch(from var(--bg-color) calc(l - 0.045) c h);

			.card {
				--header-color: var(--light-header-color);
				--title-color: var(--light-title-color);
				--text-color: var(--light-text-color);
				--placeholder-bg-color: oklch(from var(--bg-color) calc(l - 0.02) c h);
				--placeholder-icon-color: var(--primary);
				--card-bg-color: var(--light-bg-color);
				--card-outline-color: oklch(from var(--bg-color) calc(l - 0.04) c h);			
			}

			.button {
				--button-bg: var(--bg-color);
				--button-outline-color: oklch(from var(--bg-color) calc(l - 0.080) c h);
				--button-text-color: oklch(from var(--text-color) calc(l + 0.03) c h);
				--button-text-color-hover: oklch(from var(--text-color) calc(l - 0.03) c h);
				--button-icon-color: var(--primary);
				--button-icon-color-hover: var(--primary);
			}
		}
	}
}

@layer card {
	.card {
		&[color-scheme="primary"] {
			--header-color: white;
			--title-color: white;
			--text-color: color-mix(white, var(--primary) 20%);
			--text-color-muted: color-mix(white, var(--primary) 20%);
			--link-color: var(--accent);
			--outline-color: color-mix(white, var(--primary) 88%);
			--divider-color: color-mix(white, var(--primary) 88%);
			--card-bg-color: var(--primary);
			--card-outline-color: oklch(from var(--card-bg-color) calc(l - 0.03) c h);
			--placeholder-bg-color: oklch(from var(--card-bg-color) calc(l + 0.04) c h);
			--placeholder-icon-color: white;
		}

		&[color-scheme="primary-light"] {
			--header-color: color-mix(var(--light-header-color), var(--primary) 10%);
			--title-color: color-mix(var(--light-title-color), var(--primary) 10%);
			--text-color: color-mix(var(--light-text-color), var(--primary) 10%);
			--text-color-muted: color-mix(var(--light-text-color-muted), var(--primary) 10%);
			--link-color: var(--accent);
			--outline-color: color-mix(black, var(--primary-light) 96%);
			--divider-color: color-mix(black, var(--primary-light) 96%);
			--card-bg-color: var(--primary-light);
			--card-outline-color: oklch(from var(--card-bg-color) calc(l - 0.04) c h);
			--placeholder-bg-color: white;
			--placeholder-icon-color: var(--primary);
		}

		&[color-scheme="primary-dark"] {
			--header-color: white;
			--title-color: white;
			--text-color: white;
			--text-color-muted: color-mix(white, var(--primary-dark) 25%);
			--link-color: var(--accent);
			--outline-color: color-mix(white, var(--primary-dark) 88%);
			--divider-color: color-mix(white, var(--primary-dark) 88%);
			--card-bg-color: var(--primary-dark);
			--card-outline-color: oklch(from var(--card-bg-color) calc(l - 0.03) c h);
			--placeholder-bg-color: oklch(from var(--card-bg-color) calc(l + 0.04) c h);
			--placeholder-icon-color: white;
		}

		&[color-scheme="accent"] {
			--header-color: white;
			--title-color: white;
			--text-color: white;
			--text-color-muted: color-mix(white, var(--accent) 25%);
			--link-color: var(--primary);
			--outline-color: color-mix(white, var(--accent) 83%);
			--divider-color: color-mix(white, var(--accent) 83%);
			--card-bg-color: var(--accent);
			--card-outline-color: oklch(from var(--card-bg-color) calc(l - 0.03) c h);
			--placeholder-bg-color: oklch(from var(--card-bg-color) calc(l + 0.04) c h);
			--placeholder-icon-color: white;
		}

		&[color-scheme="white"] {
			--header-color: var(--light-header-color);
			--title-color: var(--light-title-color);
			--text-color: var(--light-text-color);
			--link-color: var(--primary);
			--outline-color: color-mix(black, white 96%);
			--divider-color: color-mix(black, white 96%);
			--card-bg-color: var(--light-bg-color);
			--card-outline-color: oklch(from var(--card-bg-color) calc(l - 0.05) c h);
			--placeholder-bg-color: color-mix(oklch(from white calc(l - 0.020) c h), var(--primary) 3%);
			--placeholder-icon-color: var(--primary);

		}

		&[color-scheme="black"] {
	        --header-color: var(--dark-header-color);
	        --title-color: var(--dark-title-color);
	        --text-color: var(--dark-text-color);
			--link-color: var(--dark-link-color);
			--outline-color: color-mix(white, var(--dark-bg-color) 88%);
			--divider-color: color-mix(white, var(--dark-bg-color) 88%);
			--card-bg-color: var(--dark-bg-color);
			--card-outline-color: oklch(from var(--card-bg-color) calc(l - 0.03) c h);
			--placeholder-bg-color: oklch(from var(--card-bg-color) calc(l + 0.03) c h);
			--placeholder-icon-color: var(--dark-text-color);
		}
	}
}

@layer {
	.button {
		&.primary {
            --button-icon-color: white;
            --button-icon-color-hover: white;
            --button-text-color: white;
            --button-text-color-hover: white;
            --button-bg: var(--primary);
            --button-outline-color: color-mix(in srgb, var(--primary), black 5%);
            --button-hilight-color: rgba(255,255,255,0.15);
        }

        &.primary-dark {
            --button-icon-color: white;
            --button-icon-color-hover: white;
            --button-text-color: white;
            --button-text-color-hover: white;
            --button-bg: var(--primary-dark);
            --button-outline-color: color-mix(in srgb, var(--primary-dark), black 5%);
            --button-hilight-color: rgba(255,255,255,0.15);
        }

        &.accent {
            --button-icon-color: white;
            --button-icon-color-hover: white;
            --button-text-color: white;
            --button-text-color-hover: white;
            --button-bg: var(--accent);
            --button-bg-hover: var(--button-bg-color-hover);
            --button-outline-color: color-mix(in srgb, var(--accent), black 5%);
            --button-hilight-color: rgba(255,255,255,0.15);
        }

        &.white {
			--button-bg: white;
			--button-outline-color: oklch(from white calc(l - 0.080) c h);
			--button-text-color: oklch(from var(--light-text-color) calc(l + 0.03) c h);
			--button-text-color-hover: oklch(from var(--light-text-color) calc(l - 0.03) c h);
			--button-icon-color: var(--primary);
			--button-icon-color-hover: var(--primary);
        }

        &.black {
			--button-bg: oklch(from var(--dark-bg-color) calc(l + 0.065) c h);
			--button-outline-color: oklch(from var(--dark-bg-color) calc(l + 0.04) c h);
			--button-text-color: white;
			--button-text-color-hover: white;
			--button-icon-color: white;
			--button-icon-color-hover: white;
        }	
    }
}