/* ── Biff Design Tokens ─────────────────────────────────── */

:root {
	--biff-cosmos:      #0E1242;
	--biff-cosmos-deep: #070926;
	--biff-lava:        #FF7B3D;
	--biff-comet:       #FF4D8B;
	--biff-sky:         #2EC4FF;
	--biff-slime:       #7FE34A;
	--biff-sun:         #FFD23F;
	--biff-cream:       #FFF6E2;
	--biff-paper:       #FBF1DE;
	--biff-ink:         #16172B;
	--biff-white:       #FFFFFF;

	--biff-font-display: 'Bagel Fat One', cursive;
	--biff-font-accent:  'Caveat', cursive;
	--biff-font-body:    'Patrick Hand', cursive;
	--biff-font-pixel:   'VT323', monospace;

	--biff-radius-btn:   14px;
	--biff-radius-card:  18px;
	--biff-radius-pill:  999px;
	--biff-radius-lg:    28px;

	--biff-border:       2.5px solid var(--biff-ink);
	--biff-shadow-btn:   5px 5px 0 var(--biff-ink);
	--biff-shadow-card:  0 4px 0 #00000018;
	--biff-shadow-chip:  3px 3px 0;
}

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body {
	width: 100%;
	min-height: 100%;
	overflow-x: hidden;
	background: var(--biff-cosmos-deep);
	color: var(--biff-cream);
	font-family: var(--biff-font-body);
	font-size: 18px;
	line-height: 1.6;
}

/* Shared rough SVG filter for crayon edges */
.biff-rough { filter: url(#biff-rough); }

/* Sticker frame — ink border + shadow, slight rotation */
.biff-sticker {
	border: var(--biff-border);
	box-shadow: 5px 5px 0 var(--biff-ink);
	border-radius: var(--biff-radius-card);
}

/* Doodle button */
.biff-btn {
	font-family: var(--biff-font-display);
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 12px 24px;
	border-radius: var(--biff-radius-btn);
	border: var(--biff-border);
	box-shadow: var(--biff-shadow-btn);
	cursor: pointer;
	display: inline-block;
	transition: transform 80ms ease-out, box-shadow 80ms ease-out;
	text-decoration: none;
}

.biff-btn:active {
	transform: translate(3px, 3px);
	box-shadow: 2px 2px 0 var(--biff-ink);
}

.biff-btn-lava   { background: var(--biff-lava);  color: var(--biff-ink); }
.biff-btn-sky    { background: var(--biff-sky);   color: var(--biff-ink); }
.biff-btn-slime  { background: var(--biff-slime); color: var(--biff-ink); }
.biff-btn-sun    { background: var(--biff-sun);   color: var(--biff-ink); }
.biff-btn-cream  { background: var(--biff-cream); color: var(--biff-ink); }

/* Chip / tag */
.biff-chip {
	font-family: var(--biff-font-accent);
	font-size: 18px;
	font-weight: 700;
	padding: 2px 12px;
	border-radius: var(--biff-radius-pill);
	border: 2px solid var(--biff-ink);
	display: inline-block;
}

/* Inline SVG filter defs — included once per page */
.biff-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }