/* Fonts and colors come from the shared That's it theme; only kit tokens live here. */
/* That's it — shared style: fonts and color tokens for thatsit.app apps.
   Cloned from @thatsit/ui (src/styles/root.css). Plain CSS, no build step;
   font URLs are relative, so the folder works wherever it's served or copied.
   Dark mode follows the system unless <html data-theme="light|dark"> says otherwise. */

@font-face { font-family: "Inter"; src: url("./fonts/Inter.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("./fonts/Inter-Italic.ttf") format("truetype"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("./fonts/Nunito.ttf") format("truetype"); font-weight: 200 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("./fonts/Nunito-Italic.ttf") format("truetype"); font-weight: 200 1000; font-style: italic; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("./fonts/WorkSans.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("./fonts/WorkSans-Italic.ttf") format("truetype"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
	/* Brand colors (same in both themes) */
	--primary: #ffaa00;
	--secondary: #0032a0;
	--accent: #e4002b;
	--success: #00843d;

	--font-display: "Nunito", ui-rounded, system-ui, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, sans-serif;
	--font-quote: "Work Sans", system-ui, sans-serif;
	--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	/* Light theme */
	--bg: #f1f1f1;
	--surface: #aaaaaa;
	--text-primary: #000000;
	--text-secondary: #555555;
	--text-muted: #64748b;
	--border-color: #555555;
	--underline-color: #646464;
	--shadow-color: rgba(0, 0, 0, 0.1);
	--code-bg: #f1f5f9;
	--ring: rgba(255, 170, 0, 0.3);
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #171717;
		--surface: #555555;
		--text-primary: #ffffff;
		--text-secondary: #a1a1aa;
		--text-muted: #94a3b8;
		--border-color: #555555;
		--underline-color: #646464;
		--shadow-color: rgba(0, 0, 0, 0.3);
		--code-bg: #1e293b;
		--ring: rgba(255, 170, 0, 0.4);
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--bg: #171717;
	--surface: #555555;
	--text-primary: #ffffff;
	--text-secondary: #a1a1aa;
	--text-muted: #94a3b8;
	--border-color: #555555;
	--underline-color: #646464;
	--shadow-color: rgba(0, 0, 0, 0.3);
	--code-bg: #1e293b;
	--ring: rgba(255, 170, 0, 0.4);
	color-scheme: dark;
}


:root {
	--panel: #e7e7e7;
	--line: #cfcfcf;
	--overlay: rgba(0, 0, 0, 0.45);
	--radius: 0.15rem;
	--sidebar-w: 280px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) { --panel: #1f1f1f; --line: #333333; --overlay: rgba(0, 0, 0, 0.6); }
}
:root[data-theme="dark"] { --panel: #1f1f1f; --line: #333333; --overlay: rgba(0, 0, 0, 0.6); }

*, *::before, *::after { box-sizing: border-box; }
/* App shells opt in with <html data-shell>: the document never scrolls or bounces (iOS
   would drag the header with it); only the app's own panes scroll. The app host sizes
   itself from --app-top/--app-h (viewport.ts). Document-style pages omit the attribute
   and scroll normally. */
:root[data-shell], :root[data-shell] body { height: 100%; overflow: hidden; overscroll-behavior: none; }
:root { --safe-bottom: env(safe-area-inset-bottom); }
:root[data-keyboard] { --safe-bottom: 0px; } /* the keyboard covers the home indicator */
html { background: var(--bg); }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.55;
	-webkit-text-size-adjust: 100%;
	transition: background-color 0.3s ease, color 0.3s ease;
}