/*
 * Hedia Finance — the design system.
 *
 * A ledger: a calm paper canvas, ink for text, hairline rules between rows, one deep green for
 * what you act on and for money that is fine, amber for what needs a look, red for what is wrong.
 * Figures are tabular and account numbers monospaced, so columns of them line up.
 *
 * Components only ever use the tokens below, so the dark theme follows from redefining them.
 * The pages allow no inline styles (Content-Security-Policy), so everything lives here.
 */

:root {
	color-scheme: light dark;

	--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

	--paper: #f5f4ef;
	--surface: #ffffff;
	--surface-sunk: #eeece5;
	--ink: #16171a;
	--ink-2: #464a50;
	--ink-3: #767a81;
	--rule: #e4e1d8;
	--rule-strong: #cdc9bd;

	--accent: #14594a;
	--accent-hover: #0f4a3d;
	--accent-ink: #ffffff;
	--accent-soft: #e2efe9;

	--positive: #1b7a52;
	--positive-soft: #e3f2ea;
	--warning: #8f5b00;
	--warning-soft: #fbf0d9;
	--negative: #b3261e;
	--negative-soft: #fbe8e6;
	--neutral-soft: #ecebe6;

	--focus: #2f7d6b;
	--shadow: 0 1px 0 rgb(22 23 26 / 0.03), 0 1px 3px rgb(22 23 26 / 0.06);
	--radius-s: 6px;
	--radius: 10px;
	--radius-l: 14px;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;

	--content-width: 1040px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--paper: #0e0f10;
		--surface: #16171a;
		--surface-sunk: #1c1e21;
		--ink: #ecebe7;
		--ink-2: #b6b8bc;
		--ink-3: #868a90;
		--rule: #26282c;
		--rule-strong: #393c41;

		--accent: #4dbb98;
		--accent-hover: #64c9a8;
		--accent-ink: #08201a;
		--accent-soft: #14302a;

		--positive: #5ccb98;
		--positive-soft: #133024;
		--warning: #e3ae4f;
		--warning-soft: #2e2512;
		--negative: #f08a80;
		--negative-soft: #35181a;
		--neutral-soft: #222427;

		--focus: #6fd3b2;
		--shadow: 0 1px 0 rgb(0 0 0 / 0.3);
	}
}

/* Reset ---------------------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p {
	margin: 0;
}

a {
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
	border-radius: var(--radius-s);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Type ----------------------------------------------------------------------------------------- */

.eyebrow {
	color: var(--ink-3);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.title {
	font-size: 28px;
	font-weight: 650;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.section-title {
	font-size: 15px;
	font-weight: 650;
	letter-spacing: -0.005em;
}

.lede {
	max-width: 62ch;
	color: var(--ink-2);
	font-size: 15px;
}

.muted {
	color: var(--ink-3);
}

.figure {
	font-variant-numeric: tabular-nums;
}

.mono {
	font-family: var(--font-mono);
	font-size: 0.92em;
	letter-spacing: 0.01em;
}