/* DiffAlarm — design tokens (light default, dark via [data-theme="dark"]) */

:root {
	--action: #F4A261;
	--action-hot: #E76F51;
	--action-soft: #FCE3CC;

	--bg: #FAF7F2;
	--bg-2: #F1ECE3;
	--surface: #FFFFFF;
	--line: #E5E0D6;
	--line-strong: #C9C2B3;

	--ink: #1F2430;
	--ink-2: #3B4252;
	--ink-3: #6B7280;
	--ink-4: #9CA3AF;

	--ok: #2F9E6B;
	--ok-soft: #D6F0E2;
	--warn: #D08C2F;
	--warn-soft: #FBEBC8;
	--err: #C8533D;
	--err-soft: #F6D9D1;
	--info: #4F6BD3;

	--font-sans: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
	--font-display: 'Fraunces', 'Inter Tight', serif;
	--font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

	--r-1: 4px;
	--r-2: 8px;
	--r-3: 12px;
	--r-4: 16px;
	--r-5: 24px;

	--sh-1: 0 1px 0 rgba(31, 36, 48, 0.04), 0 1px 2px rgba(31, 36, 48, 0.04);
	--sh-2: 0 4px 14px -6px rgba(31, 36, 48, 0.12), 0 1px 2px rgba(31, 36, 48, 0.06);
	--sh-3: 0 18px 40px -16px rgba(31, 36, 48, 0.18), 0 4px 12px -6px rgba(31, 36, 48, 0.08);
}

[data-theme="dark"] {
	--bg: #0E1117;
	--bg-2: #151A22;
	--surface: #1B2030;
	--line: #262C3A;
	--line-strong: #353B4C;

	--ink: #ECEDEE;
	--ink-2: #C9CCD2;
	--ink-3: #8A8F99;
	--ink-4: #5A6070;

	--action-soft: rgba(244, 162, 97, 0.18);
	--ok-soft: rgba(47, 158, 107, 0.18);
	--warn-soft: rgba(208, 140, 47, 0.18);
	--err-soft: rgba(200, 83, 61, 0.18);

	--sh-1: 0 1px 0 rgba(0, 0, 0, 0.4);
	--sh-2: 0 6px 18px rgba(0, 0, 0, 0.4);
	--sh-3: 0 24px 50px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	font-family: var(--font-sans);
	color: var(--ink);
	background: var(--bg);
	font-feature-settings: 'cv11', 'ss01', 'ss03';
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

html { scroll-behavior: smooth; }

button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

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

.mono { font-family: var(--font-mono); font-feature-settings: 'zero', 'cv11'; }
.display { font-family: var(--font-display); font-style: italic; font-weight: 500; }

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

.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--bg-2);
	font-size: 12px;
	font-weight: 500;
	color: var(--ink-2);
	border: 1px solid var(--line);
}

.chip-action { background: var(--action-soft); color: #8A4516; border-color: rgba(244, 162, 97, 0.4); }
.chip-ok { background: var(--ok-soft); color: var(--ok); border-color: rgba(47, 158, 107, 0.3); }
.chip-err { background: var(--err-soft); color: var(--err); border-color: rgba(200, 83, 61, 0.3); }
.chip-warn { background: var(--warn-soft); color: var(--warn); border-color: rgba(208, 140, 47, 0.3); }

[data-theme="dark"] .chip-action { color: var(--action); }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: var(--r-2);
	font-weight: 600;
	font-size: 14px;
	border: 1px solid transparent;
	transition: transform 0.08s ease, background 0.15s ease, box-shadow 0.15s ease;
	white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--ink-2); }

.btn-action {
	background: var(--action);
	color: var(--ink);
	box-shadow: 0 1px 0 rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-action:hover { background: #F8B07A; }

.btn-ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--line-strong);
}
.btn-ghost:hover { background: var(--bg-2); }

.input {
	display: block;
	width: 100%;
	padding: 12px 14px;
	border-radius: var(--r-2);
	border: 1px solid var(--line-strong);
	background: var(--surface);
	color: var(--ink);
	font-family: inherit;
	font-size: 14px;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input:focus { border-color: var(--action); box-shadow: 0 0 0 4px rgba(244, 162, 97, 0.18); }

.diff-mark {
	background: var(--action);
	color: var(--ink);
	padding: 0 0.18em;
	border-radius: 3px;
	display: inline-block;
}
.diff-mark.del { background: var(--err-soft); color: var(--err); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.diff-mark.add { background: var(--ok-soft); color: var(--ok); }

.spark {
	display: inline-flex;
	align-items: flex-end;
	gap: 1.5px;
	height: 16px;
}
.spark span {
	width: 3px;
	background: currentColor;
	border-radius: 1px;
	display: block;
}
.spark-ok { color: var(--ok); }
.spark-err { color: var(--err); }
.spark-warn { color: var(--warn); }
.spark-action { color: var(--action); }

.scroll-frame { overflow: auto; }
.scroll-frame::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-frame::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
.scroll-frame::-webkit-scrollbar-track { background: transparent; }

.dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: currentColor;
	flex-shrink: 0;
}
.dot-ok { color: var(--ok); }
.dot-err { color: var(--err); }
.dot-warn { color: var(--warn); }
.dot-action { color: var(--action); }

.hidden { display: none !important; }

.text-ok { color: var(--ok); }
.text-err { color: var(--err); }
.text-warn { color: var(--warn); }
.text-action { color: var(--action); }
.text-ink { color: var(--ink); }
.text-ink2 { color: var(--ink-2); }
.text-ink3 { color: var(--ink-3); }
.text-ink4 { color: var(--ink-4); }