/* ==========================================================================
howrare.fun — tokens.css
Foundation layer: CSS reset · design tokens (committed dark "foil vault")
· base typography · the atmosphere (radial glows + SVG grain + vignette).
Owner: Atelier (Epic B — B2 tokens, B3 atmosphere).
Source of truth: INTEGRATION-CONTRACT §9/§10 · 05-BRAND-IDENTITY §3/§6.
Single committed dark theme — every colour is painted explicitly so the
page holds on any host background. No light-theme blocks by design.
========================================================================== */
/* --------------------------------------------------------------------------
1. Reset — modern, minimal, opinionated
-------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
/* Never scroll sideways — mobile-first single column (UI/UX §10). */
overflow-x: hidden;
}
body {
min-height: 100vh;
min-height: 100dvh;
overflow-x: hidden;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img, svg, video, canvas, picture { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:where(h1, h2, h3, h4, h5, h6) { font-weight: inherit; font-size: inherit; }
:where(p, h1, h2, h3) { overflow-wrap: break-word; }
/* --------------------------------------------------------------------------
2. Design tokens
-------------------------------------------------------------------------- */
:root {
/* --- Ground & surfaces (violet-black vault) --- */
--ink: #0A0910; /* page ground */
--ink-2: #120F1C; /* panels / raised surfaces */
--surface: #181425; /* cards, options */
--surface-2: #211B32; /* raised card face / option hover */
/* --- Lines / hairlines --- */
--line: rgba(255, 255, 255, .09);
--line-strong: rgba(255, 255, 255, .16);
/* --- Text --- */
--text: #F2EEFB; /* near-white, violet bias */
--muted: #A79FBD; /* secondary */
--muted-2: #736C88; /* tertiary / tiny decorative */
/* --- Signature accent: gold = rarity / value --- */
--gold: #F5C451;
--gold-deep: #C8922E;
--gold-lite: #FFE9A8; /* highlight edge for metallic sheen + shimmer */
/* --- Tier spectrum (semantic; colour encodes rarity) --- */
--t-common: #8B93A7; /* grey */
--t-rare: #59A6FF; /* blue */
--t-epic: #B06BFF; /* purple (earned: the Epic tier, never a brand gradient) */
--t-legendary: #F5C451; /* gold */
--t-mythic: #7DF9FF; /* cyan + full holo */
/* --- Foil prism (cyan -> violet -> gold), used by the holographic overlay --- */
--foil-cyan: #7DF9FF;
--foil-violet: #B06BFF;
--foil-gold: #F5C451;
/* --- Type: three named faces, each with a real fallback stack.
NEVER Inter / Roboto / Arial / system-ui / Space Grotesk. --- */
--font-display: "Bricolage Grotesque", "Trebuchet MS", "Helvetica Neue", sans-serif;
--font-body: "Hanken Grotesk", "Trebuchet MS", "Helvetica Neue", sans-serif;
--font-mono: "Space Mono", "Courier New", ui-monospace, monospace;
/* --- Fluid modular type scale (clamped, mobile-first) --- */
--fs-100: .75rem; /* 12 — micro / labels */
--fs-200: .8125rem; /* 13 */
--fs-300: .875rem; /* 14 */
--fs-400: 1rem; /* 16 — body base */
--fs-500: 1.0625rem; /* 17 */
--fs-600: clamp(1.15rem, 1.05rem + .6vw, 1.4rem); /* sub-heads */
--fs-700: clamp(1.4rem, 1.15rem + 1.5vw, 1.95rem); /* section titles */
--fs-800: clamp(1.95rem, 1.4rem + 3.2vw, 2.9rem); /* hero H1 */
--fs-900: clamp(2.9rem, 2rem + 5.4vw, 4.4rem); /* rarity number (hero) */
--tracking-wide: .08em;
--tracking-wider: .14em;
/* --- Radii --- */
--radius: 18px; /* default (cards, panels) */
--radius-sm: 12px; /* inputs, small tiles */
--radius-lg: 22px;
--radius-pill: 999px;
/* --- Layout --- */
--maxw: 468px; /* the centered single column */
/* --- Elevation --- */
--shadow: 0 20px 50px -24px rgba(0, 0, 0, .78);
--shadow-lg: 0 34px 90px -32px rgba(0, 0, 0, .88);
--shadow-btn: 0 10px 26px -12px rgba(0, 0, 0, .7);
/* --- Motion --- */
--ease: cubic-bezier(.2, .8, .2, 1);
--ease-out: cubic-bezier(.16, 1, .3, 1);
--dur-fast: .16s;
--dur: .28s;
--dur-slow: .6s;
color-scheme: dark;
}
/* --------------------------------------------------------------------------
3. Base document — paint the ground explicitly (never inherit host bg)
-------------------------------------------------------------------------- */
body {
background: var(--ink);
color: var(--text);
font-family: var(--font-body);
font-size: var(--fs-400);
font-weight: 400;
/* keep the vault dark even if a stray glow overshoots the viewport */
background-attachment: fixed;
}
::selection { background: color-mix(in srgb, var(--gold) 42%, transparent); color: #120c02; }
/* --------------------------------------------------------------------------
4. Atmosphere (B3) — "a card in a dark room"
Layered radial glows on .bg, ~5% SVG grain on .grain (overlay blend),
and a soft vignette. Both layers are fixed, behind the app, inert.
(index.html §10: )
-------------------------------------------------------------------------- */
.bg,
.grain {
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
}
.bg {
z-index: -2;
background:
/* gold, top */
radial-gradient(58% 42% at 50% -6%, rgba(245, 196, 81, .17), transparent 62%),
/* violet, bottom-left */
radial-gradient(52% 48% at 6% 104%, rgba(176, 107, 255, .15), transparent 60%),
/* blue, bottom-right */
radial-gradient(56% 50% at 102% 100%, rgba(89, 166, 255, .11), transparent 60%),
/* faint cyan whisper, mid — keeps the ground alive, never flat */
radial-gradient(40% 30% at 88% 8%, rgba(125, 249, 255, .05), transparent 60%),
var(--ink);
}
/* Soft vignette — pulls focus to the centre column, adds depth. */
.bg::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(125% 95% at 50% 26%, transparent 52%, rgba(4, 3, 9, .58) 100%);
}
/* SVG film grain (inline data URI — no external asset). feTurbulence noise,
tiled, blended 'overlay' at low opacity for tactile, anti-glass texture. */
.grain {
opacity: .05;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.82'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23g)'/%3E%3C/svg%3E");
background-size: 140px 140px;
}