/*
 * Design tokens for Tennis Junkie: the fonts, the color system with light
 * and dark mode, the court surface variants and the shared keyframes. The
 * values mirror the design prototypes under design/.
 */

@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/jakarta.faces.resource/barlow-400.woff2.xhtml?ln=fonts") format('woff2');
}
@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/jakarta.faces.resource/barlow-600.woff2.xhtml?ln=fonts") format('woff2');
}
@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/jakarta.faces.resource/barlow-700.woff2.xhtml?ln=fonts") format('woff2');
}
@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/jakarta.faces.resource/barlow-condensed-700.woff2.xhtml?ln=fonts") format('woff2');
}
@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("/jakarta.faces.resource/barlow-condensed-800.woff2.xhtml?ln=fonts") format('woff2');
}
@font-face {
	font-family: 'Barlow Condensed';
	font-style: italic;
	font-weight: 800;
	font-display: swap;
	src: url("/jakarta.faces.resource/barlow-condensed-800-italic.woff2.xhtml?ln=fonts") format('woff2');
}

:root {
	--bg: #f5f1ea;
	--surface: #fffdf9;
	--surface2: #ece6dc;
	--ink: #1e1712;
	--muted: #8d8073;
	--line: rgba(30, 23, 18, .12);
	--accent: #e05426;
	--accent-soft: rgba(224, 84, 38, .11);
	--on-accent: #ffffff;
	--ball: #b9d431;
	--ball-ink: #5c6d0d;
	--on-ball: #42500a;
	--alert: #c5303c;
	--court: #c76f49;
	--apron: #9c5238;
	--custom-court: #3a6fa8;
	--custom-apron: #274d78;
	--court-line: #fff7ef;
	--shadow: 0 10px 30px rgba(30, 23, 18, .07);
}

:root[data-theme="dark"] {
	--bg: #151110;
	--surface: #201a17;
	--surface2: #2b231e;
	--ink: #f4ede3;
	--muted: #a3958a;
	--line: rgba(244, 237, 227, .13);
	--accent: #f06434;
	--accent-soft: rgba(240, 100, 52, .16);
	--on-accent: #ffffff;
	--ball: #c9e14a;
	--ball-ink: #e6f59a;
	--on-ball: #42500a;
	--alert: #e1313e;
	--court: #a1522f;
	--apron: #6f3a24;
	--court-line: rgba(255, 247, 239, .92);
	--shadow: 0 14px 34px rgba(0, 0, 0, .35);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not([data-theme="dark"]) {
		--bg: #151110;
		--surface: #201a17;
		--surface2: #2b231e;
		--ink: #f4ede3;
		--muted: #a3958a;
		--line: rgba(244, 237, 227, .13);
		--accent: #f06434;
		--accent-soft: rgba(240, 100, 52, .16);
		--on-accent: #ffffff;
		--ball: #c9e14a;
		--ball-ink: #e6f59a;
		--on-ball: #42500a;
		--alert: #e1313e;
		--court: #a1522f;
		--apron: #6f3a24;
		--court-line: rgba(255, 247, 239, .92);
		--shadow: 0 14px 34px rgba(0, 0, 0, .35);
	}
}

:root[data-surface="hard"] {
	--court: #3a6fa8;
	--apron: #274d78;
}

/* A club's own drills draw on the blue hard court, whatever surface the
   club plays on, so custom work stands out from the built-in library. The
   colour is a root token: the chips that filter for those drills wear it too. */
.tj-court-custom {
	--court: var(--custom-court);
	--apron: var(--custom-apron);
}

:root[data-surface="grass"] {
	--court: #4e8a4a;
	--apron: #356033;
}

@keyframes tjFadeUp {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

@keyframes tjDash {
	to { stroke-dashoffset: -48; }
}

@keyframes tjSpin {
	to { transform: rotate(360deg); }
}

@keyframes tjPulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.12); }
}

@keyframes tjBarGrow {
	from { width: 0; }
}

@keyframes tjSpinBall {
	to { transform: rotate(360deg); }
}