/**
 * Kelp UI - Custom Theme
 * https://kelpui.com/docs/customizing/theme-builder/?palette_green=%23646A50_118.39_0.35&palette_cyan=%23BDA287_66.93_0.3782969894780601&color_primary=green&color_secondary=cyan&element_links=primary&element_focus=primary
 */
@layer kelp.theme {

	:where(:root) {

		/* Color Palette */
		--color-green-base: #646A50;
		--color-green-hue: 118.39;
		--color-green-chroma: 0.35;

		--color-cyan-base: #BDA287;
		--color-cyan-hue: 66.93;
		--color-cyan-chroma: 0.3782969894780601;

		--color-green: #646A50;
		--color-brown: #6B3928;
		--color-skin: rgb(189, 162, 135);
		--color-skin-light: #E1C491;

		--font-primary:
			"KoHo",
			ui-sans-serif,
			system-ui,
			sans-serif;
		--font-secondary:
			"Konkhmer Sleokchher",
			Charter,
			"Bitstream Charter",
			"Sitka Text",
			Cambria,
			serif;
		
	}

	/* Light Theme (default) */
	:where(:root),
	.light {

		/* Fills & Borders */
		--color-primary-fill-muted: var(--color-green-95);
		--color-primary-fill-accent: var(--color-green-90);
		/*--color-primary-fill-vivid: var(--color-green-50);*/
		--color-primary-fill-vivid: var(--color-green);
		--color-primary-border-muted: var(--color-green-90);
		--color-primary-border-accent: var(--color-green-80);
		--color-primary-border-vivid: var(--color-green-60);
		--color-primary-on-muted: var(--color-green-30);
		--color-primary-on-accent: var(--color-green-20);
		--color-primary-on-vivid: white;
		--color-primary-outline: var(--color-green-50);
		--color-secondary-fill-muted: var(--color-cyan-95);
		--color-secondary-fill-accent: var(--color-cyan-90);
		--color-secondary-fill-vivid: var(--color-cyan-50);
		--color-secondary-border-muted: var(--color-cyan-90);
		--color-secondary-border-accent: var(--color-cyan-80);
		--color-secondary-border-vivid: var(--color-cyan-60);
		--color-secondary-on-muted: var(--color-cyan-30);
		--color-secondary-on-accent: var(--color-cyan-20);
		--color-secondary-on-vivid: white;
		--color-secondary-outline: var(--color-cyan-50);

		/* Links & Focus */
		--color-text-link: var(--color-green-50);
		--color-text-link-hover: var(--color-green-40);
		--color-checked: var(--color-green-50);
		--focus-ring-color: var(--color-green-50);

	}

	/* Dark Theme */
	.dark {

		/* Fills & Borders */
		--color-primary-fill-muted: var(--color-green-20);
		--color-primary-fill-accent: var(--color-green-30);
		--color-primary-border-muted: var(--color-green-30);
		--color-primary-border-accent: var(--color-green-40);
		--color-primary-on-muted: var(--color-green-95);
		--color-primary-on-accent: var(--color-green-95);
		--color-primary-outline: var(--color-green-70);
		--color-secondary-fill-muted: var(--color-cyan-20);
		--color-secondary-fill-accent: var(--color-cyan-30);
		--color-secondary-border-muted: var(--color-cyan-30);
		--color-secondary-border-accent: var(--color-cyan-40);
		--color-secondary-on-muted: var(--color-cyan-95);
		--color-secondary-on-accent: var(--color-cyan-95);
		--color-secondary-outline: var(--color-cyan-70);

		/* Links & Focus */
		--color-text-link: var(--color-green-70);
		--color-text-link-hover: var(--color-green-80);
		--color-checked: var(--color-green-60);
		--focus-ring-color: var(--color-green-60);

	}

}