/* Variables read by OSS control/public/app.css. That file is linked after this one,
   so a same-specificity rule there wins. Overrides below are more specific.
   @font-face for JetBrains Mono and Inter is prepended to site.css.
   Control pages allow those files with font-src 'self'. */
:root {
	color-scheme: dark;
	--bg: #0a0f0a;
	--bg-2: #0e150f;
	--surface: #111a13;
	--text: #e6ede7;
	--muted: #9baa9e;
	--faint: #768a7b;
	--accent: #22c55e;
	--green: #22c55e;
	--green-dim: #3e7a52;
	--line: #1e2b21;
	--line-2: #2a3a2d;
	--font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--ink: #04210f;
	--link: #4ade80;
	--amber: #fbbf24;
	--danger-line: #f87171;
	--danger-hover: #fecaca;
	--danger-fill: #9b1c1c;
	--danger-fill-hover: #7f1818;
	--badge-green: #14532d;
	--tag-text: #b4c2b8;
	--text-soft: #d5e0d8;
	--control-border: #8aa894;
	--control-border-hover: #c5d6cc;
	--hover-wash: rgba(230, 237, 231, 0.08);
	--header-bar: rgba(10, 15, 10, 0.82);
	--on-danger: #fff;
	--inverse: #fff;
	--provider-github: #24292f;
	--provider-github-hover: #1b1f23;
	--provider-google-ink: #1f1f1f;
	--provider-google-line: #747775;
	--provider-google-hover: #f2f2f2;
	--radius-badge: 4px;
	--radius-control: 8px;
	--radius-avatar: 999px;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--control-height: 40px;
	--control-height-touch: 44px;
	--header-height: 56px;
	--column: 832px;
}

body header {
	margin: 0 0 1.75rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--line);
}

body header a {
	color: var(--accent);
	font-weight: 700;
}

body main h1,
body main h2,
body main h3 {
	color: var(--text);
	font-family: var(--font);
	letter-spacing: -0.02em;
}

body main h2,
body main h3 {
	margin: 1.75rem 0 0.5rem;
}

body main p,
body main li {
	color: var(--muted);
}

body main strong {
	color: var(--text);
}

body main ul,
body main ol {
	padding-left: 1.2rem;
}

body main li {
	margin: 0.35rem 0;
}

body main a {
	color: var(--accent);
}

/* app.css paints pre and aside #fff. These win on the dark page. */
body pre,
body aside {
	background: var(--surface);
	color: var(--text);
	border-color: var(--line);
	border-radius: var(--radius-control);
}

body pre code,
body code {
	font-family: var(--font);
	color: var(--text);
}

body code {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-badge);
	padding: 0 0.3em;
}

body pre code {
	background: none;
	border: 0;
	padding: 0;
}

body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

body th,
body td {
	padding: 0.7rem 0.8rem;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

body button,
body input {
	font: 600 15px/1.2 var(--font);
	color: var(--text);
	background: var(--bg-2);
	border: 1px solid var(--control-border);
	border-radius: var(--radius-control);
}

body button {
	color: var(--ink);
	background: var(--accent);
	border-color: transparent;
	padding: 0.75rem 1.1rem;
	cursor: pointer;
}

/* app.css paints .alert white. The wake page uses that class for save errors. */
body .alert {
	background: #2a1214;
	color: #f87171;
	border-color: #5c2a2a;
}

body footer nav {
	flex-wrap: wrap;
}

/* Staging /app also links /preprod.css. These rules style the same banner. */
body .preprod {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0 0 1.5rem;
	padding: 12px 20px;
	background: #f5a524;
	color: #1a1203;
	font: 600 14px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	text-align: center;
}

body .preprod a,
body.shell p.preprod a:not(.button):not(.brand) {
	color: #1a1203;
	text-decoration: underline;
	text-decoration-color: #1a1203;
}
body .preprod a:focus-visible {
	outline: 2px solid #1a1203;
	outline-offset: 3px;
}