/*
 * Blaj Fasteners look, after https://www.blaj-fasteners.com: white pages, Blaj cyan, steel greys,
 * square corners, heavy uppercase headings and labels. Loaded after the blueprint styles, so
 * anything here wins. Mostly token overrides; the component rules below only add the Blaj shape
 * (square, uppercase, bars) and stay on blueprint class names.
 *
 * Brand: cyan #00adef, steel grey #626a6e / #656263, navy #013f66.
 * White on #00adef is too faint for text, so buttons and links use the darker cyan --blaj-cyan-ink.
 */

:root {
	--blaj-cyan: #00adef;
	--blaj-cyan-ink: #0079ad;
	--blaj-navy: #013f66;
	--blaj-steel: #626a6e;
	--blaj-steel-dark: #4a5054;
	--blaj-block: #656263;

	--accent: var(--blaj-cyan-ink);
	--accent-strong: #00668f;
	--accent-soft: #e6f7fe;
	--accent-ink: #ffffff;

	--bg: #ffffff;
	--surface: #ffffff;
	--surface-2: #f5f5f5;
	--surface-3: #e9eaea;
	--sidebar: #f5f5f5;
	--border: #e3e4e5;
	--border-strong: #d6d7d7;
	--ink: #2f3436;
	--ink-2: var(--blaj-steel);
	--ink-3: #81888b;

	--user-bubble: #e6f7fe;
	--user-ink: #1f2a30;

	--code-bg: #f5f5f5;
	--hl-title: var(--blaj-cyan-ink);
	--hl-attr: var(--blaj-navy);

	--font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;

	--radius-sm: 0;
	--radius: 0;
	--radius-lg: 0;

	--shadow-sm: none;
	--shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 6px 18px -10px rgba(1, 63, 102, 0.25);
	--shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.06), 0 24px 48px -16px rgba(1, 63, 102, 0.3);
	--focus: 0 0 0 3px rgba(0, 173, 239, 0.4);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		/* Navy-based dark theme: the Blaj navy as the base, cyan stays the accent. */
		--accent: var(--blaj-cyan);
		--accent-strong: #33c1f5;
		--accent-soft: #0a3a5a;
		--accent-ink: #00283f;

		--bg: #011f33;
		--surface: #022a44;
		--surface-2: #03344f;
		--surface-3: #0a4166;
		--sidebar: #01192a;
		--border: #0e3b5a;
		--border-strong: #1a4d70;
		--ink: #f1f2f2;
		--ink-2: #c4c8ca;
		--ink-3: #8f9a9f;

		--user-bubble: #04466f;
		--user-ink: #f1f2f2;

		--code-bg: #011726;
		--code-ink: #e3e4e5;
		--hl-title: var(--blaj-cyan);
		--hl-attr: #7fd6f7;
	}
}

/* ---------------------------------------------------------------------------
 * Blaj shape: square, heavy uppercase type, cyan bars.
 * ------------------------------------------------------------------------ */

h1,
h2,
.welcome h2,
.card h2,
.page-head h1,
.auth h1 {
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--ink-2);
}

