/**
 * Reef Sentinel Store — design tokens (light and dark modes).
 */

:root {
	color-scheme: light;

	/* Color */
	--color-bg: #f4f6f8;
	--color-surface: #ffffff;
	--color-surface-alt: #e8edf2;
	--color-border: #c8d3dc;
	--color-text-primary: #1a2a3a;
	--color-text-secondary: #3d5166;
	--color-text-muted: #6b7f92;
	--color-primary: #0d6e7a;
	--color-primary-hover: #0a5862;
	--color-accent: #1a9aab;
	--color-success: #1f7a4d;
	--color-warning: #9a6b1a;
	--color-error: #b42318;
	--color-focus: #1a9aab;

	/* Typography */
	--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-heading: var(--font-body);
	--font-size-base: 1rem;
	--line-height-base: 1.6;
	--line-height-heading: 1.25;

	/* Spacing */
	--space-2xs: 0.25rem;
	--space-xs: 0.5rem;
	--space-sm: 0.75rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;

	/* Layout */
	--container-max: 72rem;
	--container-padding: var(--space-md);

	/* Shape */
	--radius-sm: 0.125rem;
	--radius-md: 0.25rem;
}

[data-theme="light"] {
	color-scheme: light;
}

[data-theme="dark"] {
	color-scheme: dark;

	--color-bg: #121a24;
	--color-surface: #1a2430;
	--color-surface-alt: #243040;
	--color-border: #3a4d61;
	--color-text-primary: #e8edf2;
	--color-text-secondary: #b8c5d1;
	--color-text-muted: #8a9bab;
	--color-primary: #3a9aa8;
	--color-primary-hover: #4db3c0;
	--color-accent: #5ec4d0;
	--color-success: #4caf7a;
	--color-warning: #d4a843;
	--color-error: #e05c52;
	--color-focus: #5ec4d0;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;

		--color-bg: #121a24;
		--color-surface: #1a2430;
		--color-surface-alt: #243040;
		--color-border: #3a4d61;
		--color-text-primary: #e8edf2;
		--color-text-secondary: #b8c5d1;
		--color-text-muted: #8a9bab;
		--color-primary: #3a9aa8;
		--color-primary-hover: #4db3c0;
		--color-accent: #5ec4d0;
		--color-success: #4caf7a;
		--color-warning: #d4a843;
		--color-error: #e05c52;
		--color-focus: #5ec4d0;
	}
}