librodrome/app/assets/css/main.css

@import './fonts.css';
@import './animations.css';
@import './typography.css';

:root {
  --color-primary: 18 80% 45%;
  --color-accent: 32 85% 50%;
  --color-bg: 16 12% 4%;
  --color-surface: 16 12% 9%;
  --color-surface-light: 16 10% 14%;
  --color-text: 0 0% 100%;
  --color-text-muted: 0 0% 60%;

  --header-height: 4rem;
  --player-height: 0rem;
  --sidebar-width: 280px;

  --font-display: 'Outfit', sans-serif;
  --font-sans: 'Inter', 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;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

a {
  text-decoration: none;
  color: inherit;
}

::selection {
  background-color: hsl(var(--color-primary) / 0.3);
  color: hsl(var(--color-text));
}

: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);
}

/* ═══ Light mode overrides ═══ */
.palette-light {
  color-scheme: light;
}

.palette-light,
.palette-light .text-white {
  color: hsl(var(--color-text));
}

/* white with opacity → dark text with same opacity */
.palette-light .text-white\/20 { color: hsl(var(--color-text) / 0.2); }
.palette-light .text-white\/30 { color: hsl(var(--color-text) / 0.3); }
.palette-light .text-white\/40 { color: hsl(var(--color-text) / 0.4); }
.palette-light .text-white\/45 { color: hsl(var(--color-text) / 0.45); }
.palette-light .text-white\/50 { color: hsl(var(--color-text) / 0.5); }
.palette-light .text-white\/60 { color: hsl(var(--color-text) / 0.6); }
.palette-light .text-white\/70 { color: hsl(var(--color-text) / 0.7); }
.palette-light .text-white\/80 { color: hsl(var(--color-text) / 0.8); }
.palette-light .text-white\/85 { color: hsl(var(--color-text) / 0.85); }

/* white backgrounds → surface tones */
.palette-light .bg-white\/5 { background-color: hsl(var(--color-text) / 0.04); }
.palette-light .bg-white\/8 { background-color: hsl(var(--color-text) / 0.06); }
.palette-light .bg-white\/10 { background-color: hsl(var(--color-text) / 0.07); }

/* borders */
.palette-light .border-white\/8 { border-color: hsl(var(--color-text) / 0.1); }

/* hover overrides */
.palette-light .hover\:text-white:hover,
.palette-light .hover\:text-white\/70:hover,
.palette-light .hover\:text-white\/80:hover {
  color: hsl(var(--color-text));
}
.palette-light .hover\:text-white\/60:hover {
  color: hsl(var(--color-text) / 0.6);
}
.palette-light .hover\:bg-white\/5:hover {
  background-color: hsl(var(--color-text) / 0.04);
}
.palette-light .hover\:bg-white\/10:hover {
  background-color: hsl(var(--color-text) / 0.07);
}

/* placeholder overrides */
.palette-light .placeholder\:text-white\/30::placeholder {
  color: hsl(var(--color-text) / 0.3);
}

/* Prose/content in light mode */
.palette-light .prose { color: hsl(var(--color-text)); }
.palette-light .prose :where(h1,h2,h3,h4,h5,h6) { color: hsl(var(--color-text)); }

/* Active states */
.palette-light .text-white\! { color: hsl(var(--color-text)) !important; }
.palette-light .active-class .text-white\! { color: hsl(var(--color-text)) !important; }

/* text-gradient in light mode */
.palette-light .text-gradient {
  background-image: linear-gradient(to right, hsl(var(--color-primary)), hsl(var(--color-accent)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* card surfaces */
.palette-light .card-surface {
  background: hsl(var(--color-surface));
  border-color: hsl(var(--color-text) / 0.1);
}

/* 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);
}