[BETA] Initial Commit (Nix Support Only)

src/styles/global.css

@@ -0,0 +1,105 @@
+/* ─────────────────────────────────────────────
+   Moku — Global Styles
+   ───────────────────────────────────────────── */
+
+@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap");
+@import "./tokens.css";
+@import "./animations.css";
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body, #root {
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  background: var(--bg-void);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: var(--leading-base);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: "kern" 1, "liga" 1;
+  /* GPU: promote root to compositor layer for smooth compositing */
+  transform: translateZ(0);
+}
+
+/* Scrollbars */
+::-webkit-scrollbar { width: 4px; height: 4px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+  border-radius: var(--radius-full);
+  transition: background var(--t-base);
+}
+::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
+
+/* Focus */
+:focus-visible {
+  outline: 1px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
+/* Selection */
+::selection {
+  background: var(--accent-dim);
+  color: var(--accent-fg);
+}
+
+/* Base resets */
+button {
+  font-family: inherit;
+  cursor: pointer;
+  background: none;
+  border: none;
+  color: inherit;
+}
+
+input, textarea {
+  font-family: inherit;
+  background: none;
+  border: none;
+  color: inherit;
+}
+
+img { display: block; }
+a { color: inherit; text-decoration: none; }
+
+/* Range — reader scrubber */
+input[type="range"] {
+  flex: 1;
+  appearance: none;
+  -webkit-appearance: none;
+  height: 2px;
+  background: var(--border-strong);
+  border-radius: var(--radius-full);
+  outline: none;
+  cursor: pointer;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--accent-fg);
+  cursor: pointer;
+  transition: background var(--t-base), transform var(--t-base);
+}
+
+input[type="range"]::-webkit-slider-thumb:hover {
+  background: var(--accent-bright);
+  transform: scale(1.15);
+}
+
+/* Monospace label utility */
+.mono {
+  font-family: var(--font-ui);
+  letter-spacing: var(--tracking-wide);
+}