audio-ui/app/globals.css

@import "tailwindcss";

/* Source directives - scan components for Tailwind classes */
@source "../components/editor/*.{js,ts,jsx,tsx}";
@source "../components/effects/*.{js,ts,jsx,tsx}";
@source "../components/tracks/*.{js,ts,jsx,tsx}";
@source "../components/automation/*.{js,ts,jsx,tsx}";
@source "../components/analysis/*.{js,ts,jsx,tsx}";
@source "../components/recording/*.{js,ts,jsx,tsx}";
@source "../components/export/*.{js,ts,jsx,tsx}";
@source "../components/project/*.{js,ts,jsx,tsx}";
@source "../components/layout/*.{js,ts,jsx,tsx}";
@source "../components/ui/*.{js,ts,jsx,tsx}";
@source "*.{js,ts,jsx,tsx}";

/* Custom dark mode variant */
@custom-variant dark (&:is(.dark *));

/* CSS Variables for theming */
@layer base {
  :root {
    /* Light mode colors using OKLCH - bright neon palette */
    --background: oklch(98% 0.03 180);
    --foreground: oklch(20% 0.12 310);

    --card: oklch(99% 0.02 200);
    --card-foreground: oklch(20% 0.12 310);

    --popover: oklch(99% 0.02 200);
    --popover-foreground: oklch(20% 0.12 310);

    --primary: oklch(58% 0.28 320);
    --primary-foreground: oklch(99% 0.02 200);

    --secondary: oklch(92% 0.08 200);
    --secondary-foreground: oklch(25% 0.15 300);

    --muted: oklch(94% 0.05 190);
    --muted-foreground: oklch(40% 0.12 260);

    --accent: oklch(90% 0.12 180);
    --accent-foreground: oklch(25% 0.18 310);

    --destructive: oklch(60% 0.28 15);
    --destructive-foreground: oklch(99% 0.02 200);

    --border: oklch(85% 0.08 200);
    --input: oklch(92% 0.06 190);
    --ring: oklch(58% 0.28 320);

    --radius: 0.5rem;

    --success: oklch(58% 0.25 160);
    --success-foreground: oklch(99% 0.02 200);

    --warning: oklch(68% 0.25 85);
    --warning-foreground: oklch(20% 0.12 310);

    --info: oklch(62% 0.25 240);
    --info-foreground: oklch(99% 0.02 200);

    /* Audio-specific colors - neon cyan/magenta */
    --waveform: oklch(60% 0.26 200);
    --waveform-progress: oklch(58% 0.28 320);
    --waveform-selection: oklch(62% 0.26 180);
    --waveform-bg: oklch(99% 0.015 190);
  }

  .dark {
    /* Dark mode colors using OKLCH - vibrant neon palette */
    --background: oklch(15% 0.015 265);
    --foreground: oklch(92% 0.02 180);

    --card: oklch(18% 0.02 270);
    --card-foreground: oklch(92% 0.02 180);

    --popover: oklch(18% 0.02 270);
    --popover-foreground: oklch(92% 0.02 180);

    --primary: oklch(75% 0.25 310);
    --primary-foreground: oklch(18% 0.02 270);

    --secondary: oklch(22% 0.03 280);
    --secondary-foreground: oklch(85% 0.15 180);

    --muted: oklch(20% 0.02 270);
    --muted-foreground: oklch(65% 0.1 200);

    --accent: oklch(25% 0.03 290);
    --accent-foreground: oklch(85% 0.2 320);

    --destructive: oklch(65% 0.25 20);
    --destructive-foreground: oklch(92% 0.02 180);

    --border: oklch(30% 0.05 280);
    --input: oklch(22% 0.03 280);
    --ring: oklch(75% 0.25 310);

    --success: oklch(70% 0.22 160);
    --success-foreground: oklch(18% 0.02 270);

    --warning: oklch(75% 0.22 80);
    --warning-foreground: oklch(18% 0.02 270);

    --info: oklch(72% 0.22 240);
    --info-foreground: oklch(18% 0.02 270);

    /* Audio-specific colors - neon cyan/magenta */
    --waveform: oklch(72% 0.25 200);
    --waveform-progress: oklch(75% 0.25 310);
    --waveform-selection: oklch(70% 0.25 180);
    --waveform-bg: oklch(12% 0.02 270);
  }
}

