/*
 * Design tokens of the one frame every service lives in (整合第 3 步, 2026-10-18). Everything else uses these and
 * nothing else: colors, depth (one light from the top left, five heights), corners, and motion (how long, how it
 * eases). Taken from Paneo's base.css + shell.css + depth.css, which had them from GeoI.
 *
 * Dark follows the system unless one was picked (html[data-theme]). The dark values are written twice, under the
 * system's dark and under html[data-theme="dark"]; change both.
 */
:root {
	/* ---- colors ---- */
	--bg: #ffffff; /* the page behind the floating cards */
	--surface: #ffffff; /* cards, windows */
	--surface-2: #f3f4f6; /* hover, a sunken row */
	--card-bg: #fcfcfd; /* the sidebar's cards */
	--sb-btn-bg: #fff; /* the sidebar's raised buttons (a service, 设置): face, under the pointer, pressed in */
	--sb-btn-hover: #f6f7f9;
	--sb-btn-sunk: #eceef2;
	--border: #e5e7eb;
	--border-strong: #d1d5db;
	--text: #1f2937;
	--text-strong: #111827;
	--muted: #6b7280;
	--faint: #9ca3af;
	--accent: #111827;
	--accent-text: #ffffff;
	--accent-hover: #374151;
	--danger: #dc2626;
	--danger-bg: #fef2f2;
	--ok: #15803d;
	--ok-bg: #dcfce7;
	--warn: #a16207;
	--warn-bg: #fef9c3;
	--mark: #3c78d8; /* something not as it starts (a search's conditions set), a dot of news */
	--focus-ring: #e5e7eb;

	/* ---- depth ----
	   height 1  cards resting on the page (settings cards, bubbles)
	   height 2  floating a little (sidebar cards, buttons, the avatar)
	   height 3  windows grown out of a button, the side card, toasts
	   height 4  a window that asks something (a dialog) */
	--depth-ink: 15 23 42;
	--elev-1: 0.5px 1px 2px rgb(var(--depth-ink) / 0.06), 1px 3px 8px rgb(var(--depth-ink) / 0.05);
	--elev-2: 0.5px 1px 2px rgb(var(--depth-ink) / 0.08), 2px 6px 16px rgb(var(--depth-ink) / 0.08);
	--elev-3: 1px 2px 4px rgb(var(--depth-ink) / 0.08), 4px 14px 32px rgb(var(--depth-ink) / 0.14);
	--elev-4: 1px 3px 6px rgb(var(--depth-ink) / 0.10), 8px 28px 64px rgb(var(--depth-ink) / 0.22);
	--edge-light: inset 0 1px 0 rgb(255 255 255 / 0.9); /* the lit top edge of something raised */
	--edge-dark: inset 0 -1px 0 rgb(var(--depth-ink) / 0.05);
	--edge-top: #eceef2; /* border colors: lighter on top, darker below */
	--edge-bottom: #d3d8df;
	--sunken: inset 0.5px 1px 2px rgb(var(--depth-ink) / 0.07); /* a text field */
	--face: linear-gradient(to bottom, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0) 70%); /* a raised button's sheen */
	--face-solid: linear-gradient(to bottom, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0) 60%);
	--btn-solid-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0.5px 1px 2px rgb(var(--depth-ink) / 0.22), 1px 3px 8px rgb(var(--depth-ink) / 0.12);
	--btn-pressed: inset 0.5px 1px 3px rgb(var(--depth-ink) / 0.18);
	--card-shadow: var(--edge-light), var(--edge-dark), var(--elev-2);
	--window-shadow: var(--edge-light), var(--elev-3);

	/* the backdrop behind a window (设置 › 外观 › 进阶: none / dim / blur, html[data-backdrop]) */
	--veil-dim: rgb(0 0 0 / 0.18);

	/* a segmented choice: a groove a shade deeper than the card, a raised thumb lighter than it */
	--seg-groove: #e8eaee;
	--seg-thumb: #fff;
	--seg-text: #6b7280;
	--seg-text-on: var(--text-strong);
	--seg-groove-shadow: inset 0.5px 1.5px 3px rgb(var(--depth-ink) / 0.14), 0 1px 0 rgb(255 255 255 / 0.8);
	--seg-thumb-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgb(var(--depth-ink) / 0.10), 0.5px 1.5px 2px rgb(var(--depth-ink) / 0.20), 1px 3px 6px rgb(var(--depth-ink) / 0.10);
	/* a switch: a deep groove shaded inside its top edge, a domed knob lit from the top left */
	--switch-groove: var(--border-strong);
	--switch-groove-on: var(--accent);
	--switch-groove-shade: rgb(0 0 0 / 0.06);
	--switch-groove-shade-on: rgb(0 0 0 / 0.35);
	--switch-groove-shadow: inset 0.5px 1.5px 3px rgb(var(--depth-ink) / 0.28), inset 0 -1px 0 rgb(255 255 255 / 0.35), 0 1px 0 rgb(255 255 255 / 0.8);
	--switch-knob: radial-gradient(circle at 35% 28%, #fff 0, #fff 30%, #eceef2 100%);
	--switch-knob-shadow: inset 0 1px 0 #fff, inset 0 -1px 1px rgb(var(--depth-ink) / 0.10), 0 0 0 0.5px rgb(var(--depth-ink) / 0.14), 0.5px 1.5px 2px rgb(var(--depth-ink) / 0.28), 1.5px 3px 6px rgb(var(--depth-ink) / 0.14);
	/* a well sunk into the page (a composer, a disabled solid button) */
	--well-bg: #f3f4f6;
	--well-shadow: inset 1px 2px 5px rgb(var(--depth-ink) / 0.13), inset 0 -1px 0 rgb(255 255 255 / 0.9), 0 1px 0 rgb(255 255 255 / 0.9);
	--well-shadow-focus: inset 1.5px 3px 7px rgb(var(--depth-ink) / 0.18), inset 0 -1px 0 rgb(255 255 255 / 0.9), 0 1px 0 rgb(255 255 255 / 0.9);
	--well-top: #d3d8df;
	--well-bottom: #f3f4f6;
	--veil-blur: 2px;

	/* ---- shape ---- */
	--radius-sm: 8px; /* rows, small buttons */
	--radius: 12px; /* fields, menus' rows */
	--radius-card: 18px; /* cards, windows */
	--sb-width: 300px;
	--gap: 10px; /* between the floating cards and the window's edges */

	/* ---- type ---- */
	--font: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
	--mono: ui-monospace, "SF Mono", "Cascadia Mono", "Noto Sans Mono", monospace;
	--ui-scale: 1; /* the text size setting (html[data-font-size]) */

	/* ---- motion: every animation takes one of these (js/lib/motion.js reads the same numbers) ---- */
	--dur-quick: 150ms; /* hover, press, a color */
	--dur: 280ms; /* something shown or hidden in place */
	--dur-grow: 340ms; /* a button growing into its window */
	--dur-shrink: 220ms; /* the window going back into its button */
	--ease: cubic-bezier(0.65, 0, 0.35, 1); /* in place */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* arriving */
	--ease-in: cubic-bezier(0.55, 0, 0.75, 0.3); /* leaving */
	--ease-grow: cubic-bezier(0.34, 1.25, 0.64, 1); /* arriving with a small overshoot */

	color-scheme: light;
}

