/* ============================================================================ Bolehspin Design System — design-tokens.css ---------------------------------------------------------------------------- Source of truth for ALL future frontend redesigns. Established 2026-05-09 from the withdraw modal v2 aesthetic ("Watchmaker's Box, not Slot Machine"). Usage: 1. Include this file FIRST in , before any other CSS 2. New components reference --bs-* vars only (no hardcoded values) 3. Use .bsd-* base classes as starting points 4. Opt-in scope: wrap a section in
to inherit fonts Coexists peacefully with existing CSS — pure additive, no global override. ============================================================================ */ :root { /* ─── Color: Surface ───────────────────────────────────────────────── */ --bs-cream: #F4EEE2; /* primary surface */ --bs-cream-deep: #EAE0CD; /* surface gradient bottom */ --bs-cream-soft: #FBF7EE; /* card-on-cream */ --bs-paper: #FFFFFF; /* input fills, max contrast cards */ /* ─── Color: Ink (text & dark surfaces) ────────────────────────────── */ --bs-ink: #15110C; /* primary text, dark CTAs */ --bs-ink-soft: #44372A; /* secondary text */ --bs-ink-mute: #6B5C49; /* tertiary text, helper labels */ --bs-ink-faint: rgba(21, 17, 12, 0.18); /* placeholders, dividers tinted */ /* ─── Color: Tiger Gold (brand accent) ─────────────────────────────── */ --bs-gold: #B6924A; /* default gold */ --bs-gold-hi: #E2BE6E; /* highlight / gradient stop */ --bs-gold-deep: #7A5F26; /* deep gold / pressed states */ --bs-gold-soft: rgba(182, 146, 74, 0.10); /* gold tint background */ --bs-gold-glow: rgba(182, 146, 74, 0.32); /* hover glow */ /* ─── Color: Forest Leaf (calm accent for security/trust) ──────────── */ --bs-leaf: #1E3A2E; --bs-leaf-soft: rgba(30, 58, 46, 0.08); /* ─── Color: Semantic states ───────────────────────────────────────── */ --bs-success: #2E7D5B; --bs-success-soft: rgba(46, 125, 91, 0.10); --bs-warn: #B8741C; --bs-warn-soft: rgba(184, 116, 28, 0.10); --bs-danger: #B53A2E; --bs-danger-soft: rgba(181, 58, 46, 0.10); --bs-info: #2D5C8A; --bs-info-soft: rgba(45, 92, 138, 0.10); /* ─── Color: Lines & dividers ──────────────────────────────────────── */ --bs-line: rgba(21, 17, 12, 0.10); --bs-line-strong: rgba(21, 17, 12, 0.18); --bs-line-faint: rgba(21, 17, 12, 0.05); /* ─── Typography: Families ─────────────────────────────────────────── */ --bs-font-display: 'Fraunces', 'Cormorant Garamond', ui-serif, Georgia, serif; --bs-font-body: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --bs-font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ─── Typography: Scale (display = serif, ui = sans) ───────────────── */ --bs-text-xs: 11px; --bs-text-sm: 12px; --bs-text-base: 14px; --bs-text-md: 16px; --bs-text-lg: 18px; --bs-text-xl: 22px; --bs-text-2xl: 28px; --bs-text-3xl: 36px; --bs-text-4xl: 48px; --bs-text-display: 76px; /* big editorial money */ --bs-text-hero: 96px; /* page hero (rare) */ /* ─── Typography: Letter spacing ───────────────────────────────────── */ --bs-track-tight: -0.03em; /* big serif numbers */ --bs-track-snug: -0.01em; /* headings */ --bs-track-normal: 0; --bs-track-wide: 0.04em; /* mono numbers */ --bs-track-eyebrow: 0.22em; /* uppercase labels */ /* ─── Spacing scale (4-base) ───────────────────────────────────────── */ --bs-space-1: 4px; --bs-space-2: 6px; --bs-space-3: 8px; --bs-space-4: 10px; --bs-space-5: 12px; --bs-space-6: 16px; --bs-space-7: 20px; --bs-space-8: 24px; --bs-space-9: 28px; --bs-space-10: 32px; --bs-space-12: 40px; --bs-space-14: 48px; --bs-space-16: 56px; /* ─── Radius ───────────────────────────────────────────────────────── */ --bs-r-xs: 6px; --bs-r-sm: 8px; --bs-r-md: 10px; --bs-r-lg: 14px; --bs-r-xl: 18px; --bs-r-2xl: 22px; --bs-r-full: 9999px; /* ─── Shadow (depth) ───────────────────────────────────────────────── */ --bs-shadow-sm: 0 1px 2px rgba(21, 17, 12, 0.06), 0 0 0 1px var(--bs-line); --bs-shadow-md: 0 4px 12px -2px rgba(21, 17, 12, 0.10), 0 0 0 1px var(--bs-line); --bs-shadow-lg: 0 12px 28px -8px rgba(21, 17, 12, 0.18), 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 0 0 1px var(--bs-line); --bs-shadow-modal: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 0 0 1px rgba(21, 17, 12, 0.06), 0 30px 80px -20px rgba(0, 0, 0, 0.55), 0 8px 22px -8px rgba(0, 0, 0, 0.35); --bs-shadow-gold: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 -1px 0 rgba(0, 0, 0, 0.18) inset, 0 8px 18px -6px var(--bs-gold-glow); --bs-shadow-gold-hover: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 -1px 0 rgba(0, 0, 0, 0.18) inset, 0 14px 26px -8px rgba(122, 95, 38, 0.7); /* ─── Motion ───────────────────────────────────────────────────────── */ --bs-ease-out: cubic-bezier(.2, .7, .2, 1); --bs-ease-in-out: cubic-bezier(.4, .0, .2, 1); --bs-ease-spring: cubic-bezier(.34, 1.56, .64, 1); --bs-dur-fast: 140ms; --bs-dur-base: 220ms; --bs-dur-slow: 420ms; --bs-dur-shimmer: 3600ms; /* ─── Z-index layers ───────────────────────────────────────────────── */ --bs-z-base: 1; --bs-z-rise: 10; --bs-z-dropdown: 100; --bs-z-sticky: 200; --bs-z-overlay: 800; --bs-z-modal: 900; --bs-z-toast: 1000; } /* Optional dark mode (for game lobby ambience). Opt-in via .bsd-dark on a wrapper */ .bsd-dark { --bs-cream: #1A1813; --bs-cream-deep: #14110d; --bs-cream-soft: #211C16; --bs-paper: #2A241C; --bs-ink: #F4EEE2; --bs-ink-soft: #C9BFA8; --bs-ink-mute: #948876; --bs-ink-faint: rgba(244, 238, 226, 0.20); --bs-line: rgba(244, 238, 226, 0.10); --bs-line-strong: rgba(244, 238, 226, 0.20); --bs-line-faint: rgba(244, 238, 226, 0.05); } /* ============================================================================ COMPONENT BASE CLASSES (.bsd-*) ============================================================================ */ .bsd { font-family: var(--bs-font-body); color: var(--bs-ink); } /* ─── Eyebrow / micro label ──────────────────────────────────────────── */ .bsd-eyebrow { font-family: var(--bs-font-mono); font-weight: 500; font-size: var(--bs-text-xs); letter-spacing: var(--bs-track-eyebrow); text-transform: uppercase; color: var(--bs-gold-deep); line-height: 1; } .bsd-eyebrow--mute { color: var(--bs-ink-mute); } /* ─── Headings ───────────────────────────────────────────────────────── */ .bsd-h1, .bsd-h2, .bsd-h3 { font-family: var(--bs-font-display); font-weight: 500; letter-spacing: var(--bs-track-snug); color: var(--bs-ink); font-variation-settings: "opsz" 96; margin: 0; } .bsd-h1 { font-size: var(--bs-text-3xl); } .bsd-h2 { font-size: var(--bs-text-2xl); } .bsd-h3 { font-size: var(--bs-text-xl); } .bsd-display { font-family: var(--bs-font-display); font-weight: 500; font-size: var(--bs-text-display); font-variation-settings: "opsz" 144; letter-spacing: var(--bs-track-tight); line-height: 1; color: var(--bs-ink); } /* ─── Body text ──────────────────────────────────────────────────────── */ .bsd-body { font-size: var(--bs-text-base); line-height: 1.55; color: var(--bs-ink-soft); } .bsd-mono { font-family: var(--bs-font-mono); letter-spacing: var(--bs-track-wide); } .bsd-mute { color: var(--bs-ink-mute); } .bsd-faint { color: var(--bs-ink-faint); } /* ─── Buttons ────────────────────────────────────────────────────────── */ .bsd-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--bs-space-3); height: 44px; padding: 0 var(--bs-space-7); border: 0; border-radius: var(--bs-r-lg); font-family: var(--bs-font-body); font-weight: 500; font-size: var(--bs-text-base); letter-spacing: 0.01em; cursor: pointer; transition: transform var(--bs-dur-fast) var(--bs-ease-out), box-shadow var(--bs-dur-base) var(--bs-ease-out), background var(--bs-dur-base) var(--bs-ease-out), color var(--bs-dur-base) var(--bs-ease-out); } .bsd-btn:active { transform: translateY(1px); } .bsd-btn--lg { height: 52px; padding: 0 var(--bs-space-8); font-size: var(--bs-text-md); } .bsd-btn--sm { height: 36px; padding: 0 var(--bs-space-6); font-size: var(--bs-text-sm); } /* Gold (primary) — flagship CTA with shimmer */ .bsd-btn--gold { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--bs-gold-hi) 0%, var(--bs-gold) 50%, var(--bs-gold-deep) 100%); color: #1a130a; font-weight: 600; box-shadow: var(--bs-shadow-gold); } .bsd-btn--gold:hover { transform: translateY(-1px); box-shadow: var(--bs-shadow-gold-hover); } .bsd-btn--gold::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); animation: bsd-shimmer var(--bs-dur-shimmer) ease-in-out infinite; pointer-events: none; } @keyframes bsd-shimmer { 0%,40% { transform: translateX(-120%); } 60%,100% { transform: translateX(120%); } } /* Ink (dark) — secondary heavy */ .bsd-btn--ink { background: var(--bs-ink); color: var(--bs-cream); box-shadow: var(--bs-shadow-md); } .bsd-btn--ink:hover { background: #000; } /* Ghost — minimal outline */ .bsd-btn--ghost { background: transparent; color: var(--bs-ink-soft); border: 1px solid var(--bs-line); } .bsd-btn--ghost:hover { color: var(--bs-ink); border-color: var(--bs-ink); } /* Soft — subtle filled */ .bsd-btn--soft { background: var(--bs-gold-soft); color: var(--bs-gold-deep); } .bsd-btn--soft:hover { background: rgba(182,146,74,0.18); } /* ─── Inputs ─────────────────────────────────────────────────────────── */ .bsd-input { width: 100%; box-sizing: border-box; height: 46px; padding: 0 var(--bs-space-6); background: rgba(255, 255, 255, 0.65); border: 1px solid var(--bs-line); border-radius: var(--bs-r-md); font-family: var(--bs-font-body); font-size: var(--bs-text-base); color: var(--bs-ink); transition: border-color var(--bs-dur-base) var(--bs-ease-out), background var(--bs-dur-base); } .bsd-input::placeholder { color: var(--bs-ink-faint); } .bsd-input:focus { outline: none; border-color: var(--bs-gold); background: var(--bs-paper); } .bsd-input--lg { height: 56px; font-size: var(--bs-text-md); } /* Field wrapper with label-up */ .bsd-field { display: flex; flex-direction: column; gap: var(--bs-space-2); } .bsd-field-label { font-family: var(--bs-font-mono); font-size: var(--bs-text-xs); letter-spacing: var(--bs-track-eyebrow); text-transform: uppercase; color: var(--bs-ink-mute); } /* ─── Chip (quick selectors) ─────────────────────────────────────────── */ .bsd-chip { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 var(--bs-space-6); border: 1px solid var(--bs-line); background: transparent; border-radius: var(--bs-r-md); font-family: var(--bs-font-mono); font-weight: 500; font-size: var(--bs-text-sm); color: var(--bs-ink-soft); cursor: pointer; transition: all var(--bs-dur-fast) var(--bs-ease-out); } .bsd-chip:hover { background: var(--bs-gold-soft); border-color: var(--bs-gold); color: var(--bs-ink); } .bsd-chip.is-active { background: var(--bs-ink); color: var(--bs-gold-hi); border-color: var(--bs-ink); box-shadow: 0 4px 12px -4px rgba(21,17,12,0.4); } /* ─── Card ───────────────────────────────────────────────────────────── */ .bsd-card { background: var(--bs-cream-soft); border: 1px solid var(--bs-line); border-radius: var(--bs-r-lg); padding: var(--bs-space-7); box-shadow: var(--bs-shadow-sm); } .bsd-card--paper { background: var(--bs-paper); } .bsd-card--lift { box-shadow: var(--bs-shadow-md); } .bsd-card--float { box-shadow: var(--bs-shadow-lg); } /* ─── Modal ──────────────────────────────────────────────────────────── */ .bsd-modal-backdrop { position: fixed; inset: 0; background: rgba(10, 10, 12, 0.55); backdrop-filter: blur(6px); display: grid; place-items: center; z-index: var(--bs-z-modal); padding: var(--bs-space-6); } .bsd-modal { position: relative; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box; background: radial-gradient(120% 80% at 100% 0%, var(--bs-gold-soft), transparent 55%), linear-gradient(180deg, var(--bs-cream) 0%, var(--bs-cream-deep) 100%); color: var(--bs-ink); border-radius: var(--bs-r-2xl); padding: var(--bs-space-9) var(--bs-space-9) var(--bs-space-8); box-shadow: var(--bs-shadow-modal); animation: bsd-modal-unfold var(--bs-dur-slow) var(--bs-ease-out) both; } @keyframes bsd-modal-unfold { from { opacity: 0; transform: translateY(8px) scale(.97) rotate(-.4deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(0); } } .bsd-modal-close { position: absolute; top: var(--bs-space-6); right: var(--bs-space-6); width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--bs-line); background: transparent; border-radius: var(--bs-r-full); color: var(--bs-ink-soft); cursor: pointer; transition: all var(--bs-dur-base) var(--bs-ease-out); } .bsd-modal-close:hover { background: var(--bs-ink); color: var(--bs-cream); border-color: var(--bs-ink); transform: rotate(90deg); } /* ─── Trust rail (3-up icon row) ─────────────────────────────────────── */ .bsd-trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bs-space-2); } .bsd-trust li { display: flex; align-items: center; gap: var(--bs-space-2); font-size: var(--bs-text-xs); color: var(--bs-ink-soft); line-height: 1.3; } .bsd-trust-icon { width: 22px; height: 22px; display: grid; place-items: center; background: var(--bs-gold-soft); border-radius: var(--bs-r-xs); font-size: var(--bs-text-sm); color: var(--bs-gold-deep); } /* ─── Divider ────────────────────────────────────────────────────────── */ .bsd-divider { height: 1px; background: var(--bs-line); border: 0; margin: var(--bs-space-6) 0; } .bsd-divider--strong { background: var(--bs-line-strong); } /* ─── Pill / badge ───────────────────────────────────────────────────── */ .bsd-pill { display: inline-flex; align-items: center; gap: var(--bs-space-2); padding: 4px 10px; border-radius: var(--bs-r-full); font-family: var(--bs-font-mono); font-size: var(--bs-text-xs); letter-spacing: var(--bs-track-wide); background: var(--bs-gold-soft); color: var(--bs-gold-deep); } .bsd-pill--success { background: var(--bs-success-soft); color: var(--bs-success); } .bsd-pill--warn { background: var(--bs-warn-soft); color: var(--bs-warn); } .bsd-pill--danger { background: var(--bs-danger-soft); color: var(--bs-danger); } .bsd-pill--info { background: var(--bs-info-soft); color: var(--bs-info); } .bsd-pill--ink { background: var(--bs-ink); color: var(--bs-gold-hi); } /* ─── Reduced motion ─────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .bsd-btn, .bsd-chip, .bsd-input, .bsd-modal-close { transition: none; } .bsd-btn--gold::before, .bsd-modal { animation: none; } }