@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root,
:root[data-theme='dark'] {
	--sl-color-accent-low: #151f53;
	--sl-color-accent: #336df5;
	--sl-color-accent-high: #c2d5ff;
	--sl-color-white: #e8e8e8;
	--sl-color-gray-1: #c9c9c9;
	--sl-color-gray-2: #a0a0a0;
	--sl-color-gray-3: #707070;
	--sl-color-gray-4: #383838;
	--sl-color-gray-5: #1a1a1a;
	--sl-color-gray-6: #111111;
	--sl-color-black: #0a0a0a;
	--sl-font-system: 'Inter', system-ui, -apple-system, sans-serif;
	--sl-font-system-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

:root[data-theme='light'] {
	--sl-color-accent-low: #dce6f8;
	--sl-color-accent: #1a3dd6;
	--sl-color-accent-high: #0f2470;
	--sl-color-white: #1a1a1a;
	--sl-color-gray-1: #383838;
	--sl-color-gray-2: #585858;
	--sl-color-gray-3: #888888;
	--sl-color-gray-4: #c0c0c0;
	--sl-color-gray-5: #f0f0f0;
	--sl-color-gray-6: #f8f8f8;
	--sl-color-black: #ffffff;
}

/* pointer cursor on all clickable elements */
a,
button,
label,
summary,
[role="button"] {
	cursor: pointer !important;
}
