initiation librodrome

app/assets/css/main.css

@@ -0,0 +1,90 @@
+@import './fonts.css';
+@import './animations.css';
+@import './typography.css';
+
+:root {
+  --color-primary: 12 76% 48%;
+  --color-accent: 36 80% 52%;
+  --color-bg: 20 8% 3.5%;
+  --color-surface: 20 8% 8%;
+  --color-surface-light: 20 8% 13%;
+  --color-text: 0 0% 100%;
+  --color-text-muted: 0 0% 100% / 0.6;
+
+  --header-height: 4rem;
+  --player-height: 5rem;
+  --sidebar-width: 280px;
+
+  --font-display: 'Syne', sans-serif;
+  --font-sans: 'Space Grotesk', sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: var(--font-sans);
+  background-color: hsl(var(--color-bg));
+  color: hsl(var(--color-text));
+  color-scheme: dark;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  min-height: 100dvh;
+}
+
+::selection {
+  background-color: hsl(var(--color-primary) / 0.3);
+  color: white;
+}
+
+:focus-visible {
+  outline: 2px solid hsl(var(--color-primary));
+  outline-offset: 2px;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--color-text) / 0.15);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--color-text) / 0.25);
+}
+
+/* Page transitions */
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 300ms var(--ease-out-expo),
+              transform 300ms var(--ease-out-expo);
+}
+
+.page-enter-from {
+  opacity: 0;
+  transform: translateY(8px);
+}
+
+.page-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}