/* =====================================================================
* SLAPZ, design tokens
* Drop into any new surface's :root to inherit the palette, type, and
* the per-strain pack schemes. Source of truth: indoor-sites/slapz/src/styles/tokens.css
* (theme V4, cream comfort plus electric yellow attitude, locked 2026-06).
*
* Companion file: slapz-components.css (wordmark, buttons, tags, cards,
* strain plates, and the marquee built on top of these tokens).
*
* Fonts: import once in your before slapz-tokens.css
*
*
*
*
* ===================================================================== */
:root {
/* ---- House palette (cream paper base) ---- */
--slapz-bg: #f2ead3; /* cream, page background */
--slapz-bg-2: #e8dec0; /* surface, cards and panels on cream */
--slapz-bone: #f8f1da; /* lightest fill, inputs and raised tiles */
--slapz-ink: #0a0a0a; /* ink, primary text and inverse surfaces */
--slapz-ink-2: #1a1a1a; /* smoke, secondary dark surface */
--slapz-ink-dim: #5a5550; /* muted text, meta, fineprint */
--slapz-line: #c8bfa8; /* hairline borders on cream */
--slapz-line-dark: #2e2e2e; /* hairline borders on ink */
/* ---- Signature accent: acid yellow. The Z, the stamp, the marquee. ---- */
--slapz-slap: #d4cd2f;
--slapz-slap-2: #a39d24; /* acid deep, eyebrows and hover on cream */
/* ---- Secondary punch: sodium orange. Sparingly, one per screen. ---- */
--slapz-hot: #ff5722;
/* Alias the accent so components read the same on every surface */
--slapz-accent: var(--slapz-slap);
/* ---- Type ---- */
--slapz-font-display: "Bowlby One", "Impact", sans-serif;
--slapz-font-body: "Inter", system-ui, sans-serif;
--slapz-font-mono: "Roboto Mono", ui-monospace, Menlo, monospace;
/* Display tracking is tight on purpose: the wordmark is one object, not five letters */
--slapz-track-display: -0.045em;
--slapz-track-title: -0.02em;
--slapz-track-mono: 0.3em; /* every eyebrow, tag, and label */
/* ---- Spacing ---- */
--slapz-gutter: clamp(20px, 4vw, 60px);
--slapz-section-pad: clamp(72px, 10vw, 120px);
--slapz-frame-pad: clamp(24px, 6vw, 80px);
/* ---- Geometry: hard edges. Corners are 0 to 10px, never soft. ---- */
--slapz-radius: 10px;
--slapz-radius-sm: 6px;
--slapz-radius-pill: 999px;
--slapz-rule: 2px; /* section rules and card borders */
--slapz-rule-heavy: 3px; /* the strain plate frame */
/* ---- Motion ---- */
--slapz-ease: cubic-bezier(0.16, 1, 0.3, 1); /* arrive and settle */
--slapz-ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1); /* the Z reveal, button press */
--slapz-dur: 0.18s;
--slapz-dur-reveal: 0.7s;
/* ---- Signature spectrum strip: every house color in one band ---- */
--slapz-spectrum: linear-gradient(90deg,
#d4cd2f 0 16.67%, #a39d24 16.67% 33.33%, #ff5722 33.33% 50%,
#c8bfa8 50% 66.67%, #1a1a1a 66.67% 83.33%, #f8f1da 83.33% 100%);
}
/* =====================================================================
* Inverse surface: ink page, cream text. Same tokens, roles swapped.
* Use for the hero stage, the age gate band, and dark packaging mockups.
* ===================================================================== */
.slapz-inverse {
--slapz-bg: #0a0a0a;
--slapz-bg-2: #1a1a1a;
--slapz-bone: #2e2e2e;
--slapz-ink: #f2ead3;
--slapz-ink-2: #f8f1da;
--slapz-ink-dim: #a39d8c;
--slapz-line: #2e2e2e;
--slapz-slap-2: #d4cd2f; /* on ink, the eyebrow reads in full acid */
background: var(--slapz-bg);
color: var(--slapz-ink);
}
/* =====================================================================
* Strain pack schemes. The house stays cream and acid. Each strain wears
* its own color on the pack, the plate, and its page. Apply on a wrapper:
*
* Palettes were pulled from the pack art. --slapz-slap, --slapz-slap-2,
* and --slapz-hot drive the three lead accents inside the scheme.
* ===================================================================== */
[data-scheme="super-boof"] {
--slapz-bg: #f7ce3b; --slapz-bg-2: #f7ce3b; --slapz-bone: #f7ce3b;
--slapz-line: #b5811a; --slapz-ink: #141414; --slapz-ink-dim: #6e4a2a;
--slapz-slap: #ffffff; --slapz-slap-2: #3a3a3a; --slapz-hot: #9a6a3c;
--slapz-spectrum: linear-gradient(90deg,
#f7ce3b 0 12.5%, #e6a91c 12.5% 25%, #b5811a 25% 37.5%, #f2c50c 37.5% 50%,
#d9a36b 50% 62.5%, #9a6a3c 62.5% 75%, #6e6e6e 75% 87.5%, #141414 87.5% 100%);
}
[data-scheme="heir-heads"] {
--slapz-bg: #f6c6d9; --slapz-bg-2: #f6c6d9; --slapz-bone: #f6c6d9;
--slapz-line: #c9a24c; --slapz-ink: #141414; --slapz-ink-dim: #46732c;
--slapz-slap: #5e9a3c; --slapz-slap-2: #c9a24c; --slapz-hot: #46732c;
--slapz-spectrum: linear-gradient(90deg,
#f6c6d9 0 12.5%, #7fb04a 12.5% 25%, #5e9a3c 25% 37.5%, #46732c 37.5% 50%,
#c9a24c 50% 62.5%, #f2c50c 62.5% 75%, #e8e4b0 75% 87.5%, #141414 87.5% 100%);
}
[data-scheme="apple-fritter"] {
--slapz-bg: #8de89a; --slapz-bg-2: #8de89a; --slapz-bone: #8de89a;
--slapz-line: #3da34d; --slapz-ink: #141414; --slapz-ink-dim: #234a2b;
--slapz-slap: #2e9bd6; --slapz-slap-2: #d63a3a; --slapz-hot: #f2b70c;
--slapz-spectrum: linear-gradient(90deg,
#8de89a 0 12.5%, #3da34d 12.5% 25%, #2e9bd6 25% 37.5%, #d63a3a 37.5% 50%,
#f2b70c 50% 62.5%, #f2a030 62.5% 75%, #9a9a9a 75% 87.5%, #141414 87.5% 100%);
}
/* Two spare schemes held for later drops, unassigned */
[data-scheme="visor"] {
--slapz-bg: #74efec; --slapz-bg-2: #74efec; --slapz-bone: #74efec;
--slapz-line: #c42b7a; --slapz-ink: #141414; --slapz-ink-dim: #8a9097;
--slapz-slap: #e8479b; --slapz-slap-2: #f2c50c; --slapz-hot: #c42b7a;
--slapz-spectrum: linear-gradient(90deg,
#74efec 0 12.5%, #e8479b 12.5% 25%, #c42b7a 25% 37.5%, #f58cc0 37.5% 50%,
#f2c50c 50% 62.5%, #c2c7cc 62.5% 75%, #8a9097 75% 87.5%, #141414 87.5% 100%);
}
[data-scheme="grey"] {
--slapz-bg: #84e391; --slapz-bg-2: #84e391; --slapz-bone: #84e391;
--slapz-line: #8e8e8e; --slapz-ink: #141414; --slapz-ink-dim: #4a4a4a;
--slapz-slap: #b0b0b0; --slapz-slap-2: #4a4a4a; --slapz-hot: #6e6e6e;
--slapz-spectrum: linear-gradient(90deg,
#84e391 0 16.67%, #b0b0b0 16.67% 33.33%, #8e8e8e 33.33% 50%,
#6e6e6e 50% 66.67%, #4a4a4a 66.67% 83.33%, #141414 83.33% 100%);
}
/* ---- Base ---- */
.slapz-app, .slapz-page {
background: var(--slapz-bg);
color: var(--slapz-ink);
font-family: var(--slapz-font-body);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slapz-page ::selection { background: var(--slapz-slap); color: #0a0a0a; }