/* ===========================================================================
   Bot Hub ACP — design tokens
   Modelled on ~/git/onetime-pad/public/styles/site.css: theme-independent
   scales in :root, colour ramps declared per theme, dark first. Only colour
   tokens are overridden by theme, so a component never has to know which
   theme is live.
   =========================================================================== */

:root {
	/* --- Radius ----------------------------------------------------------- */
	--r-xs: 4px;
	--r-sm: 6px;
	--r-md: 8px;
	--r-lg: 10px;
	--r-xl: 12px;
	--r-2xl: 14px;
	--r-pill: 999px;

	/* --- Elevation -------------------------------------------------------- */
	--shadow-menu: 0 10px 24px rgba(0, 0, 0, 0.35);
	--shadow-modal: 0 14px 30px rgba(0, 0, 0, 0.42);
	--shadow-lift: 0 6px 18px rgba(0, 0, 0, 0.3);

	/* --- Fluid type ------------------------------------------------------- */
	--fs-title: clamp(1.2rem, calc(1.08rem + 0.45vw), 1.5rem);
	--fs-subtitle: clamp(0.95rem, calc(0.88rem + 0.22vw), 1.1rem);
	--fs-control: clamp(0.92rem, calc(0.86rem + 0.18vw), 1rem);
	--fs-body: clamp(0.94rem, calc(0.88rem + 0.2vw), 1.02rem);
	--fs-meta-xs: clamp(0.72rem, calc(0.68rem + 0.12vw), 0.8rem);
	--fs-meta-sm: clamp(0.78rem, calc(0.73rem + 0.14vw), 0.86rem);
	--fs-meta-md: clamp(0.84rem, calc(0.78rem + 0.16vw), 0.92rem);
	--fs-chip: clamp(0.7rem, calc(0.66rem + 0.12vw), 0.78rem);

	/* --- Font stacks (system only — no webfonts, no npm frontend deps) ----- */
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", Menlo, Consolas, monospace;
	--font-body: var(--font-sans);

	/* --- Spacing ---------------------------------------------------------- */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;

	/* --- Layout metrics --------------------------------------------------- */
	/* The minimum comfortable touch target. Every interactive element in the
	   ACP is at least this tall, because every one of them has to be hittable
	   with a thumb — mobile is a first-class target here, not a fallback. */
	--tap: 44px;
	--header-height: 56px;
	--content-max: 1100px;
	/* Safe areas, read straight from the UA. `viewport-fit=cover` in the shell's
	   viewport meta is what makes these non-zero on a notched phone. */
	--safe-top: env(safe-area-inset-top, 0px);
	--safe-bottom: env(safe-area-inset-bottom, 0px);
	--safe-left: env(safe-area-inset-left, 0px);
	--safe-right: env(safe-area-inset-right, 0px);
}

/* Dark is the default: the ACP is an operations console, most often opened on a
   phone at night to find out why a bot stopped talking. */
:root,
html[data-theme="dark"] {
	color-scheme: dark;
	--bg: #0f1511;
	--bg2: #161d18;
	--bg3: #202a23;
	--border: #2e3a32;
	--border-strong: #3c4b41;
	--text: #e3ebe5;
	--muted: #93a597;
	--accent: #7cb389;
	--accent-fg: #0f1511;
	--danger: #e5705a;
	--danger-fg: #1a0f0c;
	--success: #63c184;
	--warn: #e0b48a;
	--inline-code-bg: #202a23;
	--overlay: rgba(0, 0, 0, 0.55);
}

html[data-theme="light"] {
	color-scheme: light;
	--bg: #ffffff;
	--bg2: #f2f6f2;
	--bg3: #e6ede7;
	--border: #d2ddd5;
	--border-strong: #b6c6ba;
	--text: #16201a;
	--muted: #55665b;
	--accent: #2f6b45;
	--accent-fg: #ffffff;
	--danger: #a34a2e;
	--danger-fg: #ffffff;
	--success: #1a7f37;
	--warn: #8a5a20;
	--inline-code-bg: #e6ede7;
	--overlay: rgba(15, 21, 17, 0.45);
}