/**
 * BoiledEggTimer — design tokens.
 *
 * The only file where a colour, a font, or a spacing step is defined. Site
 * furniture and the timer both read from here, which is the reason they can
 * live in one plugin without drifting apart.
 *
 * Palette logic: the page is warm paper and near-black ink. Yolk amber is
 * reserved — it appears on the progress ring and the active phase and almost
 * nowhere else, so movement in amber reads as "it is cooking" without needing
 * a label. Alert red is never decorative.
 */

/* Self-hosted, preloaded from bet-core. No CDN request, no layout shift.
   Drop the .woff2 files into assets/fonts/ — see README. */
@font-face {
	font-family: 'Fraunces';
	src: url('../fonts/fraunces-variable.woff2') format('woff2-variations');
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+2000-206F, U+2190-21BB, U+2212;
}

@font-face {
	font-family: 'Instrument Sans';
	src: url('../fonts/instrument-sans-variable.woff2') format('woff2-variations');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+2000-206F, U+2190-21BB, U+2212;
}

:root {
	/* --- Surface and ink ------------------------------------------------ */
	--bet-paper: #fbf7f1;
	--bet-surface: #ffffff;
	--bet-surface-sunk: #f6f1e8;
	--bet-ink: #1a1714;
	--bet-ink-muted: #5f574c;
	--bet-shell: #ede6da;
	--bet-shell-strong: #ddd2c0;

	/* --- The accent, used sparingly ------------------------------------- */
	--bet-yolk: #e5a33c;
	--bet-yolk-deep: #c97f1e;
	--bet-yolk-wash: #fdf3e0;

	/* --- Meaning, not decoration ---------------------------------------- */
	--bet-alert: #b3401f;
	--bet-alert-wash: #fbeae5;
	--bet-caution: #8a6415;
	--bet-caution-wash: #fbf2dd;
	--bet-good: #3f6b46;

	/* --- Kitchen mode: inverted for glanceability at arm's length -------- */
	--bet-night-surface: #16130f;
	--bet-night-ink: #fdf8ef;

	/* --- Type ----------------------------------------------------------- */
	--bet-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--bet-font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--bet-step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.92rem);
	--bet-step-0: clamp(1rem, 0.95rem + 0.24vw, 1.13rem);
	--bet-step-1: clamp(1.2rem, 1.11rem + 0.44vw, 1.5rem);
	--bet-step-2: clamp(1.44rem, 1.29rem + 0.75vw, 2rem);
	--bet-step-3: clamp(1.73rem, 1.48rem + 1.24vw, 2.66rem);
	--bet-step-4: clamp(2.07rem, 1.67rem + 2vw, 3.55rem);

	/* The countdown is read from across a kitchen. It gets its own scale. */
	--bet-step-clock: clamp(3.5rem, 2.4rem + 5.5vw, 5.5rem);
	--bet-step-clock-full: clamp(5rem, 3rem + 14vw, 12rem);

	/* --- Space ---------------------------------------------------------- */
	--bet-space-3xs: 0.25rem;
	--bet-space-2xs: 0.5rem;
	--bet-space-xs: 0.75rem;
	--bet-space-s: 1rem;
	--bet-space-m: 1.5rem;
	--bet-space-l: 2rem;
	--bet-space-xl: 3rem;
	--bet-space-2xl: 4rem;

	/* --- Shape ---------------------------------------------------------- */
	--bet-radius-s: 6px;
	--bet-radius-m: 12px;
	--bet-radius-l: 20px;
	--bet-radius-pill: 999px;

	--bet-border: 1px solid var(--bet-shell);
	--bet-shadow-card: 0 1px 2px rgba(26, 23, 20, 0.04), 0 8px 24px -12px rgba(26, 23, 20, 0.14);
	--bet-shadow-lift: 0 2px 4px rgba(26, 23, 20, 0.06), 0 16px 32px -16px rgba(26, 23, 20, 0.2);

	/* --- Motion. Every transition reads this, so one query disables all. - */
	--bet-motion-fast: 120ms;
	--bet-motion: 220ms;
	--bet-ease: cubic-bezier(0.32, 0.72, 0, 1);

	/* --- Layout --------------------------------------------------------- */
	--bet-measure: 68ch;
	--bet-tap: 48px; /* WCAG 2.2 AA target minimum, with room to spare. */
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--bet-motion-fast: 0ms;
		--bet-motion: 0ms;
	}
}

@media (prefers-contrast: more) {
	:root {
		--bet-ink-muted: #3a342c;
		--bet-shell: #c8bda9;
		--bet-border: 2px solid var(--bet-shell-strong);
	}
}