diff --git a/app/globals.css b/app/globals.css index aed065f..fff173d 100644 --- a/app/globals.css +++ b/app/globals.css @@ -19,97 +19,97 @@ /* CSS Variables for theming */ @layer base { :root { - /* Light mode colors using OKLCH - soft, gentle gray palette */ - --background: oklch(93% 0.005 285.8); - --foreground: oklch(28% 0.012 285.8); + /* Light mode colors using OKLCH - vibrant colorful palette */ + --background: oklch(95% 0.015 280); + --foreground: oklch(25% 0.05 260); - --card: oklch(96% 0.003 285.8); - --card-foreground: oklch(28% 0.012 285.8); + --card: oklch(98% 0.01 290); + --card-foreground: oklch(25% 0.05 260); - --popover: oklch(96% 0.003 285.8); - --popover-foreground: oklch(28% 0.012 285.8); + --popover: oklch(98% 0.01 290); + --popover-foreground: oklch(25% 0.05 260); - --primary: oklch(58% 0.14 240); - --primary-foreground: oklch(96% 0.003 285.8); + --primary: oklch(55% 0.22 310); + --primary-foreground: oklch(98% 0.01 290); - --secondary: oklch(88% 0.005 285.8); - --secondary-foreground: oklch(32% 0.012 285.8); + --secondary: oklch(90% 0.03 280); + --secondary-foreground: oklch(30% 0.08 270); - --muted: oklch(90% 0.005 285.8); - --muted-foreground: oklch(48% 0.008 285.9); + --muted: oklch(92% 0.02 285); + --muted-foreground: oklch(45% 0.08 260); - --accent: oklch(88% 0.005 285.8); - --accent-foreground: oklch(32% 0.012 285.8); + --accent: oklch(88% 0.05 300); + --accent-foreground: oklch(30% 0.1 280); - --destructive: oklch(58% 0.16 29.2); - --destructive-foreground: oklch(96% 0.003 285.8); + --destructive: oklch(58% 0.22 20); + --destructive-foreground: oklch(98% 0.01 290); - --border: oklch(85% 0.005 285.8); - --input: oklch(88% 0.005 285.8); - --ring: oklch(58% 0.14 240); + --border: oklch(82% 0.03 280); + --input: oklch(88% 0.03 285); + --ring: oklch(55% 0.22 310); --radius: 0.5rem; - --success: oklch(56% 0.14 145); - --success-foreground: oklch(96% 0.003 285.8); + --success: oklch(55% 0.2 160); + --success-foreground: oklch(98% 0.01 290); - --warning: oklch(62% 0.14 85); - --warning-foreground: oklch(28% 0.012 285.8); + --warning: oklch(65% 0.2 80); + --warning-foreground: oklch(25% 0.05 260); - --info: oklch(62% 0.14 240); - --info-foreground: oklch(96% 0.003 285.8); + --info: oklch(60% 0.2 240); + --info-foreground: oklch(98% 0.01 290); - /* Audio-specific colors */ - --waveform: oklch(58% 0.14 240); - --waveform-progress: oklch(56% 0.14 145); - --waveform-selection: oklch(62% 0.14 240); - --waveform-bg: oklch(97% 0.002 285.8); + /* Audio-specific colors - vibrant cyan/purple */ + --waveform: oklch(58% 0.22 260); + --waveform-progress: oklch(55% 0.22 310); + --waveform-selection: oklch(60% 0.22 200); + --waveform-bg: oklch(98% 0.008 285); } .dark { - /* Dark mode colors using OKLCH - lighter, softer palette */ - --background: oklch(18% 0.008 285.8); - --foreground: oklch(78% 0.005 285.8); + /* Dark mode colors using OKLCH - vibrant neon palette */ + --background: oklch(15% 0.015 265); + --foreground: oklch(92% 0.02 180); - --card: oklch(22% 0.01 285.8); - --card-foreground: oklch(78% 0.005 285.8); + --card: oklch(18% 0.02 270); + --card-foreground: oklch(92% 0.02 180); - --popover: oklch(22% 0.01 285.8); - --popover-foreground: oklch(78% 0.005 285.8); + --popover: oklch(18% 0.02 270); + --popover-foreground: oklch(92% 0.02 180); - --primary: oklch(68% 0.14 240); - --primary-foreground: oklch(22% 0.01 285.8); + --primary: oklch(75% 0.25 310); + --primary-foreground: oklch(18% 0.02 270); - --secondary: oklch(28% 0.012 285.8); - --secondary-foreground: oklch(75% 0.005 285.8); + --secondary: oklch(22% 0.03 280); + --secondary-foreground: oklch(85% 0.15 180); - --muted: oklch(25% 0.01 285.8); - --muted-foreground: oklch(58% 0.008 285.9); + --muted: oklch(20% 0.02 270); + --muted-foreground: oklch(65% 0.1 200); - --accent: oklch(30% 0.012 285.8); - --accent-foreground: oklch(75% 0.005 285.8); + --accent: oklch(25% 0.03 290); + --accent-foreground: oklch(85% 0.2 320); - --destructive: oklch(58% 0.16 29.2); - --destructive-foreground: oklch(78% 0.005 285.8); + --destructive: oklch(65% 0.25 20); + --destructive-foreground: oklch(92% 0.02 180); - --border: oklch(32% 0.012 285.8); - --input: oklch(28% 0.012 285.8); - --ring: oklch(68% 0.14 240); + --border: oklch(30% 0.05 280); + --input: oklch(22% 0.03 280); + --ring: oklch(75% 0.25 310); - --success: oklch(62% 0.14 145); - --success-foreground: oklch(22% 0.01 285.8); + --success: oklch(70% 0.22 160); + --success-foreground: oklch(18% 0.02 270); - --warning: oklch(68% 0.14 85); - --warning-foreground: oklch(22% 0.01 285.8); + --warning: oklch(75% 0.22 80); + --warning-foreground: oklch(18% 0.02 270); - --info: oklch(66% 0.14 240); - --info-foreground: oklch(22% 0.01 285.8); + --info: oklch(72% 0.22 240); + --info-foreground: oklch(18% 0.02 270); - /* Audio-specific colors */ - --waveform: oklch(68% 0.14 240); - --waveform-progress: oklch(62% 0.14 145); - --waveform-selection: oklch(68% 0.14 240); - --waveform-bg: oklch(16% 0.008 285.8); + /* 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); } }