/* kladdle design tokens: the master.
   Every colour, face, size and duration the brand uses, written once. The
   website reads this file directly; the app copies it at build time; the
   brand page and brand.md are generated from it by tools/build-branding.py.
   Each token's trailing comment is its one-line use, printed on the page.
   Sections are marked "== name ==" for the generator. Paper is the default
   ground; ink follows the system unless data-theme says otherwise. */

:root {
	/* == brand == identical in both grounds */
	--brand-rose: #f0b4b0; /* the flourish: fills, selections, the hat, the one solid button */
	--brand-rose-mid: #b96b66; /* the edge of a completed tick; the accent object in a drawing */
	--brand-rose-deep: #7a3630; /* small text, links, facts worth noticing */
	--brand-ink: #23201b; /* ink, and the dark ground */
	--brand-paper: #f6f0e4; /* paper, the hero ground */

	/* == light == paper, the default ground */
	--l-ground: #f4f2ee; /* the page */
	--l-card: #fdfcfa; /* a card, barely above the page */
	--l-chip-bg: #fbf8f2; /* a chip */
	--l-sunken: #efece5; /* a track a bar sits in */
	--l-ink: #23201b; /* the thing itself */
	--l-ink-soft: #5a5344; /* the words around it */
	--l-ink-faint: #746c5d; /* the metadata under it */
	--l-edge: #e3ded4; /* a hairline at rest */
	--l-edge-strong: #d8d1c3; /* an input or interactive frame */
	--l-accent: #f0b4b0; /* brand rose */
	--l-accent-text: #7a3630; /* brand rose deep */
	--l-accent-soft: rgba(240, 180, 176, 0.3); /* the wash behind a selection */
	--l-danger: #d1381f; /* destruction and breakage only */
	--l-good: #4a6b3f; /* a live status dot */
	--l-focus-ring: rgba(122, 54, 48, 0.65); /* 0 0 0 3px, one of two shadows */

	/* == dark == ink, the same drawing on dark paper */
	--d-ground: #23201b;
	--d-card: #2b2823;
	--d-chip-bg: rgba(244, 242, 238, 0.05);
	--d-sunken: #1c1a15;
	--d-ink: #f4f2ee;
	--d-ink-soft: #b5ac98;
	--d-ink-faint: #948a78;
	--d-edge: rgba(244, 242, 238, 0.12);
	--d-edge-strong: rgba(244, 242, 238, 0.2);
	--d-accent: #f0b4b0; /* the same rose */
	--d-accent-text: #f0b4b0; /* the rose itself reads 10.4:1 on ink */
	--d-accent-soft: rgba(240, 180, 176, 0.16);
	--d-danger: #ed5a48;
	--d-good: #9cbf8e;
	--d-focus-ring: rgba(240, 180, 176, 0.55);

	/* == tags == toned-down hues; red deliberately absent */
	--tag-blue: #6f9fd8;
	--tag-green: #6faa5e;
	--tag-purple: #8a6fc4;
	--tag-teal: #4f9e97;
	--tag-amber: #c8813c;
	--tag-cyan: #56a8c4;
	--tag-magenta: #c063a0;
	--tag-seafoam: #6cc194;
	--tag-brown: #a3764e;
	--tag-navy: #4a6bb5;
	--tag-petrol: #3f6f7a;
	--tag-lilac: #b48fd8;
	--tag-lemon: #c4c04a;
	--tag-platinum: #9aa3ab;
	--tag-fallback: #6c7480;

	/* == type == two voices, see fonts.css */
	--font: 'Kladdle Roman', Georgia, serif; /* sentences and everything that belongs in one */
	--font-mono:
		'Kladdle Mono', ui-monospace, SFMono-Regular, Consolas, monospace; /* labels, dates, counts */
	--text-2xs: 11px;
	--text-xs: 12px;
	--text-sm: 14px;
	--text-md: 16px;
	--text-lg: 17px;
	--text-xl: 20px;
	--text-2xl: 24px;
	--text-3xl: 28px;
	--text-4xl: 34px;
	--text-display: 44px;

	/* == space == a 4px grid */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;

	/* == shape == print-like, not rounded; no pills anywhere */
	--radius-xs: 3px; /* focus rings on words, meter bars, swatches */
	--radius-sm: 8px; /* chips, fields, buttons */
	--radius-md: 11px; /* cards */

	/* == motion == fast and flat; no bounce, no spring */
	--motion: 160ms; /* every state change */
	--settle: cubic-bezier(0.22, 1, 0.36, 1); /* arrivals only */

	/* == website == values only kladdle.com uses */
	--brand-rose-pressed: #eaa5a0; /* the solid button while pressed */
	--edge-deep: #c9c0ac; /* a resting orb's hairline */
	--paper-edge: #e0d8c6; /* the paper's own edge */
	--pencil: #5a5344; /* the ink of a drawing, which is ink-soft */
	--pencil-faint: #8f8574; /* a lighter pencil, for thoughts and asides */
	--cal-1: #6f9fd8; /* the three calendars in the plan drawing */
	--cal-2: #6faa5e;
	--cal-3: #8a6fc4;
	--measure: 1080px; /* the page's one measure */
	--gutter: 24px; /* its side gutter */

	/* == semantic == the names components use; paper by default */
	color-scheme: light;
	--ground: var(--l-ground);
	--card: var(--l-card);
	--chip-bg: var(--l-chip-bg);
	--sunken: var(--l-sunken);
	--ink: var(--l-ink);
	--ink-soft: var(--l-ink-soft);
	--ink-faint: var(--l-ink-faint);
	--edge: var(--l-edge);
	--edge-strong: var(--l-edge-strong);
	--accent: var(--l-accent);
	--accent-text: var(--l-accent-text);
	--accent-soft: var(--l-accent-soft);
	--danger: var(--l-danger);
	--good: var(--l-good);
	--focus-ring: var(--l-focus-ring);
	--hat: var(--brand-rose);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		color-scheme: dark;
		--ground: var(--d-ground);
		--card: var(--d-card);
		--chip-bg: var(--d-chip-bg);
		--sunken: var(--d-sunken);
		--ink: var(--d-ink);
		--ink-soft: var(--d-ink-soft);
		--ink-faint: var(--d-ink-faint);
		--edge: var(--d-edge);
		--edge-strong: var(--d-edge-strong);
		--accent: var(--d-accent);
		--accent-text: var(--d-accent-text);
		--accent-soft: var(--d-accent-soft);
		--danger: var(--d-danger);
		--good: var(--d-good);
		--focus-ring: var(--d-focus-ring);
	}
}

:root[data-theme='dark'] {
	color-scheme: dark;
	--ground: var(--d-ground);
	--card: var(--d-card);
	--chip-bg: var(--d-chip-bg);
	--sunken: var(--d-sunken);
	--ink: var(--d-ink);
	--ink-soft: var(--d-ink-soft);
	--ink-faint: var(--d-ink-faint);
	--edge: var(--d-edge);
	--edge-strong: var(--d-edge-strong);
	--accent: var(--d-accent);
	--accent-text: var(--d-accent-text);
	--accent-soft: var(--d-accent-soft);
	--danger: var(--d-danger);
	--good: var(--d-good);
	--focus-ring: var(--d-focus-ring);
}