/*
 * Design tokens.
 *
 * One accent, calm neutral surfaces, no gradients, no glow. Dark mode swaps
 * the same token names so no component needs to know which theme is active.
 */

:root {
	color-scheme: light;

	/* Surfaces and ink */
	--bg: #f6f7f9;
	--surface: #ffffff;
	--surface-subtle: #f0f2f5;
	--surface-sunken: #eaedf1;
	--ink: #101216;
	--ink-soft: #3e4653;
	--muted: #6b7280;
	--line: #e2e6ea;
	--line-strong: #ccd3da;

	/* Brand and status */
	--accent: #3157e8;
	--accent-strong: #2444b8;
	--accent-soft: #eef2fe;
	--accent-ink: #ffffff;
	--success: #16784a;
	--success-soft: #e6f4ec;
	--warning: #9a6700;
	--warning-soft: #fdf4e3;
	--danger: #b42318;
	--danger-soft: #fdecea;
	--neutral-soft: #eef0f3;

	/* Shape */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 18px;
	--radius-pill: 999px;

	--shadow-soft: 0 8px 30px rgba(16, 18, 22, 0.07);
	--shadow-raised: 0 2px 6px rgba(16, 18, 22, 0.06);
	--shadow-sheet: 0 -8px 40px rgba(16, 18, 22, 0.16);

	/* Spacing scale */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 88px;

	/* Type */
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
		Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;

	--text-xs: 0.75rem;
	--text-sm: 0.8125rem;
	--text-base: 0.9375rem;
	--text-md: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.375rem;
	--text-2xl: 1.75rem;
	--text-3xl: 2.125rem;
	--text-4xl: 2.75rem;

	--leading-tight: 1.2;
	--leading-snug: 1.35;
	--leading-normal: 1.6;
	--leading-relaxed: 1.7;

	--tracking-tight: -0.015em;
	--tracking-normal: 0;
	--tracking-wide: 0.02em;

	/* Layout */
	--container: 1120px;
	--container-narrow: 760px;
	--header-height: 60px;

	--focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
	--transition: 140ms cubic-bezier(0.2, 0, 0.2, 1);
}

@media (min-width: 768px) {
	:root {
		--text-3xl: 2.5rem;
		--text-4xl: 3.25rem;
		--header-height: 68px;
	}
}

/* Dark mode. Only the tokens change. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;

		--bg: #0d0f13;
		--surface: #14171d;
		--surface-subtle: #1a1e26;
		--surface-sunken: #1f242d;
		--ink: #f2f4f7;
		--ink-soft: #c3cad4;
		--muted: #8b93a1;
		--line: #262c36;
		--line-strong: #343c48;

		--accent: #7a95ff;
		--accent-strong: #9fb2ff;
		--accent-soft: #1b2440;
		--accent-ink: #0d0f13;
		--success: #5fd39b;
		--success-soft: #13291f;
		--warning: #e0b44e;
		--warning-soft: #2b2313;
		--danger: #ff8b80;
		--danger-soft: #2e1715;
		--neutral-soft: #1f242d;

		--shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.5);
		--shadow-raised: 0 2px 6px rgba(0, 0, 0, 0.4);
		--shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.6);

		--focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
	}
}

/* Explicit choice always wins over the system preference. */
:root[data-theme="dark"] {
	color-scheme: dark;

	--bg: #0d0f13;
	--surface: #14171d;
	--surface-subtle: #1a1e26;
	--surface-sunken: #1f242d;
	--ink: #f2f4f7;
	--ink-soft: #c3cad4;
	--muted: #8b93a1;
	--line: #262c36;
	--line-strong: #343c48;

	--accent: #7a95ff;
	--accent-strong: #9fb2ff;
	--accent-soft: #1b2440;
	--accent-ink: #0d0f13;
	--success: #5fd39b;
	--success-soft: #13291f;
	--warning: #e0b44e;
	--warning-soft: #2b2313;
	--danger: #ff8b80;
	--danger-soft: #2e1715;
	--neutral-soft: #1f242d;

	--shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.5);
	--shadow-raised: 0 2px 6px rgba(0, 0, 0, 0.4);
	--shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.6);

	--focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--transition: 0ms;
	}
}