/*
 * c12o design tokens — SINGLE SOURCE OF TRUTH for cross-format visual identity.
 *
 * Consumed by:
 *   - public/_shared/app-base.css      (plain HTML memos / interactive apps)
 *   - public/_shared/reveal-c12o.css   (Reveal.js decks)
 *   - _src/themes/marp.css             (Marp slides; concatenated at build time)
 *
 * Derived from the blog's own palette (src/styles/variables.styl, hue = 250).
 * Change a value here and every format moves together. Do NOT fork these
 * values into the per-format themes — reference the variables instead.
 *
 * Two layers of tokens:
 *   1. Adaptive (--bg/--text/...) flip with light/dark. Use for memos & apps.
 *   2. Fixed dark (--slide-*) never flip. Use for slides so projection is stable.
 */

:root {
	--hue: 250;

	/* ---- adaptive surfaces & text (light defaults) ---- */
	--bg: oklch(0.96 0.008 var(--hue));
	--surface: #ffffff;
	--surface-2: oklch(0.98 0.006 var(--hue));
	--text: oklch(0.27 0.02 var(--hue));
	--text-muted: oklch(0.52 0.02 var(--hue));
	--line: oklch(0 0 0 / 0.1);

	/* ---- brand ---- */
	--primary: oklch(0.62 0.16 var(--hue));
	--primary-weak: oklch(0.93 0.045 var(--hue));
	--accent: oklch(0.62 0.16 var(--hue));

	/* ---- code (always dark-on-dark, matches blog codeblocks) ---- */
	--code-bg: oklch(0.17 0.015 var(--hue));
	--code-fg: oklch(0.92 0.02 var(--hue));

	/* ---- fixed dark palette for slides (does NOT flip) ---- */
	--slide-bg: oklch(0.17 0.015 var(--hue));
	--slide-bg-2: oklch(0.22 0.018 var(--hue));
	--slide-fg: oklch(0.94 0.01 var(--hue));
	--slide-fg-muted: oklch(0.72 0.02 var(--hue));
	--slide-accent: oklch(0.78 0.17 var(--hue));
	--slide-line: oklch(1 0 0 / 0.12);

	/* ---- typography ---- */
	--font-sans: "Roboto", "Noto Sans JP", system-ui, -apple-system, sans-serif;
	--font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace,
		SFMono-Regular, Menlo, Consolas, monospace;

	/* ---- shape & rhythm ---- */
	--radius: 1rem;
	--radius-sm: 0.5rem;
	--space: 8px;
	--shadow: 0 2px 12px oklch(0 0 0 / 0.08);
}

/* Adaptive dark — for memos/apps that follow the OS or a .dark class. */
@media (prefers-color-scheme: dark) {
	:root:not(.light) {
		--bg: oklch(0.16 0.014 var(--hue));
		--surface: oklch(0.23 0.015 var(--hue));
		--surface-2: oklch(0.2 0.015 var(--hue));
		--text: oklch(0.92 0.01 var(--hue));
		--text-muted: oklch(0.7 0.02 var(--hue));
		--line: oklch(1 0 0 / 0.1);
		--primary: oklch(0.78 0.17 var(--hue));
		--primary-weak: oklch(0.4 0.08 var(--hue));
		--accent: oklch(0.78 0.17 var(--hue));
	}
}

/* Explicit dark via class, for parity with the blog's manual toggle. */
:root.dark {
	--bg: oklch(0.16 0.014 var(--hue));
	--surface: oklch(0.23 0.015 var(--hue));
	--surface-2: oklch(0.2 0.015 var(--hue));
	--text: oklch(0.92 0.01 var(--hue));
	--text-muted: oklch(0.7 0.02 var(--hue));
	--line: oklch(1 0 0 / 0.1);
	--primary: oklch(0.78 0.17 var(--hue));
	--primary-weak: oklch(0.4 0.08 var(--hue));
	--accent: oklch(0.78 0.17 var(--hue));
}