feat: build dark fantasy application shell

apps/web/src/styles.scss

@@ -1 +1,77 @@
-/* You can add global styles to this file, and also import other style files */
+:root {
+  --ar-bg: #090b0d;
+  --ar-panel: #101316;
+  --ar-panel-muted: #17191b;
+  --ar-border: #554a39;
+  --ar-border-highlight: #9b7a42;
+  --ar-text: #ede7da;
+  --ar-text-muted: #aaa397;
+  --ar-gold: #c9a45f;
+  --ar-blue: #5ca9d8;
+  --ar-success: #78b96e;
+  --ar-warning: #d69445;
+  --ar-danger: #c74b42;
+  --ar-space-1: 0.25rem;
+  --ar-space-2: 0.5rem;
+  --ar-space-3: 0.75rem;
+  --ar-space-4: 1rem;
+  --ar-space-5: 1.5rem;
+  --ar-space-6: 2rem;
+  --ar-radius-sm: 0.15rem;
+  --ar-radius-md: 0.35rem;
+  --ar-shadow-raised: 0 0.45rem 1.4rem rgb(0 0 0 / 0.5);
+  --ar-motion-fast: 140ms ease;
+  --ar-motion-base: 220ms ease;
+  --ar-font-sm: 0.8125rem;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  min-block-size: 100%;
+  color-scheme: dark;
+  background: var(--ar-bg);
+}
+
+body {
+  min-block-size: 100dvh;
+  margin: 0;
+  color: var(--ar-text);
+  background: var(--ar-bg);
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+}
+
+button,
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+
+button:focus-visible,
+a:focus-visible {
+  outline: 2px solid var(--ar-blue);
+  outline-offset: -2px;
+}
+
+img {
+  max-inline-size: 100%;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}