/**
 * Kelp UI - Custom Theme
 * https://kelpui.com/docs/customizing/theme-builder/?palette_yellow=FFEAC7_80.53_1.25&palette_cyan=%23158FDD_244.87_0.65&palette_blue=null_null_0.75&color_primary=cyan&color_secondary=yellow&color_warning=orange&color_neutral=cyan&element_links=primary&element_focus=primary&font_secondary=Playfair
 */
 
@layer kelp.theme {

	:where(:root) {
		
		li {
			margin-bottom: 0.6875em;
		}
		h3 {
			font-stretch: expanded;
		}
		
		/* Color Palette */
		--color-yellow-base: FFEAC7;
		--color-yellow-hue: 80.53;
		--color-yellow-chroma: 1.25;
		
		--color-cyan-base: #158FDD;
		--color-cyan-hue: 244.87;
		--color-cyan-chroma: 0.65;
		
		--color-blue-chroma: 0.75;
		
		/* Fonts */
		--font-secondary: Playfair;
	}

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

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

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

	}

	/* Dark Theme */
	.dark {

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

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

	}

}

@font-face {
	font-family: "Playfair";
	src: url("https://joanne-alex.statichost.page/fonts/PlayfairRomanVF.woff2") format("woff2-variations");
	font-display: block;
	font-weight: 300 900;
}