/* Reddwire brand stylesheet — extends Tailwind with brand colors and fonts.
 * Brand source of truth: /reddwire_brand.md
 */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;700;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
	--rw-red: #ff2d2d;
	--rw-red-deep: #a80000;
	--rw-bg: #141414;
	--rw-bg-dark: #0a0a0a;
	--rw-text: #ffffff;
	--rw-text-muted: #888888;
}

html {
	background: var(--rw-bg-dark);
	color: var(--rw-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	font-weight: 400;
	background:
		radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 45, 45, 0.12), transparent 60%),
		linear-gradient(180deg, var(--rw-bg) 0%, var(--rw-bg-dark) 100%);
	background-attachment: fixed;
	min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, .font-display {
	font-family: 'Geist', 'Inter', system-ui, sans-serif;
	font-weight: 700;
	letter-spacing: -0.02em;
}

h1 { font-weight: 900; letter-spacing: -0.035em; }

.text-muted { color: var(--rw-text-muted); }
.text-red    { color: var(--rw-red); }
.bg-red      { background: var(--rw-red); }
.bg-card     { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); }
.bg-card-hover:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 45, 45, 0.3); }

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border-radius: 0.5rem;
	font-weight: 600;
	font-size: 0.95rem;
	transition: all 0.15s ease;
	font-family: 'Geist', sans-serif;
}

.btn-primary {
	background: linear-gradient(135deg, var(--rw-red) 0%, var(--rw-red-deep) 100%);
	color: white;
	box-shadow: 0 0 0 1px rgba(255, 45, 45, 0.3), 0 4px 20px -4px rgba(255, 45, 45, 0.4);
}
.btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 0 0 1px rgba(255, 45, 45, 0.5), 0 8px 28px -4px rgba(255, 45, 45, 0.6);
}

.btn-secondary {
	background: rgba(255, 255, 255, 0.05);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.btn-secondary:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.2);
}

code, .font-mono {
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 0.875em;
}

.code-block {
	background: var(--rw-bg-dark);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0.5rem;
	padding: 1rem 1.25rem;
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 0.875rem;
	color: var(--rw-text);
	overflow-x: auto;
}

.code-inline {
	background: rgba(255, 45, 45, 0.1);
	color: var(--rw-red);
	padding: 0.15em 0.4em;
	border-radius: 0.25rem;
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 0.875em;
	border: 1px solid rgba(255, 45, 45, 0.2);
}

.arc-glow {
	background: radial-gradient(circle at 50% 80%, rgba(255, 45, 45, 0.4), transparent 60%);
	filter: blur(40px);
}

a { color: var(--rw-red); text-decoration: none; }
a:hover { color: #ff5a5a; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }