@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 30 25% 95%;
    --foreground: 12 100% 4%;
    --card: 30 30% 100%;
    --card-foreground: 12 100% 4%;
    --popover: 30 30% 100%;
    --popover-foreground: 12 100% 4%;
    --primary: 24 95% 53%;
    --primary-foreground: 0 0% 100%;
    --secondary: 45 97% 65%;
    --secondary-foreground: 12 100% 4%;
    --accent: 199 90% 60%;
    --accent-foreground: 0 0% 100%;
    --muted: 30 20% 90%;
    --muted-foreground: 20 10% 44%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 30 15% 86%;
    --input: 30 15% 88%;
    --ring: 24 95% 53%;
    --radius: 0.75rem;

    --success: 152 55% 42%;
    --success-foreground: 0 0% 100%;
    --warning: 45 97% 65%;
    --warning-foreground: 12 100% 4%;
    --info: 199 90% 60%;
    --info-foreground: 0 0% 100%;

    --surface: 30 25% 97%;
    --surface-raised: 30 30% 100%;
    --surface-sunken: 30 20% 91%;

    --sidebar-background: 15 25% 10%;
    --sidebar-foreground: 20 10% 55%;
    --sidebar-primary: 24 95% 53%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 15 20% 15%;
    --sidebar-accent-foreground: 30 20% 92%;
    --sidebar-border: 15 20% 15%;
    --sidebar-ring: 24 95% 53%;
  }

  /* Charcoal variant in light mode — sidebar uses cool blue-gray, content area uses cool light gray */
  .charcoal:not(.dark) {
    --background: 220 20% 94%;
    --card: 0 0% 100%;
    --popover: 0 0% 100%;
    --muted: 220 16% 88%;
    --border: 220 14% 84%;
    --input: 220 14% 88%;

    --surface: 220 18% 96%;
    --surface-raised: 0 0% 100%;
    --surface-sunken: 220 18% 90%;

    --sidebar-background: 220 18% 10%;
    --sidebar-foreground: 220 8% 55%;
    --sidebar-primary: 24 95% 53%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 220 12% 16%;
    --sidebar-accent-foreground: 36 15% 92%;
    --sidebar-border: 220 12% 16%;
    --sidebar-ring: 24 95% 53%;
  }

  .dark {
    --background: 15 25% 7%;
    --foreground: 25 100% 98%;
    --card: 15 22% 10%;
    --card-foreground: 25 100% 98%;
    --popover: 15 22% 12%;
    --popover-foreground: 25 100% 98%;
    --primary: 24 95% 53%;
    --primary-foreground: 0 0% 100%;
    --secondary: 45 97% 65%;
    --secondary-foreground: 15 25% 7%;
    --accent: 199 90% 60%;
    --accent-foreground: 0 0% 100%;
    --muted: 15 20% 15%;
    --muted-foreground: 20 15% 55%;
    --destructive: 352 72% 66%;
    --destructive-foreground: 15 25% 7%;
    --border: 15 20% 15%;
    --input: 15 20% 15%;
    --ring: 24 95% 53%;

    --success: 152 50% 45%;
    --success-foreground: 0 0% 100%;
    --warning: 45 90% 60%;
    --warning-foreground: 15 25% 7%;
    --info: 199 85% 60%;
    --info-foreground: 0 0% 100%;

    --surface: 15 22% 8%;
    --surface-raised: 15 22% 12%;
    --surface-sunken: 15 25% 5%;

    --sidebar-background: 15 25% 5%;
    --sidebar-foreground: 20 15% 50%;
    --sidebar-primary: 24 95% 53%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 15 20% 12%;
    --sidebar-accent-foreground: 25 100% 95%;
    --sidebar-border: 15 20% 12%;
    --sidebar-ring: 24 95% 53%;
  }

  .dark.charcoal {
    --background: 220 16% 8%;
    --foreground: 36 15% 92%;
    --card: 220 14% 11%;
    --card-foreground: 36 15% 92%;
    --popover: 220 14% 13%;
    --popover-foreground: 36 15% 92%;
    --primary: 24 95% 53%;
    --primary-foreground: 0 0% 100%;
    --secondary: 45 97% 65%;
    --secondary-foreground: 220 16% 8%;
    --accent: 199 90% 60%;
    --accent-foreground: 0 0% 100%;
    --muted: 220 10% 14%;
    --muted-foreground: 220 8% 50%;
    --destructive: 352 72% 66%;
    --destructive-foreground: 220 16% 8%;
    --border: 220 10% 16%;
    --input: 220 10% 18%;
    --ring: 24 95% 53%;

    --success: 152 50% 45%;
    --success-foreground: 0 0% 100%;
    --warning: 45 90% 60%;
    --warning-foreground: 220 16% 8%;
    --info: 199 85% 60%;
    --info-foreground: 0 0% 100%;

    --surface: 220 14% 9%;
    --surface-raised: 220 14% 13%;
    --surface-sunken: 220 16% 5%;

    --sidebar-background: 220 18% 5%;
    --sidebar-foreground: 220 8% 50%;
    --sidebar-primary: 24 95% 53%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 220 12% 12%;
    --sidebar-accent-foreground: 36 15% 92%;
    --sidebar-border: 220 12% 12%;
    --sidebar-ring: 24 95% 53%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground font-body antialiased;
  }
  :focus-visible {
    outline: 2px solid hsl(var(--ring) / 0.55);
    outline-offset: 2px;
  }
}

@layer utilities {
  .font-display {
    font-family: 'Plus Jakarta Sans', sans-serif;
  }
  .font-body {
    font-family: 'DM Sans', sans-serif;
  }
  .font-mono {
    font-family: 'Space Mono', monospace;
  }
  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.2);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.4);
}

/* Pulsing dot animation */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}
.animate-pulse-dot {
  animation: pulse-dot 2s ease-in-out infinite;
}

/* FAB gradient animation */
@keyframes fab-glow {
  0%, 100% { box-shadow: 0 0 20px hsl(24 90% 55% / 0.4), 0 0 60px hsl(24 90% 55% / 0.1); }
  50% { box-shadow: 0 0 30px hsl(210 80% 55% / 0.4), 0 0 80px hsl(210 80% 55% / 0.1); }
}
.animate-fab-glow {
  animation: fab-glow 3s ease-in-out infinite;
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, hsl(24 95% 53%), hsl(45 97% 65%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark .gradient-text {
  background: linear-gradient(135deg, hsl(24 95% 53%), hsl(45 97% 65%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hide scrollbar but keep scroll functionality */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Active press state */
.press-scale {
  transition: transform 0.1s ease;
}
.press-scale:active {
  transform: scale(0.97);
}
