/* Futtos web design tokens — dark-only mirror of the app design system
(constants/theme.ts / design-system/tokens.css v2.1). The booking surfaces
are DARK ONLY: no [data-theme="light"] scope here. Read from these vars —
never hardcode hex/px on UI.
FONTS: each page loads the three families via a single in its
(Bebas Neue · Plus Jakarta Sans · JetBrains Mono) with preconnect — do NOT
re-add @import here. CSS @imports chained a 3rd serial round-trip before the
first heading could paint, and doubled the download on pages that also link
the fonts directly. If you add a new page that uses these tokens, copy the
font block from website/bookings/index.html into its head. */
:root {
/* ── Surfaces ── */
--bg: #050709;
--surface: #11161A;
--surface-elev: #1A2024;
--surface-accent:#0F1417;
--sheet: #0E1316;
--card-grad-a: #1A2024;
--card-grad-b: #11161A;
/* ── Text ── */
--text: #F5F7FA;
--text-2: #D1D5DB;
--text-3: #9CA3AF;
--text-4: #6B7280;
--text-inv: #0A0A0A;
--card-border: #2a2f33;
--border-light: #374151;
--track: rgba(255,255,255,0.07);
/* ── Brand — emerald is the ONLY interactive accent ── */
--primary: #34D399;
--primary-ink: #0A0A0A;
--primary-weak: rgba(52,211,153,0.12);
--primary-sel: rgba(52,211,153,0.15);
--go: #34D399;
--hype: #F2DF80; /* pending / attention / looking-for-players */
--live: #EF4444; /* live / destructive */
/* ── Lifecycle status · NON-interactive chrome only (pills · dots · banners) ──
Mirrored from design-system/tokens.css §status. This block was missing from
the web mirror, so any page reaching for --st-* got `transparent` — which is
how the storefront's VERIFIED pill rendered dark-on-dark. */
--st-go: #34D399; /* confirmed · acting now */
--st-wait: #F59E0B; /* pending · awaiting you */
--st-live: #EF4444; /* in play */
--st-done: #9DB4A6; --st-done-ink: #0E1813; /* ended / past — never glows */
--st-queue: #BDB287; --st-queue-ink: #161203; /* waitlist / in-limbo */
--st-queue-weak: rgba(189,178,135,0.16);
--st-risk: #FB923C; --st-risk-ink: #1F1206; /* at-risk urgency */
--st-risk-weak: rgba(251,146,60,0.16);
--st-loss: #F87171; /* soft loss red — down-deltas */
/* skill / mode tags */
--skill-casual: #60A5FA;
--skill-int: #34D399;
--skill-comp: #F59E0B;
--skill-elite: #C084FC;
/* tier accents (gold = hype; silver/bronze neutral) */
--tier-gold: #F2DF80;
--tier-silver: #9CA3AF;
--tier-bronze: #C08A5A;
/* ── Spacing · 4×n ── */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;
/* ── Radii · 20px is the brand radius ── */
--r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-full: 9999px;
/* ── Borders ── */
--bw-hair: 1px; --bw: 2px; --bw-thick: 3px;
/* ── Shadows ── */
--sh-1: 0 1px 2px rgba(0,0,0,0.25), 0 1px 1px rgba(0,0,0,0.18);
--sh-2: 0 6px 14px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.20);
--sh-3: 0 14px 30px rgba(0,0,0,0.38), 0 4px 8px rgba(0,0,0,0.22);
--sh-glow-1: 0 0 0 1px rgba(52,211,153,0.15), 0 10px 24px rgba(52,211,153,0.10);
--sh-glow-2: 0 0 0 1px rgba(52,211,153,0.25), 0 14px 36px rgba(52,211,153,0.20), 0 4px 10px rgba(0,0,0,0.35);
--sh-inset: inset 0 1px 0 rgba(255,255,255,0.04);
/* chalk-on-pitch texture (hero / empty states) */
--chalk: rgba(52,211,153,0.04);
--chalk-strong: rgba(52,211,153,0.08);
/* ── Type ── */
--ff-display: 'Bebas Neue', system-ui, sans-serif;
--ff-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
--ff-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
--fz-xs: 12px; --fz-sm: 14px; --fz-base: 15px; --fz-md: 16px;
--fz-lg: 17px; --fz-xl: 20px; --fz-xxl: 24px; --fz-xxxl: 28px;
--fz-huge: 36px; --fz-display: 48px;
/* ── WEB APP EXTENSION — dense-console + storefront roles ──
Additive: DEFINED here, CONSUMED during the per-surface normalization
passes. Nothing renders differently until a surface is migrated. */
--fz-meta: 12px; /* mono metadata · timestamps — the floor; nothing below 12 */
--lh-display: 1.15; /* Bebas headings */
--lh-body: 1.6; /* running text — WCAG 1.4.12 asks ≥1.5× */
--lh-data: 1.45; /* dense rows · tables · forms */
--ctl-h: 40px; /* inputs · selects · sm buttons */
--ctl-h-lg: 48px; /* primary CTAs */
--row-h: 48px; /* default data row */
--row-h-dense: 40px; /* compact lists */
--focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary);
--sidebar-w: 240px;
--content-max: 1120px;
--page-pad: var(--s-6); /* 24 desktop; surfaces step to --s-4 on mobile */
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--ff-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ── Shared primitives (mirror design-system/tokens.css) ── */
.d { font-family: var(--ff-display); text-transform: uppercase; letter-spacing: 0.5px; }
.m { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-3); }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--ff-display); font-size: var(--fz-md);
letter-spacing: 0.5px; text-transform: uppercase;
border: var(--bw-hair) solid transparent; border-radius: var(--r-md);
padding: 14px 24px; min-height: 48px; cursor: pointer; user-select: none;
box-shadow: var(--sh-2);
transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
.btn:active { transform: translateY(0); box-shadow: var(--sh-1); }
.btn-primary { background: var(--primary); color: var(--primary-ink); }
.btn-secondary { background: var(--surface-elev); color: var(--text); border-color: var(--card-border); }
.btn-ghost { background: transparent; color: var(--text); box-shadow: none; }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: 14px; }
.btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.pill {
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--ff-display); font-size: 11px;
letter-spacing: 0.5px; text-transform: uppercase;
padding: 4px 10px; border-radius: var(--r-full);
}
.pill-go { background: var(--primary-weak); color: var(--go); border: 1px solid rgba(52,211,153,.35); }
.pill-hype { background: rgba(242,223,128,.12); color: var(--hype); border: 1px solid rgba(242,223,128,.4); }
.pill-live { background: rgba(239,68,68,.12); color: var(--live); border: 1px solid rgba(239,68,68,.4); }
.pill-neutral { background: var(--surface-elev); color: var(--text-3); border: 1px solid var(--card-border); }
.chip {
display: inline-flex; align-items: center; justify-content: center;
padding: 8px 12px; border-radius: var(--r-sm);
border: var(--bw-hair) solid var(--card-border); background: var(--surface);
font-family: var(--ff-display); font-size: 13px; letter-spacing: 0.5px;
color: var(--text); cursor: pointer;
}
.chip.on { border-color: var(--primary); background: var(--primary-sel); color: var(--primary); }
.chip:disabled { opacity: .28; cursor: default; }
/* ── Film grain ────────────────────────────────────────────────────────────
The landing page's fractal-noise texture, promoted here so every public
surface (storefront, venue hub, tournaments, bookings, pay pages) carries the
same skin. Inline SVG data-URI — no asset, no request. Fixed + pointer-events
none, above every overlay (ceilings: storefront 95, console 130) so the grain
sits over modals too without ever intercepting a click. Not animated, so no
reduced-motion concern. Mirrored into web-league/src/styles/tokens.css and
web-admin/src/theme.css (lighter there — see the note in that file). */
body::after {
content: '';
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
opacity: 0.035;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 256px 256px;
}