/* Buttons: solid cyan, bold uppercase labels, like "FIND OUT MORE" on the site. */
button.primary,
.button.primary {
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

button,
.button {
	font-weight: 600;
}

/* Chat headings inside answers stay in sentence case: they are content, not chrome. */
.md h1,
.md h2,
.md h3,
.md h4 {
	text-transform: none;
	color: var(--ink);
	letter-spacing: 0;
}

/* Sidebar: white logo strip on top, like the site header; cyan bar marks the active item. */
.sidebar-top {
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	padding-bottom: var(--space-4);
}

.conversation-list h3 {
	color: var(--ink-2);
	font-weight: 800;
	letter-spacing: 0.08em;
}

.conversation-list a,
.sidebar-nav a {
	border-left: 3px solid transparent;
}

.conversation-list a.active,
.sidebar-nav a.active {
	border-left-color: var(--blaj-cyan);
	background: var(--surface);
	box-shadow: none;
}

.sidebar-nav a {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: var(--text-xs);
	font-weight: 700;
}

.main-header h1 {
	text-transform: none;
	letter-spacing: 0;
	color: var(--ink);
	font-weight: 700;
}

/* Square marks instead of rounded tiles. */
.brand .mark,
.msg.assistant .mark,
.welcome .mark,
.avatar {
	border-radius: 0;
}

.msg.assistant .mark {
	background: var(--blaj-cyan);
	color: #ffffff;
}

.welcome .mark {
	background: var(--blaj-cyan);
	color: #ffffff;
	box-shadow: none;
}

.avatar {
	background: var(--blaj-block);
	color: #ffffff;
}

/* User messages: light cyan with a cyan edge. */
.msg.user .bubble {
	border-right: 3px solid var(--blaj-cyan);
}

/* Suggestions: steel cards that turn cyan, like the sector tiles on the site. */
.suggestions button {
	border-color: var(--border-strong);
	box-shadow: none;
}

.suggestions button:hover {
	border-color: var(--blaj-cyan);
	background: var(--accent-soft);
}

/* Composer: square box with a cyan top rule. */
.composer {
	border-top: 3px solid var(--blaj-cyan);
}

.composer .send {
	background: var(--accent);
	border-color: transparent;
	color: var(--accent-ink);
}

/* Steps, files and code: square tiles with a steel edge. */
.file-card,
.codeblock,
.step summary,
.thinking summary {
	border-radius: 0;
}

.file-card .kind {
	border-radius: 0;
	background: var(--blaj-cyan);
	color: #ffffff;
}

/* Sign-in: the site's hero split, steel grey left and Blaj cyan right, with its slogan. */
.auth {
	position: relative;
	background: linear-gradient(90deg, var(--surface-2) 0 50%, var(--blaj-cyan) 50% 100%);
}

.auth::after {
	content: "Passion for engineering";
	position: absolute;
	right: 5vw;
	bottom: 7vh;
	max-width: 22rem;
	color: #ffffff;
	font-size: clamp(1.75rem, 3.2vw, 3rem);
	font-weight: 800;
	line-height: 1.05;
	text-align: right;
	text-transform: uppercase;
	pointer-events: none;
}

.auth .card {
	position: relative;
	z-index: 1;
	border: 0;
	border-top: 4px solid var(--blaj-cyan);
	box-shadow: var(--shadow-lg);
}

@media (max-width: 860px) {
	.auth {
		background: linear-gradient(180deg, var(--surface-2) 0 55%, var(--blaj-cyan) 55% 100%);
	}

	.auth::after {
		display: none;
	}
}

/* Pills on the site stay round only for status badges; everything else is square. */
.chip,
.toast,
.jump,
.turn-status,
.conn,
.error-card,
.offline-banner,
.secret,
pre.code,
input,
select,
textarea {
	border-radius: 0;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .sidebar-top {
		background: var(--sidebar);
	}

	/* The grey wordmark would vanish on navy: show it white, as brands do on dark backgrounds. */
	:root:not([data-theme="light"]) .brand img.wordmark {
		filter: brightness(0) invert(1);
	}

	:root:not([data-theme="light"]) h1,
	:root:not([data-theme="light"]) h2,
	:root:not([data-theme="light"]) .welcome h2 {
		color: var(--ink);
	}

	:root:not([data-theme="light"]) .auth {
		background: linear-gradient(90deg, var(--sidebar) 0 50%, var(--blaj-navy) 50% 100%);
	}

	:root:not([data-theme="light"]) .msg.assistant .mark,
	:root:not([data-theme="light"]) .welcome .mark,
	:root:not([data-theme="light"]) .file-card .kind {
		color: var(--accent-ink);
	}
}