/*
 * THEME: the backgammon board.
 *
 * Every color, font and texture of the public site is set here. To change the
 * look, change this file only; site.css uses these tokens and nothing else.
 */

@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url("../fonts/atkinson.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url("../fonts/atkinson-italic.woff2") format("woff2");
	font-weight: 200 800;
	font-style: italic;
	font-display: swap;
}

:root {
	/* The board itself: the same in light and dark. */
	--walnut: #2c1b12;
	--walnut-2: #46291a;
	--felt: #1f4a40;
	--felt-deep: #173a32;
	--point-red: #a1302a;
	--point-red-dark: #8a2521;
	--point-bone: #e8dbc0;
	--checker-ivory: #f7f1e3;
	--checker-ebony: #1d1714;
	--brass: #b88a3c;
	--brass-soft: #d9b46a;
	--on-felt: #f7f1e3;
	--on-felt-muted: #e3dccb;
	--card-ink: #1d1714;
	--card-muted: #5e4d40;
	--card-label: #8a6420;
	--card-rule: #ddd1ba;

	/* Date markers: a dark checker on a light page, a light one on a dark page. */
	--marker-bg: #1d1714;
	--marker-ink: #f7f1e3;
	--marker-alt-bg: #f7f1e3;
	--marker-alt-ink: #1d1714;

	/* The page around the board. */
	--bg: #f3eee4;
	--surface: #fbf8f2;
	--ink: #221a15;
	--muted: #66584c;
	--rule: #ddd2bf;
	--link: #8c2621;
	--notice-bg: #efe1bd;
	--notice-ink: #3b2a12;

	--display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--display-settings: "SOFT" 100;
	--text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;

	/* Wood grain on the frame (header, footer, board edge, bar). */
	--frame-bg:
		repeating-linear-gradient(92deg, transparent 0 22px, rgb(0 0 0 / 0.08) 22px 24px, transparent 24px 61px),
		linear-gradient(180deg, var(--walnut-2), var(--walnut));
	--bar-bg:
		repeating-linear-gradient(180deg, transparent 0 30px, rgb(0 0 0 / 0.1) 30px 32px),
		linear-gradient(90deg, var(--walnut), var(--walnut-2) 50%, var(--walnut));
	--field-bg: radial-gradient(120% 90% at 50% 50%, var(--felt), var(--felt-deep));

	--radius: 6px;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #18110d;
		--surface: #221914;
		--ink: #efe6d6;
		--muted: #b6a692;
		--rule: #3b2c22;
		--link: #ec9a8c;
		--notice-bg: #3a2c14;
		--notice-ink: #f1dfb4;
		--marker-bg: #f7f1e3;
		--marker-ink: #1d1714;
		--marker-alt-bg: #4a3a30;
		--marker-alt-ink: #f7f1e3;
		color-scheme: dark;
	}
}