/*
 * Nocturne: the theme the app ships with, copied into the site's token layer.
 *
 * Source of truth is `static/style.css`, the `[data-theme="nocturne"]` block and the
 * scale in its `:root`. The names are the app's names, not a parallel set, so a
 * value here can be checked against the interface it is meant to match: `--bg`,
 * `--accent`, `--fs-4`, `--sp-7`. Indigo-slate ground, one brass lamp, cyan for the
 * second signal.
 *
 * The scale is theme-independent in the app too, so it is declared once and no rule
 * in `site.css` sets a raw length for a property the app puts on a ladder.
 */

:root,
[data-theme="nocturne"] {
	color-scheme: dark;

	/* Ground. Three steps deep, plus the fill a hovered row takes. */
	--bg: #14171d;
	--bg-2: #1c1f26;
	--bg-3: #24282f;
	--bg-hover: #2e323b;

	/* Hairlines. `.10` is a divider, `.19` is an edge you are meant to see. */
	--line: rgba(255, 255, 255, .10);
	--line-2: rgba(255, 255, 255, .19);

	/* Text. `muted` is secondary reading, `fadetext` is metadata and never a sentence. */
	--text: #e5e8ed;
	--muted: #9aa0ad;
	--fadetext: #6d7381;

	/* Brass is the only accent. It marks, it never carries body text on a light field. */
	--accent: #c0b26c;
	--accent-rgb: 192, 178, 108;
	--on-accent: #000;
	--accent-2: #79afbd;
	--accent2-rgb: 121, 175, 189;

	/* The user's own turn, in the interface mock. */
	--user-bubble: #292d35;
	--user-bubble-text: #c3c7d0;

	/* Status. */
	--err: #d05e74;
	--err-rgb: 208, 94, 116;
	--warn: #d47a25;
	--warn-rgb: 212, 122, 37;
	--ok: #6ca56e;

	/* Code sits in a well one step darker than the page. */
	--code-bg: #0e1015;
	--code-text: #d6d9e0;
	--scroll: #373c46;
	--scroll-hover: #4e535d;
	--shade: #0e0c14;
	--dim: rgba(14, 12, 20, .62);

	/* Type. The platform's own faces: the site downloads nothing, same rule as the app. */
	--font: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI",
	        "Noto Sans", "Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas,
	        "DejaVu Sans Mono", monospace;

	/* Nine steps, adjacent ratio 1.125, floor 10px. */
	--fs-1: 10px;
	--fs-2: 11.25px;
	--fs-3: 12.65px;
	--fs-4: 14.25px;
	--fs-5: 16px;
	--fs-6: 18px;
	--fs-7: 20.3px;
	--fs-8: 22.8px;
	--fs-9: 25.7px;

	--sp-1: 1px;
	--sp-2: 2px;
	--sp-3: 4px;
	--sp-4: 6px;
	--sp-5: 8px;
	--sp-6: 10px;
	--sp-7: 12px;
	--sp-8: 14px;
	--sp-9: 16px;
	--sp-10: 20px;
	--sp-11: 24px;
	--sp-12: 40px;

	--radius: 12px;
	--radius-sm: 8px;
	--radius-pill: 999px;

	--dur-1: 90ms;
	--dur-2: 150ms;
	--dur-3: 220ms;
	--dur-4: 320ms;
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ease-soft: cubic-bezier(.33, 1, .68, 1);

	--sh-2: 0 1px 2px color-mix(in srgb, var(--shade) 24%, transparent),
	        0 6px 16px color-mix(in srgb, var(--shade) 22%, transparent);
	--sh-3: 0 2px 6px color-mix(in srgb, var(--shade) 26%, transparent),
	        0 18px 50px color-mix(in srgb, var(--shade) 34%, transparent);

	/* Purpose aliases, same seam as the app. */
	--fs-read: var(--fs-4);
	--fs-uirow: var(--fs-3);
	--fs-meta: var(--fs-2);

	/* Site-only: the heaviest weight of body text, mixed from --text rather than a
	   new colour, so a page never introduces a tone the interface does not have. */
	--text-strong: color-mix(in srgb, var(--text), white 14%);

	/* Site-only: the measure a page of prose is held to, and the gutter. */
	--site-max: 1180px;
	--site-gutter: clamp(20px, 4vw, 48px);
	--site-section: clamp(56px, 8vw, 104px);
}