/* ══════════════════════════════════════════════════════════════ BASE — resets, typography defaults, ambient HUD effects, consolidated accessibility rules (focus-visible, reduced-motion). Loaded on every page, after tokens.css. ══════════════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* ── Font size — root-level so it cascades through every rem-based measurement (spacing, component font-size) in the design system, not just body text. "md" (16px) is the unset/default state. ── */ html{background:var(--bg);font-size:16px} [data-font-size="sm"]{font-size:14px} [data-font-size="lg"]{font-size:18px} body{ background:var(--bg);color:var(--text);font-family:var(--body); font-size:14px;-webkit-font-smoothing:antialiased;line-height:1.5; } a{color:var(--c)} button,input,textarea,select{font-family:inherit;color:inherit} /* ── Custom scrollbar ──────────────────────────────── */ ::-webkit-scrollbar{width:4px;height:4px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(34,184,212,.28);border-radius:2px} ::-webkit-scrollbar-thumb:hover{background:rgba(34,184,212,.5)} /* ── Ambient HUD effects (opt-in via class on ) ────────── .bg-grid — soft radial cyan glow behind the whole page .scanlines — reserved hook, currently inert (kept for markup compatibility with pages that still include the div) ── */ .bg-grid{pointer-events:none;position:fixed;inset:0;z-index:0;background:radial-gradient(ellipse 70% 50% at 50% -10%,rgba(34,184,212,.07),transparent 60%)} .scanlines{display:none} [data-theme="light"] .bg-grid{background:radial-gradient(ellipse 70% 50% at 50% -10%,rgba(34,184,212,.05),transparent 60%)} body.hud-scan::before{content:'';position:fixed;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(34,184,212,.3),transparent);animation:scan-sweep 4s linear infinite;pointer-events:none;z-index:1000} @keyframes scan-sweep{0%{top:-2px}100%{top:100%}} /* ── Touch targets — 16px min font on form controls avoids iOS zoom-on-focus, 44px min-height meets WCAG 2.5.5 on primary actions at mobile widths ── */ button,input,textarea,select{font-size:max(.875rem,16px)} button{min-height:36px} @media(max-width:640px){ .btn,.btn--primary,.btn--ghost,.dep-btn,.ob-btn,.conn-btn{min-height:44px} } /* ── FOCUS-VISIBLE — one consolidated rule covering every interactive class from the component library, replacing per-file duplicates ── */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible, select:focus-visible,[tabindex]:focus-visible, .btn:focus-visible,.card:focus-visible,.tb-pill:focus-visible,.tb-util-btn:focus-visible, .mode-btn:focus-visible,.tmpl-btn:focus-visible,.new-btn:focus-visible, .mlog-item:focus-visible,.mlog-rerun:focus-visible,.pb:focus-visible, .action-btn:focus-visible,.tb-link:focus-visible,.module-nav-link:focus-visible, .deploy-btn-big:focus-visible,.config-edit:focus-visible, .conn-btn:focus-visible,.conn-btn-ghost:focus-visible, .sn-item:focus-visible,.mem-item button:focus-visible, .fu-auto-btn:focus-visible,.db-next:focus-visible,.dep-btn:focus-visible, .mtb-item:focus-visible,.sidebar a:focus-visible{ outline:2px solid var(--c);outline-offset:2px; } /* ── REDUCED MOTION — one consolidated rule; disable decorative/continuous animation, keep functional spinners (.spin, .doc-spin) ── */ @media(prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .spin,.doc-spin{animation-duration:.7s!important;animation-iteration-count:infinite!important} }