/* keep footer always at the bottom */

html {
    overscroll-behavior: none;
}

body {
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: var(--size-2xl);
}

/**
 * Kelp UI - Custom Theme
 * https://kelpui.com/docs/customizing/theme-builder/?palette_red=%23ff4242_25.88_0.92&palette_orange=null_null_1.05&palette_yellow=%23f4bf75_74.56_1.16&palette_green=%2390a959_123.5_0.96&palette_cyan=%2375b5aa_182.33_0.84&palette_blue=%236a9fb5_226_1.25&palette_pink=%23aa759f_334.25_0.74&palette_gray=%23181818_89.88_1.25&color_primary=green&color_secondary=cyan&element_links=primary&element_focus=primary
 */
@layer kelp.theme {

	:where(:root) {

		/* Color Palette */
		--color-red-base: #ff4242;
		--color-red-hue: 25.88;
		--color-red-chroma: 0.92;

		--color-orange-chroma: 1.05;

		--color-yellow-base: #f4bf75;
		--color-yellow-hue: 74.56;
		--color-yellow-chroma: 1.16;

		--color-green-base: #90a959;
		--color-green-hue: 123.5;
		--color-green-chroma: 0.96;

		--color-cyan-base: #75b5aa;
		--color-cyan-hue: 182.33;
		--color-cyan-chroma: 0.84;

		--color-blue-base: #6a9fb5;
		--color-blue-hue: 226;
		--color-blue-chroma: 1.25;

		--color-pink-base: #aa759f;
		--color-pink-hue: 334.25;
		--color-pink-chroma: 1.25;

		--color-gray-base: #181818;
		--color-gray-hue: 89.88;
		--color-gray-chroma: 0.07;

	}

	/* 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-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-pink-95);
		--color-secondary-fill-accent: var(--color-pink-90);
		--color-secondary-fill-vivid: var(--color-pink-50);
		--color-secondary-border-muted: var(--color-pink-90);
		--color-secondary-border-accent: var(--color-pink-80);
		--color-secondary-border-vivid: var(--color-pink-60);
		--color-secondary-on-muted: var(--color-pink-30);
		--color-secondary-on-accent: var(--color-pink-20);
		--color-secondary-on-vivid: white;
		--color-secondary-outline: var(--color-pink-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 {
        --color-background: #181818;
        --color-text-normal: #d8d8d8;
        --color-text-muted: var(--color-gray-80);
        --color-text-input: var(--color-gray-80);
        --color-text-code: var(--color-pink-70);
        --color-highlight: var(--color-pink-80);

		/* 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-pink-20);
		--color-secondary-fill-accent: var(--color-pink-30);
		--color-secondary-border-muted: var(--color-pink-30);
		--color-secondary-border-accent: var(--color-pink-40);
		--color-secondary-on-muted: var(--color-pink-95);
		--color-secondary-on-accent: var(--color-pink-95);
		--color-secondary-outline: var(--color-pink-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);

	}
}