bambuddy/frontend/src/index.css

@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Enable class-based dark mode for Tailwind v4 */
@custom-variant dark (&:where(.dark, .dark *));

@theme {
  /* Bambu Lab brand colors - always the same */
  --color-bambu-green: #00ae42;
  --color-bambu-green-light: #00c64d;
  --color-bambu-green-dark: #009438;

  /* Theme-aware colors via CSS variables */
  --color-bambu-dark: var(--bg-primary);
  --color-bambu-dark-secondary: var(--bg-secondary);
  --color-bambu-dark-tertiary: var(--bg-tertiary);
  --color-bambu-gray: var(--text-muted);
  --color-bambu-gray-light: var(--text-secondary);
  --color-bambu-gray-dark: var(--text-tertiary);
}

/* Light mode (default) */
:root {
  --bg-primary: #f5f5f5;
  --bg-secondary: #ffffff;
  --bg-tertiary: #e5e5e5;
  --text-primary: #1a1a1a;
  --text-secondary: #4a4a4a;
  --text-muted: #6b6b6b;
  --text-tertiary: #808080;
  --border-color: #d4d4d4;

  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Dark mode */
.dark {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #3d3d3d;
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --text-muted: #808080;
  --text-tertiary: #4a4a4a;
  --border-color: #3d3d3d;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  margin: 0;
  min-height: 100vh;
  transition: background-color 0.2s ease, color 0.2s ease;
}

#root {
  min-height: 100vh;
}

/* Override text-white to be theme-aware */
.text-white {
  color: var(--text-primary);
}

/* Smooth transitions for theme changes */
.bg-bambu-dark,
.bg-bambu-dark-secondary,
.bg-bambu-dark-tertiary,
.border-bambu-dark-tertiary {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Toast slide-in animation */
@keyframes slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-slide-in {
  animation: slide-in 0.2s ease-out;
}

/* Theme-aware icon inversion - only invert in dark mode */
.icon-theme {
  opacity: 0.5;
}

.dark .icon-theme {
  filter: invert(1);
  opacity: 0.4;
}

/* Green-colored icon for active status indicators */
.icon-green {
  filter: invert(48%) sepia(89%) saturate(459%) hue-rotate(93deg) brightness(95%) contrast(92%);
  opacity: 1;
}

/* Orange/red-colored icon for heating indicators */
.icon-heating {
  filter: invert(50%) sepia(100%) saturate(1000%) hue-rotate(360deg) brightness(100%) contrast(100%);
  opacity: 1;
}

/* Jogpad theme styling - darken background in dark mode */
.jogpad-theme {
  /* Light mode - normal */
}

.dark .jogpad-theme {
  filter: brightness(0.35) contrast(1.2);
}

/* Empty AMS slot with diagonal stripes */
.ams-empty-slot {
  background: repeating-linear-gradient(
    45deg,
    #444,
    #444 2px,
    #222 2px,
    #222 4px
  );
}

.dark .ams-empty-slot {
  background: repeating-linear-gradient(
    45deg,
    #555,
    #555 2px,
    #333 2px,
    #333 4px
  );
}

/* Touch manipulation to prevent zoom on double-tap */
.touch-manipulation {
  touch-action: manipulation;
}

/* Safe area insets for notched devices */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.safe-area-top {
  padding-top: env(safe-area-inset-top, 0);
}

/* Hide scrollbar but keep functionality */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Mobile drawer animation */
@keyframes slide-in-left {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.animate-slide-in-left {
  animation: slide-in-left 0.3s ease-out;
}