@import '$lib/scss/_mixins.scss';

@mixin base-theme {
	@include define-color('primary', #6E29E7);
	@include define-color('primary-shade', #b28cf2);	
	@include define-color('primary-tint', #f9f6fe);

	@include define-color('secondary', #ff571a);
	@include define-color('secondary-shade', #ffa280);
	@include define-color('secondary-tint', #fff8f5);

	@include define-color('yellow', #ffd400);

	@include define-color('text', #1c1e26);
	@include define-color('text-shade', #5d5f65);
	@include define-color('text-inverse', #ffffff);
	@include define-color('text-inverse-shade', #9eb4b5);

	@include define-color('page-background', #f4f8fb);
	@include define-color('post-page-background', #f3fbfc);
	@include define-color('card-background', #ffffff);

	// Used for Callout component
	@include define-color('callout-background', #f4f8fb);
	@include define-color('callout-background--info', #dfeffd);
	@include define-color('callout-accent--info', #2883f4);
	@include define-color('callout-background--warning', #fff6b6);
	@include define-color('callout-accent--warning', #c87820);
	@include define-color('callout-background--error', #ffe8e8);
	@include define-color('callout-accent--error', #f95256);
	@include define-color('callout-background--success', #dcf7ec);
	@include define-color('callout-accent--success', #009f70);

	// Used for Code Block component
	@include define-color('code-background', #1c1e26);
	@include define-color('code-text', #ffffff);
	@include define-color('code-inline-background', #e3e3e3);

	--color--waves-start: rgba(var(--color--primary-rgb), 0.3);
	--color--waves-end: rgba(var(--color--primary-rgb), 0.1);

	--card-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
	--card-shadow-hover: 0px 4px 10px 8px rgb(0 0 0 / 10%);
	--image-shadow: 8px 14px 38px rgba(39, 44, 49, 0.06), 1px 3px 8px rgba(39, 44, 49, 0.03);
}

@mixin dark-theme {
	@include define-color('primary', #9f67ff);
	@include define-color('primary-shade', #4612A1);	
	@include define-color('primary-tint', #231934);

	@include define-color('secondary', #ff723f);
	@include define-color('secondary-shade', #AB3307);
	@include define-color('secondary-tint', #1b1918);

	@include define-color('yellow', #ffd400);

	@include define-color('text', #ffffff);
	@include define-color('text-shade', #9eb4b5);
	@include define-color('text-inverse', #1c1e26);
	@include define-color('text-inverse-shade', #5d5f65);

	@include define-color('page-background', #1c1e26);
	@include define-color('post-page-background', #141519);
	@include define-color('card-background', #32343e);

	// Used for Callout component
	@include define-color('callout-background', #1c1e26);
	@include define-color('callout-background--info', #1d3874);
	@include define-color('callout-accent--info', #6ca9f7);
	@include define-color('callout-background--warning', #724413);
	@include define-color('callout-accent--warning', #ffca39);
	@include define-color('callout-background--error', #7c1d20);
	@include define-color('callout-accent--error', #ff8082);
	@include define-color('callout-background--success', #004737);
	@include define-color('callout-accent--success', #00c48f);

	@include define-color('code-inline-background', #2b3131);
}

:root {
	@include base-theme;

	&[data-theme='dark'] {
		@include dark-theme;
	}

	&[data-theme='auto'] {
		@media (prefers-color-scheme: dark) {
			@include dark-theme;
		}
	}
}