:root[data-font-size="medium"] {
	--ui-scale: 1.125;
}
:root[data-font-size="large"] {
	--ui-scale: 1.25;
}

@media (max-width: 767px) {
	:root {
		--gap: 8px;
	}
	:root[data-font-size="small"] {
		--ui-scale: 0.9;
	}
	:root[data-font-size="medium"] {
		--ui-scale: 1;
	}
	:root[data-font-size="large"] {
		--ui-scale: 1.125;
	}
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #111827;
		--surface: #1f2937;
		--surface-2: #374151;
		--card-bg: #1a2434;
		--sb-btn-bg: #243045;
		--sb-btn-hover: #2a374e;
		--sb-btn-sunk: #121a26;
		--border: #374151;
		--border-strong: #4b5563;
		--text: #e5e7eb;
		--text-strong: #f9fafb;
		--muted: #9ca3af;
		--faint: #6b7280;
		--accent: #f9fafb;
		--accent-text: #111827;
		--accent-hover: #e5e7eb;
		--danger: #f87171;
		--danger-bg: #450a0a;
		--ok: #4ade80;
		--ok-bg: #14532d;
		--warn: #facc15;
		--warn-bg: #422006;
		--mark: #6a9ff0; /* something not as it starts (a search's conditions set), a dot of news */
		--focus-ring: #374151;
		--depth-ink: 0 0 0;
		--elev-1: 0.5px 1px 2px rgb(0 0 0 / 0.30), 1px 3px 8px rgb(0 0 0 / 0.22);
		--elev-2: 0.5px 1px 2px rgb(0 0 0 / 0.40), 2px 6px 16px rgb(0 0 0 / 0.32);
		--elev-3: 1px 2px 4px rgb(0 0 0 / 0.45), 4px 14px 32px rgb(0 0 0 / 0.50);
		--elev-4: 1px 3px 6px rgb(0 0 0 / 0.50), 8px 28px 64px rgb(0 0 0 / 0.60);
		--edge-light: inset 0 1px 0 rgb(255 255 255 / 0.045);
		--edge-dark: inset 0 -1px 0 rgb(0 0 0 / 0.25);
		--edge-top: #313c4d;
		--edge-bottom: #1c2533;
		--sunken: inset 0.5px 1px 3px rgb(0 0 0 / 0.35);
		--face: linear-gradient(to bottom, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0) 70%);
		--face-solid: linear-gradient(to bottom, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0) 60%);
		--btn-solid-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), 0.5px 1px 2px rgb(0 0 0 / 0.5), 1px 3px 8px rgb(0 0 0 / 0.35);
		--btn-pressed: inset 0.5px 1px 3px rgb(0 0 0 / 0.45);
		--seg-groove: #141b27;
		--seg-thumb: #4b5563;
		--seg-text: #a3acb9;
		--seg-text-on: #fff;
		--seg-groove-shadow: inset 0.5px 1.5px 3px rgb(0 0 0 / 0.55), 0 1px 0 rgb(255 255 255 / 0.05);
		--seg-thumb-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 -1px 0 rgb(0 0 0 / 0.2), 0.5px 1.5px 2px rgb(0 0 0 / 0.5), 1px 3px 6px rgb(0 0 0 / 0.35);
		--switch-groove: #3a4556;
		--switch-groove-on: #cbd5e1;
		--switch-groove-shade: rgb(0 0 0 / 0.35);
		--switch-groove-shade-on: rgb(0 0 0 / 0.45);
		--switch-groove-shadow: inset 0.5px 1.5px 3px rgb(0 0 0 / 0.6), inset 0 -1px 0 rgb(255 255 255 / 0.06), 0 1px 0 rgb(255 255 255 / 0.06);
		--switch-knob: radial-gradient(circle at 35% 28%, #f3f4f6 0, #d1d5db 45%, #9ca3af 100%);
		--switch-knob-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), inset 0 -1px 1px rgb(0 0 0 / 0.25), 0.5px 1.5px 2px rgb(0 0 0 / 0.6), 1.5px 3px 6px rgb(0 0 0 / 0.45);
		--well-bg: #0c111b;
		--well-shadow: inset 1px 2px 6px rgb(0 0 0 / 0.6), inset 0 -1px 0 rgb(255 255 255 / 0.04), 0 1px 0 rgb(255 255 255 / 0.06);
		--well-shadow-focus: inset 1.5px 3px 9px rgb(0 0 0 / 0.75), inset 0 -1px 0 rgb(255 255 255 / 0.05), 0 1px 0 rgb(255 255 255 / 0.07);
		--well-top: #05080e;
		--well-bottom: #273244;
		--veil-dim: rgb(0 0 0 / 0.4);
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--bg: #111827;
	--surface: #1f2937;
	--surface-2: #374151;
	--card-bg: #1a2434;
	--sb-btn-bg: #243045;
	--sb-btn-hover: #2a374e;
	--sb-btn-sunk: #121a26;
	--border: #374151;
	--border-strong: #4b5563;
	--text: #e5e7eb;
	--text-strong: #f9fafb;
	--muted: #9ca3af;
	--faint: #6b7280;
	--accent: #f9fafb;
	--accent-text: #111827;
	--accent-hover: #e5e7eb;
	--danger: #f87171;
	--danger-bg: #450a0a;
	--ok: #4ade80;
	--ok-bg: #14532d;
	--warn: #facc15;
	--warn-bg: #422006;
	--mark: #6a9ff0; /* something not as it starts (a search's conditions set), a dot of news */
	--focus-ring: #374151;
	--depth-ink: 0 0 0;
	--elev-1: 0.5px 1px 2px rgb(0 0 0 / 0.30), 1px 3px 8px rgb(0 0 0 / 0.22);
	--elev-2: 0.5px 1px 2px rgb(0 0 0 / 0.40), 2px 6px 16px rgb(0 0 0 / 0.32);
	--elev-3: 1px 2px 4px rgb(0 0 0 / 0.45), 4px 14px 32px rgb(0 0 0 / 0.50);
	--elev-4: 1px 3px 6px rgb(0 0 0 / 0.50), 8px 28px 64px rgb(0 0 0 / 0.60);
	--edge-light: inset 0 1px 0 rgb(255 255 255 / 0.045);
	--edge-dark: inset 0 -1px 0 rgb(0 0 0 / 0.25);
	--edge-top: #313c4d;
	--edge-bottom: #1c2533;
	--sunken: inset 0.5px 1px 3px rgb(0 0 0 / 0.35);
	--face: linear-gradient(to bottom, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0) 70%);
	--face-solid: linear-gradient(to bottom, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0) 60%);
	--btn-solid-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), 0.5px 1px 2px rgb(0 0 0 / 0.5), 1px 3px 8px rgb(0 0 0 / 0.35);
	--btn-pressed: inset 0.5px 1px 3px rgb(0 0 0 / 0.45);
	--seg-groove: #141b27;
	--seg-thumb: #4b5563;
	--seg-text: #a3acb9;
	--seg-text-on: #fff;
	--seg-groove-shadow: inset 0.5px 1.5px 3px rgb(0 0 0 / 0.55), 0 1px 0 rgb(255 255 255 / 0.05);
	--seg-thumb-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 -1px 0 rgb(0 0 0 / 0.2), 0.5px 1.5px 2px rgb(0 0 0 / 0.5), 1px 3px 6px rgb(0 0 0 / 0.35);
	--switch-groove: #3a4556;
	--switch-groove-on: #cbd5e1;
	--switch-groove-shade: rgb(0 0 0 / 0.35);
	--switch-groove-shade-on: rgb(0 0 0 / 0.45);
	--switch-groove-shadow: inset 0.5px 1.5px 3px rgb(0 0 0 / 0.6), inset 0 -1px 0 rgb(255 255 255 / 0.06), 0 1px 0 rgb(255 255 255 / 0.06);
	--switch-knob: radial-gradient(circle at 35% 28%, #f3f4f6 0, #d1d5db 45%, #9ca3af 100%);
	--switch-knob-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), inset 0 -1px 1px rgb(0 0 0 / 0.25), 0.5px 1.5px 2px rgb(0 0 0 / 0.6), 1.5px 3px 6px rgb(0 0 0 / 0.45);
	--well-bg: #0c111b;
	--well-shadow: inset 1px 2px 6px rgb(0 0 0 / 0.6), inset 0 -1px 0 rgb(255 255 255 / 0.04), 0 1px 0 rgb(255 255 255 / 0.06);
	--well-shadow-focus: inset 1.5px 3px 9px rgb(0 0 0 / 0.75), inset 0 -1px 0 rgb(255 255 255 / 0.05), 0 1px 0 rgb(255 255 255 / 0.07);
	--well-top: #05080e;
	--well-bottom: #273244;
	--veil-dim: rgb(0 0 0 / 0.4);
	color-scheme: dark;
}

/* 设置 › 外观 › 动画「减少」, or the system's: everything that moves just appears (js/lib/motion.js does the same) */
:root[data-motion="reduce"] {
	--dur-quick: 1ms;
	--dur: 1ms;
	--dur-grow: 1ms;
	--dur-shrink: 1ms;
}
@media (prefers-reduced-motion: reduce) {
	:root:not([data-motion="full"]) {
		--dur-quick: 1ms;
		--dur: 1ms;
		--dur-grow: 1ms;
		--dur-shrink: 1ms;
	}
}