@import "./app-modal.css";
@import "./toast.css";
@import "./palette-packs.css";

/* Navigator theme — same tokens as drbrianlambert.com.
   Palette primitives stay in this file. Components use semantic roles. */

:root {
	/* ---- Palette primitives ---- */
	--p-warm-white: #fafaf7;
	--p-white: #ffffff;
	--p-quiet: #f1f2ef;
	--p-border: #daddd8;
	--p-ink: #17191c;
	--p-gray: #656a70;
	--p-gray-soft: #9aa0a6;
	--p-charcoal: #1c2024;

	--p-deep: #1b1826;
	--p-deep-fg: #f4f4f1;
	--p-deep-muted: #9ba1a7;

	--p-night: #131117;
	--p-night-raised: #1b1922;
	--p-night-quiet: #211f2a;
	--p-night-sunken: #0d0c11;
	--p-night-border: #34313f;
	--p-night-fg: #edecea;
	--p-night-muted: #a3a0ad;

	--p-orange: #f25b35;
	--p-orange-deep: #d94828;
	--p-orange-lift: #ff7554;
	--p-purple: #4b2e83;
	--p-purple-soft: #7257a8;
	--p-purple-lift: #a78fd4;
	--p-blue: #1f5fa9;
	--p-blue-lift: #6fa9e6;
	--p-green: #4f745d;
	--p-green-lift: #82ac90;
	--p-danger: #a33b32;
	--p-danger-lift: #e8a39a;

	/* ---- Type ---- */
	--display:
		"Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--read: "Newsreader", Georgia, "Times New Roman", serif;
	--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--t-lg: clamp(1.35rem, 2.2vw, 2rem);
	--t-md: clamp(1.12rem, 1.35vw, 1.32rem);
	--t-base: 1.0625rem;
	--t-sm: 0.9375rem;
	--t-xs: 0.8125rem;
	--t-label: 0.6875rem;
	/* Transcript body — same scale as chrome (thread list ~0.9rem, topbar 0.92rem). */
	--t-chat: var(--t-sm);

	/* ---- Motion ---- */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur: 0.55s;

	/* ---- Chat column (ChatGPT / Claude-style centered thread) ---- */
	--chat-measure: 48rem;
	--rail-width: 260px;

	/* ---- Semantic roles (light default) ---- */
	color-scheme: light;

	--bg: var(--p-warm-white);
	--bg-quiet: var(--p-quiet);
	--bg-raised: var(--p-white);
	--fg: var(--p-ink);
	--fg-muted: var(--p-gray);
	--fg-placeholder: var(--p-gray-soft);
	--border: var(--p-border);
	--border-strong: var(--p-ink);

	--accent: var(--p-orange);
	--accent-strong: var(--p-orange-deep);
	--on-accent: var(--p-white);
	/* Derived from --accent so a data-palette remap paints the whole chrome. */
	--accent-ring: color-mix(in srgb, var(--accent) 12%, transparent);
	--accent-wash: color-mix(in srgb, var(--accent) 24%, transparent);
	/* Control fills: solid in light, translucent in dark so lit controls
	   read as glass over the night surface rather than painted blocks. */
	--accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
	--accent-fill: var(--accent);
	--accent-fill-fg: var(--on-accent);
	--accent-line: var(--accent);

	--think: var(--p-purple);
	--think-soft: var(--p-purple-soft);
	--confidence: var(--p-blue);
	--progress: var(--p-green);
	--danger: var(--p-danger);
	/* Legacy alias for --progress. Do not use in new code. */
	--ok: var(--p-green);

	--invert-bg: var(--p-deep);
	--invert-fg: var(--p-deep-fg);
	--invert-muted: var(--p-deep-muted);
	--invert-border: rgba(244, 244, 241, 0.16);
	--invert-quiet: rgba(244, 244, 241, 0.05);

	--shadow-sm: 0 1px 2px rgba(23, 25, 28, 0.03);
	--shadow-lg: 0 12px 32px -18px rgba(23, 25, 28, 0.22);
	--shadow-focus: 0 16px 40px -20px rgba(23, 25, 28, 0.28);

	--sidebar: var(--bg-quiet);
	--panel: var(--bg-raised);
	--user: var(--bg-quiet);
	--line: var(--border);
	--text: var(--fg);
	--mute: var(--fg-muted);
	--shadow: var(--shadow-lg);
}

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

		--bg: var(--p-night);
		--bg-quiet: var(--p-night-quiet);
		--bg-raised: var(--p-night-raised);
		--fg: var(--p-night-fg);
		--fg-muted: var(--p-night-muted);
		--fg-placeholder: var(--p-night-muted);
		--border: var(--p-night-border);
		--border-strong: var(--p-night-fg);

		--accent: var(--p-orange-lift);
		--accent-strong: var(--p-orange);
		--on-accent: #24120c;
		--accent-ring: color-mix(in srgb, var(--accent) 18%, transparent);
		--accent-wash: color-mix(in srgb, var(--accent) 28%, transparent);
		--accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
		--accent-fill: color-mix(in srgb, var(--accent) 32%, transparent);
		--accent-fill-fg: var(--accent);
		--accent-line: color-mix(in srgb, var(--accent) 55%, transparent);

		--think: var(--p-purple-lift);
		--think-soft: var(--p-purple-lift);
		--confidence: var(--p-blue-lift);
		--progress: var(--p-green-lift);
		--danger: var(--p-danger-lift);
		--ok: var(--p-green-lift);

		--invert-bg: var(--p-night-sunken);
		--invert-fg: var(--p-night-fg);
		--invert-muted: var(--p-night-muted);
		--invert-border: rgba(237, 236, 234, 0.14);
		--invert-quiet: rgba(237, 236, 234, 0.04);

		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
		--shadow-lg: 0 12px 32px -18px rgba(0, 0, 0, 0.75);
		--shadow-focus: 0 16px 40px -20px rgba(0, 0, 0, 0.85);

		--sidebar: var(--bg-quiet);
		--panel: var(--bg-raised);
		--user: var(--bg-quiet);
		--line: var(--border);
		--text: var(--fg);
		--mute: var(--fg-muted);
		--shadow: var(--shadow-lg);
	}
}

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

	--bg: var(--p-night);
	--bg-quiet: var(--p-night-quiet);
	--bg-raised: var(--p-night-raised);
	--fg: var(--p-night-fg);
	--fg-muted: var(--p-night-muted);
	--fg-placeholder: var(--p-night-muted);
	--border: var(--p-night-border);
	--border-strong: var(--p-night-fg);

	--accent: var(--p-orange-lift);
	--accent-strong: var(--p-orange);
	--on-accent: #24120c;
	--accent-ring: color-mix(in srgb, var(--accent) 18%, transparent);
	--accent-wash: color-mix(in srgb, var(--accent) 28%, transparent);
	--accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
	--accent-fill: color-mix(in srgb, var(--accent) 32%, transparent);
	--accent-fill-fg: var(--accent);
	--accent-line: color-mix(in srgb, var(--accent) 55%, transparent);

	--think: var(--p-purple-lift);
	--think-soft: var(--p-purple-lift);
	--confidence: var(--p-blue-lift);
	--progress: var(--p-green-lift);
	--danger: var(--p-danger-lift);
	--ok: var(--p-green-lift);

	--invert-bg: var(--p-night-sunken);
	--invert-fg: var(--p-night-fg);
	--invert-muted: var(--p-night-muted);
	--invert-border: rgba(237, 236, 234, 0.14);
	--invert-quiet: rgba(237, 236, 234, 0.04);

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-lg: 0 12px 32px -18px rgba(0, 0, 0, 0.75);
	--shadow-focus: 0 16px 40px -20px rgba(0, 0, 0, 0.85);

	--sidebar: var(--bg-quiet);
	--panel: var(--bg-raised);
	--user: var(--bg-quiet);
	--line: var(--border);
	--text: var(--fg);
	--mute: var(--fg-muted);
	--shadow: var(--shadow-lg);
}

