:root {
	--fill-primary: #FFF;
	--fill-secondary: #f6f6f6;
	/* --fill-auxiliary: wheat;  not currently referenced anywhere */

	--ink-primary: #111;
	--ink-secondary: color-mix(in oklch, var(--ink-primary) 66%, var(--fill-primary));
	--ink-auxiliary: color-mix(in oklch, var(--ink-primary) 45%, var(--fill-primary));

	/* --stroke-primary: gray;        not currently referenced anywhere */
	/* --accent: blue;                only fed --link-color, which is itself unused */
	/* --link-color: var(--accent);   no rules read this yet */

	--action-primary-fill: #111;
	--action-primary-ink: white;
	--action-primary-padding-block: 0.6em;
	--action-primary-padding-inline: 1.4em;
	--action-primary-border-ink: transparent;
	--action-primary-border-radius: 100px;


	--calm-voice-weight: 310;

	--fill-corners: 16px;

	--border: 1px solid rgb(0 0 0 / .07);
	/*--border: 5px solid red;*/
}

[data-mode='focused'] {
	--fill-primary: #111;
	/* --fill-secondary: #EEE; */
	/* --fill-auxiliary: wheat; */

	--ink-primary: #FFF;
	--ink-secondary: color-mix(in oklch, var(--ink-primary) 66%, var(--fill-primary));
	--ink-auxiliary: color-mix(in oklch, var(--ink-primary) 30%, var(--fill-primary));

	/* --stroke-primary: gray; */
	/* --accent: blue; */
	/* --link-color: var(--accent); */

	--action-primary-fill: white;
	--action-primary-ink: #111;
	--action-primary-padding-block: 0.6em;
	--action-primary-padding-inline: 1.4em;
	--action-primary-border-ink: transparent;
	--action-primary-border-radius: 100px;

	--calm-voice-weight: 420;
}

/* Apply the resolved tokens at the document root */
body {
	background-color: var(--fill-primary);
	color: var(--ink-primary);
}

section {
	background-color: var(--fill-primary);
	color: var(--ink-primary);
}


:root {
	--fast: 0.5s;
}