src/index.css

@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
@import "tailwindcss";

@theme {
  /* Earthy palette from reference */
  --color-earthy-bg: #F9F7F2;
  --color-earthy-muted-green: #6B705C;
  --color-earthy-soft-brown: #A5A58D;
  --color-earthy-dark-brown: #3D405B;
  --color-earthy-coral: #E07A5F;
  --color-earthy-sage: #B7B7A4;

  /* Semantic aliases (accent = coral for focus/selection) */
  --color-primary: #6B705C;
  --color-accent: #E07A5F;
  --color-neu-bg: #F9F7F2;
  --color-workspace-bg: #F9F7F2;
  --color-sidebar-border: #B7B7A4;

  --font-display: "Plus Jakarta Sans", sans-serif;
  --font-sans: "Plus Jakarta Sans", sans-serif;
  --font-story: "Crimson Pro", serif;

  /* Softer shadows for earthy theme */
  --shadow-neu-flat: 4px 4px 10px rgba(183, 183, 164, 0.25), -4px -4px 10px rgba(255, 255, 255, 0.8);
  --shadow-neu-pressed: inset 3px 3px 6px rgba(183, 183, 164, 0.2), inset -3px -3px 6px rgba(255, 255, 255, 0.6);
  --shadow-neu-btn: 3px 3px 8px rgba(183, 183, 164, 0.2), -3px -3px 8px rgba(255, 255, 255, 0.7);
  --shadow-neu-btn-hover: 2px 2px 5px rgba(183, 183, 164, 0.2), -2px -2px 5px rgba(255, 255, 255, 0.6);
}

/* Material Symbols - ensure they load and look sharp. */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Story/content font class */
.story-font {
  font-family: var(--font-story);
}

/* Custom Utilities (earthy) */
@utility neu-icon-btn {
  background-color: var(--color-neu-bg);
  box-shadow: var(--shadow-neu-btn);
  transition: all 0.2s;
  border: 1px solid var(--color-earthy-sage);

  &:hover {
    box-shadow: var(--shadow-neu-btn-hover);
    transform: translateY(0.5px);
  }

  &:active,
  &.active {
    box-shadow: var(--shadow-neu-pressed);
    color: var(--color-earthy-coral);
  }
}

@utility neu-circle-btn {
  @apply w-12 h-12 rounded-full flex items-center justify-center neu-icon-btn;
}

@utility neu-square-btn {
  @apply w-12 h-12 rounded-xl flex items-center justify-center neu-icon-btn;
}

@utility nm-flat {
  background-color: var(--color-neu-bg);
  box-shadow: var(--shadow-neu-flat);
}

@utility nm-inset {
  background-color: var(--color-neu-bg);
  box-shadow: var(--shadow-neu-pressed);
}

@utility status-led {
  @apply absolute bottom-1 right-1 w-2.5 h-2.5 rounded-full border-2;
  border-color: var(--color-earthy-bg);
}

/* Load model button: spinning indicator while model is loading */
@keyframes load-btn-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.load-btn-spin {
  animation: load-btn-spin 1s linear infinite;
}

/* Custom scrollbar (earthy-sage) */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-earthy-sage);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-earthy-soft-brown);
}

.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--color-earthy-sage);
  border-radius: 10px;
}

.abstract-wave {
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* Global resets for the theme */
body {
  background-color: var(--color-earthy-bg);
  font-family: var(--font-sans);
  color: var(--color-earthy-dark-brown);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

code,
pre,
.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* Waveform animation */
@keyframes wave {

  0%,
  100% {
    height: 10%;
    opacity: 0.5;
  }

  50% {
    height: 100%;
    opacity: 1;
  }
}

.waveform-bar-anim {
  animation: wave 1.2s ease-in-out infinite;
}

::selection {
  background-color: var(--color-earthy-coral);
  color: white;
}

.transition-glass {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pulse-gentle {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.animate-pulse-gentle {
  animation: pulse-gentle 2s ease-in-out infinite;
}

/* Debug panel adjustable settings: earthy track + dark handle */
.debug-slider {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.debug-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: var(--color-earthy-sage);
  opacity: 0.4;
}

.debug-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-earthy-muted-green);
  border: 1px solid var(--color-earthy-dark-brown);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  margin-top: -5px;
  cursor: pointer;
}

.debug-slider::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: var(--color-earthy-sage);
  opacity: 0.4;
}

.debug-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-earthy-muted-green);
  border: 1px solid var(--color-earthy-dark-brown);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

/* Settings panel: slide in from the right, no full-screen block */
.settings-panel-slide {
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
}
.settings-panel-slide--open {
  transform: translateX(0);
}