.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-width: 2.25rem;
	height: 2.25rem;
	flex: none;
	padding: 0 0.65rem;
	margin-left: auto;
	background: transparent;
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--fg-muted);
	cursor: pointer;
	transition:
		color 0.3s var(--ease),
		border-color 0.3s var(--ease);
}

.theme-toggle:hover {
	color: var(--accent);
	border-color: var(--accent);
}

.theme-toggle:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

.theme-toggle__icons {
	display: grid;
	place-items: center;
	width: 1.125rem;
	height: 1.125rem;
}

.theme-toggle__icons > svg {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	opacity: 0;
	transform: scale(0.7);
	transition:
		opacity 0.3s var(--ease),
		transform 0.4s var(--ease-out);
}

.theme-toggle[data-theme-mode="light"] .theme-toggle__sun,
.theme-toggle[data-theme-mode="dark"] .theme-toggle__moon,
.theme-toggle[data-theme-mode="system"] .theme-toggle__system {
	opacity: 1;
	transform: none;
}

.theme-toggle__current {
	font-family: var(--mono);
	font-size: 0.65rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
}

/* System mode shows the monitor icon alone, so collapse the pill to a circle
   rather than leaving the label's padding behind as dead space. */
.theme-toggle[data-theme-mode="system"] .theme-toggle__current {
	display: none;
}

.theme-toggle[data-theme-mode="system"] {
	gap: 0;
	padding: 0;
	width: 2.25rem;
}

@media (max-width: 640px) {
	.theme-toggle__current {
		display: none;
	}

	.theme-toggle {
		padding: 0;
		width: 2.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.theme-toggle,
	.theme-toggle__icons > svg {
		transition: none;
	}
}