/* ============================================================ NEONBET · Base / Reset Foundation (frontend-redesign-v2 · Phase 1) ------------------------------------------------------------ Modern reset + base html/body typography built on tokens.css. DORMANT BY DESIGN: every rule is scoped under :where(html.nbv2). The element does NOT carry the `nbv2` class in Phase 1, so this file is parsed but applies to NOTHING — the live app is unchanged. Phase 2 activates the redesign by adding class="nbv2" to (one line) and retiring the legacy reset in style.css. :where() keeps specificity at 0 so future component rules win without !important. No components, no colours-by-name, tokens only. ============================================================ */ /* ---- Box model + reset ---- */ :where(html.nbv2 *, html.nbv2 *::before, html.nbv2 *::after) { box-sizing: border-box; } :where(html.nbv2) :where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) { margin: 0; } /* ---- Document ---- */ :where(html.nbv2) { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: dark; } :where(html.nbv2) body { margin: 0; min-height: 100vh; background: var(--bg-base); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5; font-weight: 400; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } /* ---- Headings (display family, tight tracking) ---- */ :where(html.nbv2) :where(h1, h2, h3, h4, h5, h6) { font-family: var(--font-display); font-weight: 400; /* Archivo Black ships at 400, renders heavy */ line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; } :where(html.nbv2) h1 { font-size: var(--text-4xl); } :where(html.nbv2) h2 { font-size: var(--text-3xl); } :where(html.nbv2) h3 { font-size: var(--text-2xl); } :where(html.nbv2) h4 { font-size: var(--text-xl); } :where(html.nbv2) h5 { font-size: var(--text-lg); } :where(html.nbv2) h6 { font-size: var(--text-base); } :where(html.nbv2) p { line-height: 1.6; } :where(html.nbv2) small { font-size: var(--text-sm); } /* ---- Links ---- */ :where(html.nbv2) a { color: var(--neon-cyan); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } :where(html.nbv2) a:hover { color: var(--text-primary); } /* ---- Media defaults ---- */ :where(html.nbv2) :where(img, picture, video, canvas, svg) { display: block; max-width: 100%; } :where(html.nbv2) :where(img, video) { height: auto; } /* ---- Form controls inherit type ---- */ :where(html.nbv2) :where(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; } :where(html.nbv2) button { cursor: pointer; background: none; border: none; } :where(html.nbv2) :where(input, textarea) { background: none; border: none; } :where(html.nbv2) textarea { resize: vertical; } /* ---- Lists used as nav/grids ---- */ :where(html.nbv2) :where(ul, ol)[role="list"] { list-style: none; padding: 0; margin: 0; } /* ---- Accessible focus ring ---- */ :where(html.nbv2) :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); } /* ---- Selection ---- */ :where(html.nbv2) ::selection { background: var(--neon-magenta); color: #fff; } /* ---- Reduced motion (scoped) ---- */ @media (prefers-reduced-motion: reduce) { :where(html.nbv2) *, :where(html.nbv2) *::before, :where(html.nbv2) *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }