@use 'sass:color';

$surface-1-dark: #080c13;
$surface-1-light: #fdfbf7;

html {
	/* font */
	--font-sans: 'Lexend Variable', sans-serif;
	--font-mono: monospace;

	--size-header-1: initial;
	--size-content-3: initial;

	--font-size-00: 12px;

	--bold: var(--font-weight-8);

	/* dark */
	--accent-dark: var(--cyan-3);
	--brand-dark: var(--orange-3);
	--link-dark: #bba5ff;
	--text-1-dark: var(--gray-1);
	--text-2-dark: var(--gray-3);
	--text-contrast-dark: #{$surface-1-dark};
	--surface-1-dark: #{$surface-1-dark};
	--surface-2-dark: #{color.scale($surface-1-dark, $lightness: 5%, $space: oklch)};
	--surface-3-dark: #{color.scale($surface-1-dark, $lightness: 10%, $space: oklch)};
	--surface-4-dark: #{color.scale($surface-1-dark, $lightness: 15%, $space: oklch)};
	--background-dark: #{$surface-1-dark};
	--toolbar-dark: #{rgba($surface-1-dark, 0.8)};
	--border-dark: var(--gray-5);
	--input-border-dark: var(--gray-5);

	/* light */
	--accent-light: var(--jungle-6);
	--brand-light: var(--orange-10);
	--link-light: #6542d0;
	--text-1-light: var(--gray-10);
	--text-2-light: var(--gray-8);
	--text-contrast-light: #{$surface-1-light};
	--surface-1-light: #{$surface-1-light};
	--surface-2-light: #{color.scale($surface-1-light, $lightness: -5%, $space: oklch)};
	--surface-3-light: #{color.scale($surface-1-light, $lightness: -10%, $space: oklch)};
	--surface-4-light: #{color.scale($surface-1-light, $lightness: -15%, $space: oklch)};
	--background-light: #{$surface-1-light};
	--toolbar-light: #{rgba($surface-1-light, 0.8)};
	--border-light: var(--gray-4);
	--input-border-light: var(--gray-8);
}

@mixin light-theme {
	color-scheme: light;

	--accent: var(--accent-light);
	--brand: var(--brand-light);
	--link: var(--link-light);
	--text-1: var(--text-1-light);
	--text-2: var(--text-2-light);
	--text-contrast: var(--text-contrast-light);
	--surface-1: var(--surface-1-light);
	--surface-2: var(--surface-2-light);
	--surface-3: var(--surface-3-light);
	--surface-4: var(--surface-4-light);
	--background: var(--background-light);
	--toolbar: var(--toolbar-light);
	--border: var(--border-light);
	--input-border: var(--input-border-light);
}

@mixin dark-theme {
	color-scheme: dark;

	--accent: var(--accent-dark);
	--brand: var(--brand-dark);
	--link: var(--link-dark);
	--text-1: var(--text-1-dark);
	--text-2: var(--text-2-dark);
	--text-contrast: var(--text-contrast-dark);
	--surface-1: var(--surface-1-dark);
	--surface-2: var(--surface-2-dark);
	--surface-3: var(--surface-3-dark);
	--surface-4: var(--surface-4-dark);
	--background: var(--background-dark);
	--toolbar: var(--toolbar-dark);
	--input-border: var(--input-border-dark);
}

:root {
	@include dark-theme;
}

@media (prefers-color-scheme: light) {
	:root {
		@include light-theme;
	}
}

[color-scheme='dark'] {
	@include dark-theme;
}

[color-scheme='light'] {
	@include light-theme;
}

body {
	background-color: var(--background);
	color: var(--text-1);
}
