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 */
    --background: oklch(100% 0 0);
    --foreground: oklch(9.8% 0.038 285.8);

    --card: oklch(100% 0 0);
    --card-foreground: oklch(9.8% 0.038 285.8);

    --popover: oklch(100% 0 0);
    --popover-foreground: oklch(9.8% 0.038 285.8);

    --primary: oklch(22.4% 0.053 285.8);
    --primary-foreground: oklch(98% 0 0);

    --secondary: oklch(96.1% 0 0);
    --secondary-foreground: oklch(13.8% 0.038 285.8);

    --muted: oklch(96.1% 0 0);
    --muted-foreground: oklch(45.1% 0.015 285.9);

    --accent: oklch(96.1% 0 0);
    --accent-foreground: oklch(13.8% 0.038 285.8);

    --destructive: oklch(60.2% 0.168 29.2);
    --destructive-foreground: oklch(98% 0 0);

    --border: oklch(89.8% 0 0);
    --input: oklch(89.8% 0 0);
    --ring: oklch(22.4% 0.053 285.8);

    --radius: 0.5rem;

    --success: oklch(60% 0.15 145);
    --success-foreground: oklch(98% 0 0);

    --warning: oklch(75% 0.15 85);
    --warning-foreground: oklch(20% 0 0);

    --info: oklch(65% 0.15 240);
    --info-foreground: oklch(98% 0 0);

    /* Audio-specific colors */
    --waveform: oklch(50% 0.1 240);
    --waveform-progress: oklch(60% 0.15 145);
    --waveform-selection: oklch(65% 0.15 240);
    --waveform-bg: oklch(98% 0 0);
  }

  .dark {
    /* Dark mode colors using OKLCH - harmonized gray palette */
    --background: oklch(12% 0.01 285.8);
    --foreground: oklch(85% 0.005 285.8);

    --card: oklch(15% 0.012 285.8);
    --card-foreground: oklch(85% 0.005 285.8);

    --popover: oklch(15% 0.012 285.8);
    --popover-foreground: oklch(85% 0.005 285.8);

    --primary: oklch(70% 0.15 240);
    --primary-foreground: oklch(15% 0.012 285.8);

    --secondary: oklch(20% 0.015 285.8);
    --secondary-foreground: oklch(80% 0.005 285.8);

    --muted: oklch(18% 0.012 285.8);
    --muted-foreground: oklch(60% 0.008 285.9);

    --accent: oklch(22% 0.015 285.8);
    --accent-foreground: oklch(80% 0.005 285.8);

    --destructive: oklch(55% 0.18 29.2);
    --destructive-foreground: oklch(85% 0.005 285.8);

    --border: oklch(25% 0.015 285.8);
    --input: oklch(20% 0.015 285.8);
    --ring: oklch(70% 0.15 240);

    --success: oklch(60% 0.15 145);
    --success-foreground: oklch(15% 0.012 285.8);

    --warning: oklch(70% 0.15 85);
    --warning-foreground: oklch(15% 0.012 285.8);

    --info: oklch(65% 0.15 240);
    --info-foreground: oklch(15% 0.012 285.8);

    /* Audio-specific colors */
    --waveform: oklch(70% 0.15 240);
    --waveform-progress: oklch(65% 0.15 145);
    --waveform-selection: oklch(70% 0.15 240);
    --waveform-bg: oklch(10% 0.01 285.8);
  }
}

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