/*
 * Design tokens. Everything in app.css reads these variables, so a customer fork restyles the whole
 * app by overriding them in /custom/theme.css (loaded after this file), e.g.
 *
 *   :root { --accent-h: 150; --radius: 0.25rem; --font-sans: "Avenir Next", system-ui, sans-serif; }
 */

:root {
	color-scheme: light dark;

	/* Brand: one hue drives the accent family. */
	--accent-h: 255;
	--accent: oklch(0.52 0.15 var(--accent-h));
	--accent-strong: oklch(0.45 0.16 var(--accent-h));
	--accent-soft: oklch(0.95 0.03 var(--accent-h));
	--accent-ink: oklch(0.99 0 0);

	/* Surfaces, warm neutral. */
	--bg: oklch(0.985 0.003 85);
	--surface: oklch(1 0 0);
	--surface-2: oklch(0.965 0.004 85);
	--surface-3: oklch(0.93 0.005 85);
	--sidebar: oklch(0.97 0.004 85);
	--border: oklch(0.9 0.005 85);
	--border-strong: oklch(0.82 0.006 85);
	--ink: oklch(0.22 0.01 85);
	--ink-2: oklch(0.42 0.01 85);
	--ink-3: oklch(0.56 0.01 85);

	--user-bubble: oklch(0.94 0.025 var(--accent-h));
	--user-ink: var(--ink);

	--ok: oklch(0.6 0.14 150);
	--warn: oklch(0.72 0.15 75);
	--danger: oklch(0.55 0.19 25);
	--danger-soft: oklch(0.96 0.03 25);

	--code-bg: oklch(0.965 0.004 85);
	--code-ink: oklch(0.3 0.01 85);
	--hl-keyword: oklch(0.5 0.17 300);
	--hl-string: oklch(0.5 0.13 150);
	--hl-number: oklch(0.55 0.15 50);
	--hl-comment: oklch(0.6 0.01 85);
	--hl-title: oklch(0.5 0.15 255);
	--hl-attr: oklch(0.55 0.13 200);

	/* Type: large by default, the users are not all young. */
	--font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
	--text-xs: 0.8125rem;
	--text-sm: 0.9375rem;
	--text-md: 1.0625rem;
	--text-lg: 1.25rem;
	--text-xl: 1.625rem;
	--leading: 1.6;

	/* Shape and space (4px base). */
	--radius-sm: 0.5rem;
	--radius: 0.75rem;
	--radius-lg: 1.25rem;
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--sidebar-width: 17.5rem;
	--column: 47rem;

	--shadow-sm: 0 1px 2px oklch(0.2 0.01 85 / 0.06);
	--shadow: 0 1px 2px oklch(0.2 0.01 85 / 0.05), 0 8px 24px -8px oklch(0.2 0.01 85 / 0.12);
	--shadow-lg: 0 2px 6px oklch(0.2 0.01 85 / 0.06), 0 24px 48px -12px oklch(0.2 0.01 85 / 0.2);
	--focus: 0 0 0 3px oklch(0.52 0.15 var(--accent-h) / 0.35);

	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--accent: oklch(0.72 0.13 var(--accent-h));
		--accent-strong: oklch(0.8 0.12 var(--accent-h));
		--accent-soft: oklch(0.3 0.05 var(--accent-h));
		--accent-ink: oklch(0.18 0.02 var(--accent-h));

		--bg: oklch(0.19 0.005 85);
		--surface: oklch(0.225 0.006 85);
		--surface-2: oklch(0.255 0.006 85);
		--surface-3: oklch(0.3 0.007 85);
		--sidebar: oklch(0.205 0.005 85);
		--border: oklch(0.31 0.007 85);
		--border-strong: oklch(0.4 0.008 85);
		--ink: oklch(0.94 0.005 85);
		--ink-2: oklch(0.78 0.008 85);
		--ink-3: oklch(0.64 0.008 85);

		--user-bubble: oklch(0.31 0.045 var(--accent-h));

		--danger: oklch(0.7 0.16 25);
		--danger-soft: oklch(0.3 0.06 25);

		--code-bg: oklch(0.17 0.005 85);
		--code-ink: oklch(0.88 0.005 85);
		--hl-keyword: oklch(0.75 0.13 300);
		--hl-string: oklch(0.78 0.12 150);
		--hl-number: oklch(0.8 0.12 60);
		--hl-comment: oklch(0.6 0.01 85);
		--hl-title: oklch(0.78 0.11 255);
		--hl-attr: oklch(0.78 0.1 200);

		--shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
		--shadow: 0 1px 2px oklch(0 0 0 / 0.3), 0 8px 24px -8px oklch(0 0 0 / 0.5);
		--shadow-lg: 0 2px 6px oklch(0 0 0 / 0.3), 0 24px 48px -12px oklch(0 0 0 / 0.6);
	}
}