@import "./fonts.css";

/* Design tokens + shared primitives. Component styles live in their .vue files. */

:root {
	--bg: #0b0b0c;
	--surface: #141416;
	--surface-2: #1c1c1f;
	--line: #262629;
	--line-strong: #3a3a3f;
	--text: #f2eee6;
	--text-2: #b8b3a8;
	--text-3: #77736b;
	/* Change --accent to re-theme; everything else derives from it. */
	--accent: #d7ff3b;
	--accent-ink: #0b0b0c;
	--accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
	--accent-hover: color-mix(in srgb, var(--accent) 80%, white);
	--radius: 4px;
	/* sticky header height; the docked panel and sticky table heads sit under it */
	--header-h: 57px;
	/* docked detail panel: --panel is the room it takes, 0 while closed */
	--panel-w: 460px;
	--panel: 0px;
	--font: "Inter Tight Variable", ui-sans-serif, system-ui, sans-serif;
	--font-display: "Big Shoulders Display Variable", "Inter Tight Variable", sans-serif;
	--font-mono: "JetBrains Mono Variable", ui-monospace, Menlo, monospace;
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	color-scheme: dark;
}

html.panel-open { --panel: var(--panel-w); }

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--accent-ink); }

button { font: inherit; color: inherit; }
svg { width: 1em; height: 1em; flex: none; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

/* The page itself has no visible scrollbar — <ScrollProgress> in the header shows position
   instead, and the layout no longer shifts by the scrollbar's width. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

/* Inner scroll areas (e.g. the drawer) get thin, themed scrollbars. */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
	background: var(--line-strong);
	border: 3px solid var(--bg);
	border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* Shared primitives */
.mono { font-family: var(--font-mono); }

.eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-3);
}

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 40px; padding: 0 16px;
	border: 1px solid var(--line-strong); border-radius: var(--radius);
	background: transparent; color: var(--text);
	font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
	text-decoration: none; cursor: pointer;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.btn:hover { border-color: var(--text-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }