First commit

frontend/app/assets/css/_base.scss

@@ -0,0 +1,65 @@
+// ---------- Base ----------
+*, *::before, *::after { box-sizing: border-box; }
+
+html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
+
+body {
+  margin: 0;
+  font-family:
+    'Computer Modern',
+    'CMU Serif',
+    Georgia,
+    'Times New Roman',
+    serif;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+  transition: background-color 0.25s ease, color 0.25s ease;
+}
+
+::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
+
+a { color: var(--accent); }
+
+button {
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+}
+
+input, textarea, select { font: inherit; color: inherit; }
+
+:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }
+
+.container {
+  width: 100%;
+  max-width: 1160px;
+  margin-inline: auto;
+  padding-inline: clamp(16px, 4vw, 32px);
+}
+
+.mono,
+code,
+pre,
+textarea.md-input {
+  font-family: ui-monospace, 'JetBrains Mono', 'Cascadia Code', 'Fira Code',
+    Menlo, Consolas, monospace;
+}
+
+// ---------- Scrollbars (subtle, webkit) ----------
+::-webkit-scrollbar { width: 11px; height: 10px; }
+
+::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--text) 18%, transparent);
+  border-radius: 8px;
+  border: 3px solid transparent;
+  background-clip: content-box;
+
+  &:hover {
+    background: color-mix(in srgb, var(--text) 30%, transparent);
+    background-clip: content-box;
+  }
+}