/* Theme inline - map CSS variables to Tailwind colors */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-waveform: var(--waveform);
  --color-waveform-progress: var(--waveform-progress);
  --color-waveform-selection: var(--waveform-selection);
  --color-waveform-bg: var(--waveform-bg);

  --radius: var(--radius);
}

/* Global styles */
@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }

  /* Apply custom scrollbar globally */
  * {
    scrollbar-width: thin;
  }

  *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  *::-webkit-scrollbar-track {
    background: var(--muted);
    border-radius: 5px;
  }

  *::-webkit-scrollbar-thumb {
    background: color-mix(in oklch, var(--muted-foreground) 30%, transparent);
    border-radius: 5px;
    border: 2px solid var(--muted);
    transition: background 0.2s ease;
  }

  *::-webkit-scrollbar-thumb:hover {
    background: color-mix(in oklch, var(--muted-foreground) 50%, transparent);
  }

  *::-webkit-scrollbar-thumb:active {
    background: color-mix(in oklch, var(--muted-foreground) 70%, transparent);
  }

  /* Scrollbar corners */
  *::-webkit-scrollbar-corner {
    background: var(--muted);
  }
}

/* Custom animations */
@layer utilities {
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideInFromRight {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes slideDown {
    from {
      transform: translateY(-10px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes slideUp {
    from {
      transform: translateY(10px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes scaleIn {
    from {
      transform: scale(0.95);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes pulseSubtle {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.8;
    }
  }

  @keyframes shimmer {
    0% {
      background-position: -1000px 0;
    }
    100% {
      background-position: 1000px 0;
    }
  }

  @keyframes progress {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

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

  .animate-slideInFromRight {
    animation: slideInFromRight 0.3s ease-out;
  }

  .animate-slideDown {
    animation: slideDown 0.3s ease-out;
  }

  .animate-slideUp {
    animation: slideUp 0.3s ease-out;
  }

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

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

  .animate-shimmer {
    animation: shimmer 2s linear infinite;
  }

  .animate-progress {
    animation: progress 1.5s ease-in-out infinite;
  }

  .animate-spin {
    animation: spin 1s linear infinite;
  }
}

/* Custom scrollbar */
@layer utilities {
  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in oklch, var(--muted-foreground) 30%, transparent) var(--muted);
  }

  .custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: var(--muted);
    border-radius: 4px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: color-mix(in oklch, var(--muted-foreground) 30%, transparent);
    border-radius: 4px;
    border: 2px solid var(--muted);
    transition: background 0.2s ease;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: color-mix(in oklch, var(--muted-foreground) 50%, transparent);
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:active {
    background: color-mix(in oklch, var(--muted-foreground) 70%, transparent);
  }

  /* Clip/Region styling for Ableton-style appearance */
  .track-clip-container {
    @apply absolute inset-2 rounded-sm shadow-sm overflow-hidden transition-all duration-150;
    background: oklch(0.2 0.01 var(--hue) / 0.3);
    border: 1px solid oklch(0.4 0.02 var(--hue) / 0.5);
  }

  .track-clip-container:hover {
    border-color: oklch(0.5 0.03 var(--hue) / 0.7);
  }

  .track-clip-header {
    @apply absolute top-0 left-0 right-0 h-4 pointer-events-none z-10 px-2 flex items-center;
    background: linear-gradient(to bottom, rgb(0 0 0 / 0.1), transparent);
  }
}

@layer utilities {
  [data-theme='light'] .track-clip-container {
    background: oklch(0.95 0.01 var(--hue) / 0.3);
    border: 1px solid oklch(0.7 0.02 var(--hue) / 0.5);
  }

  [data-theme='light'] .track-clip-header {
    background: linear-gradient(to bottom, rgb(255 255 255 / 0.15), transparent);
  }
}