@layer kelp.theme {

	:where(:root) {

		/* Color Palette */
		--color-red-base: #AF3029;
		--color-red-hue: 27.84;
		--color-red-chroma: 0.8907899837748795;

		--color-orange-base: #BC5215;
		--color-orange-hue: 45.02;
		--color-orange-chroma: 0.7614824389158533;

		--color-yellow-base: #AD8301;
		--color-yellow-hue: 85.81;
		--color-yellow-chroma: 0.7397264848322163;

		--color-green-base: #66800B;
		--color-green-hue: 122.92;
		--color-green-chroma: 0.667629089155118;

		--color-cyan-base: #24837B;
		--color-cyan-hue: 186.74;
		--color-cyan-chroma: 0.43157950385410404;

		--color-blue-base: #205EA6;
		--color-blue-hue: 254.79;
		--color-blue-chroma: 0.7107914239758857;

		--color-indigo-chroma: 0.7;

		--color-purple-base: #5E409D;
		--color-purple-hue: 294.83;
		--color-purple-chroma: 0.7841016699653507;

		--color-pink-base: #A02F6F;
		--color-pink-hue: 349.76;
		--color-pink-chroma: 0.8723899198488569;

		--color-gray-base: #6F6E69;
		--color-gray-hue: 97.45;
		--color-gray-chroma: 0.038753102989886816;


	}

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

		--color-background: #FFFCF0;
	    /* --color-text-normal: var(--color-orange-10);
	    --color-text-muted: var(--color-orange-50);
	    --color-text-input: var(--color-orange-30);
	    --color-text-code: var(--color-pink-50); */
	    --color-highlight: var(--color-yellow-80);

		/* Fills & Borders */
		--color-primary-fill-muted: var(--color-orange-95);
		--color-primary-fill-accent: var(--color-orange-90);
		--color-primary-fill-vivid: var(--color-orange-50);
		--color-primary-border-muted: var(--color-orange-90);
		--color-primary-border-accent: var(--color-orange-80);
		--color-primary-border-vivid: var(--color-orange-60);
		--color-primary-on-muted: var(--color-orange-30);
		--color-primary-on-accent: var(--color-orange-20);
		--color-primary-on-vivid: white;
		--color-primary-outline: var(--color-orange-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);

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


	}

	/* Dark Theme */
	.dark {

		/* Fills & Borders */
		--color-primary-fill-muted: var(--color-orange-20);
		--color-primary-fill-accent: var(--color-orange-30);
		--color-primary-border-muted: var(--color-orange-30);
		--color-primary-border-accent: var(--color-orange-40);
		--color-primary-on-muted: var(--color-orange-95);
		--color-primary-on-accent: var(--color-orange-95);
		--color-primary-outline: var(--color-orange-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);

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

	}

	figure {
	  text-align: center;
	}
}

@layer kelp.extend {
	.surface {
		background: var(--color-secondary-fill-muted);
		border: 1px solid var(--color-secondary-border-muted);
		border-radius: var(--border-radius-l);
		box-shadow: 0 10px 30px var(--color-secondary-fill-muted);
		margin-bottom: var(--size-6xl);
		padding: var(--size-m);
	}

	.surface h2 {
		margin-top: 0;
	}

	.surface2 {
		background: var(--color-secondary-fill-accent);
		border: 1px solid var(--color-secondary-border-accent);
		border-radius: var(--border-radius-l);
		box-shadow: 0 5px 10px var(--color-secondary-fill-accent);
		margin-bottom: var(--size-m);
		padding: var(--size-m);
	}

	.step_num {
		color: var(--color-text-muted);
		letter-spacing: .08em;
		text-transform: uppercase;
		font-size: var(--size-s);
		margin-bottom: var(--size-4xs);
	}

	.btn, .badge {
		border-radius: var(--border-radius-l);
	}

	.callout {
		border-radius: var(--border-radius-l);
	}

	.callout.success {
		box-shadow: 0 5px 10px var(--color-success-fill-accent);
	}

	.callout.danger {
		box-shadow: 0 5px 10px var(--color-danger-fill-accent);
	}

	.kakumaru_m {
		border-radius: var(--border-radius-m);
	}

	.title_header {
		background-image: url("../img/breadclub_title_image.png");
		padding: var(--size-m);
		border-radius: var(--border-radius-m);
		margin-bottom: var(--size-6xl);
	}

	.title_header img {
		filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.3));
	}

	body {
		padding: var(--size-m) 0;
	}

	kbd {
		background-color: var(--color-fill-highlight);
		color: var(--color-primary-on-muted);
		padding: var(--size-5xs) var(--size-4xs);
		border-radius: 4px;
		font-weight: bold;
	}

	mark {
		background: none;
		border-bottom: 5px solid var(--color-fill-highlight);
		font-weight: bold;
	}

	footer {
		text-align: center;
		color: var(--color-text-muted);
		font-size: var(--size-s);
	}

}