@import "tailwindcss";

/* ============================================================================
 * Dynamic Color Variables (set by colorStore via JavaScript)
 * These are updated when album artwork changes for adaptive theming
 * ============================================================================ */
:root {
    /* Dynamic accent colors - overwritten by colorStore.setFromImage() */
    --dynamic-accent: #e09f5a;
    --dynamic-accent-light: #f0c27a;
    --dynamic-accent-dark: #c47832;
    --dynamic-muted: #7a6e62;
    --dynamic-muted-light: #9e9185;
    --dynamic-muted-dark: #4a4039;

    /* RGB values for use with alpha (e.g., rgba(var(--dynamic-accent-rgb), 0.5)) */
    --dynamic-accent-rgb: 224, 159, 90;
    --dynamic-accent-light-rgb: 240, 194, 122;
    --dynamic-accent-dark-rgb: 196, 120, 50;

    /* Transition timing for color changes */
    --color-transition: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom theme — warm, vinyl-lounge inspired dark palette */
@theme {
    /* Base colors — warm charcoal/espresso tones */
    --color-base: #1c1917;
    --color-mantle: #171412;
    --color-crust: #110f0d;
    --color-surface-0: #292524;
    --color-surface-1: #3b3633;
    --color-surface-2: #4d4642;
    --color-overlay-0: #6b6260;
    --color-overlay-1: #857b78;
    --color-overlay-2: #9e9490;
    --color-text: #ede0d4;
    --color-subtext-0: #c4b5a8;
    --color-subtext-1: #d5c8bb;

    /* Accent colors — warm amber/copper */
    --color-accent: #e09f5a;
    --color-accent-hover: #f0c27a;
    --color-success: #8fbe7a;
    --color-warning: #e8c468;
    --color-error: #d97070;

    /* Semantic colors */
    --color-primary: var(--color-accent);
    --color-primary-hover: var(--color-accent-hover);
    --color-muted: var(--color-overlay-0);
    --color-border: #332e2b;

    /* Typography */
    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;

    /* Spacing & Sizing */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-color: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Global styles */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-surface-2) transparent;
}

::selection {
    background-color: var(--color-accent);
    color: var(--color-crust);
}

/* Subtle warm noise texture on base surfaces */
body {
    background-color: var(--color-base);
}

/* Focus styles */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Custom utilities */
@utility glass {
    background: rgba(28, 25, 23, 0.82);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(62, 55, 50, 0.6);
}

@utility text-gradient {
    background: linear-gradient(
        135deg,
        var(--color-accent) 0%,
        var(--color-accent-hover) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Smooth transitions for interactive elements */
button,
a,
input,
select {
    transition: all var(--transition-fast);
}

/* Progress bar animation */
@keyframes progress-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

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

/* Vinyl spin animation for album art */
@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

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

.animate-spin-slow.paused {
    animation-play-state: paused;
}

/* UltraBlur background effect */
@utility blur-3xl {
    filter: blur(64px);
}

@utility blur-4xl {
    filter: blur(96px);
}

/* Glow effects */
@utility glow-accent {
    box-shadow:
        0 0 40px var(--color-accent),
        0 0 80px color-mix(in srgb, var(--color-accent) 50%, transparent);
}

@utility glow-sm {
    box-shadow: 0 0 20px currentColor;
}

/* Smooth transitions for Now Playing */
@keyframes fade-in-blur {
    from {
        opacity: 0;
        filter: blur(20px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

.animate-fade-in {
    animation: fade-in-blur 0.5s ease-out;
}

/* Album art hover glow pulse */
@keyframes glow-pulse {
    0%,
    100% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.8;
    }
}

.animate-glow-pulse {
    animation: glow-pulse 3s ease-in-out infinite;
}

/* Scale utilities for hover effects */
@utility scale-102 {
    transform: scale(1.02);
}

@utility scale-105 {
    transform: scale(1.05);
}

@utility scale-150 {
    transform: scale(1.5);
}

/* Quality badge styles */
.quality-badge-lossless {
    background: linear-gradient(
        135deg,
        rgba(224, 159, 90, 0.15) 0%,
        rgba(240, 194, 122, 0.1) 100%
    );
    border: 1px solid rgba(224, 159, 90, 0.35);
    color: var(--color-accent);
}

.quality-badge-lossy {
    background: var(--color-surface-1);
    border: 1px solid var(--color-surface-2);
    color: var(--color-overlay-1);
}

/* Hi-Res indicator glow */
.hires-glow {
    text-shadow:
        0 0 10px var(--color-accent),
        0 0 20px color-mix(in srgb, var(--color-accent) 50%, transparent);
}

/* ============================================================================
 * Dynamic Theming Utilities
 * Use these classes for elements that should adapt to album artwork colors
 * ============================================================================ */

/* Dynamic accent color utilities */
@utility dynamic-accent {
    color: var(--dynamic-accent);
    transition: color var(--color-transition);
}

@utility dynamic-accent-bg {
    background-color: var(--dynamic-accent);
    transition: background-color var(--color-transition);
}

@utility dynamic-accent-border {
    border-color: var(--dynamic-accent);
    transition: border-color var(--color-transition);
}

/* Dynamic glow effect (uses dynamic color) */
@utility dynamic-glow {
    box-shadow:
        0 0 30px rgba(var(--dynamic-accent-rgb), 0.4),
        0 0 60px rgba(var(--dynamic-accent-rgb), 0.2);
    transition: box-shadow var(--color-transition);
}

@utility dynamic-glow-lg {
    box-shadow:
        0 0 40px rgba(var(--dynamic-accent-rgb), 0.5),
        0 0 80px rgba(var(--dynamic-accent-rgb), 0.3),
        0 0 120px rgba(var(--dynamic-accent-rgb), 0.15);
    transition: box-shadow var(--color-transition);
}

/* Dynamic gradient backgrounds */
@utility dynamic-gradient {
    background: linear-gradient(
        135deg,
        rgba(var(--dynamic-accent-rgb), 0.2) 0%,
        rgba(var(--dynamic-accent-light-rgb), 0.1) 50%,
        rgba(var(--dynamic-accent-dark-rgb), 0.15) 100%
    );
    transition: background var(--color-transition);
}

/* Dynamic progress bar fill */
@utility dynamic-progress {
    background: linear-gradient(
        90deg,
        var(--dynamic-accent) 0%,
        var(--dynamic-accent-light) 100%
    );
    transition: background var(--color-transition);
}

/* Dynamic text glow (for hi-res indicators etc.) */
@utility dynamic-text-glow {
    text-shadow:
        0 0 10px var(--dynamic-accent),
        0 0 20px rgba(var(--dynamic-accent-rgb), 0.5);
    transition: text-shadow var(--color-transition);
}

/* Dynamic ring/outline */
@utility dynamic-ring {
    box-shadow: 0 0 0 2px var(--dynamic-accent);
    transition: box-shadow var(--color-transition);
}

/* Smooth color transition class (add to any element) */
.color-transition {
    transition:
        color var(--color-transition),
        background-color var(--color-transition),
        border-color var(--color-transition),
        box-shadow var(--color-transition),
        text-shadow var(--color-transition);
}

/* Dynamic button styles */
.dynamic-btn {
    background-color: var(--dynamic-accent);
    color: var(--color-crust);
    transition:
        background-color var(--color-transition),
        transform 150ms ease,
        box-shadow 150ms ease;
}

.dynamic-btn:hover {
    background-color: var(--dynamic-accent-light);
    box-shadow: 0 0 20px rgba(var(--dynamic-accent-rgb), 0.4);
    transform: scale(1.02);
}

.dynamic-btn:active {
    transform: scale(0.98);
}

/* Dynamic quality badge (lossless with dynamic colors) */
.quality-badge-dynamic {
    background: linear-gradient(
        135deg,
        rgba(var(--dynamic-accent-rgb), 0.2) 0%,
        rgba(var(--dynamic-accent-light-rgb), 0.15) 100%
    );
    border: 1px solid rgba(var(--dynamic-accent-rgb), 0.4);
    color: var(--dynamic-accent);
    transition:
        background var(--color-transition),
        border-color var(--color-transition),
        color var(--color-transition);
}

/* Animated color pulse for playing indicator */
@keyframes dynamic-pulse {
    0%,
    100% {
        box-shadow:
            0 0 20px rgba(var(--dynamic-accent-rgb), 0.3),
            0 0 40px rgba(var(--dynamic-accent-rgb), 0.1);
    }
    50% {
        box-shadow:
            0 0 30px rgba(var(--dynamic-accent-rgb), 0.5),
            0 0 60px rgba(var(--dynamic-accent-rgb), 0.2);
    }
}

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

/* Dynamic border glow animation */
@keyframes dynamic-border-glow {
    0%,
    100% {
        border-color: rgba(var(--dynamic-accent-rgb), 0.3);
    }
    50% {
        border-color: rgba(var(--dynamic-accent-rgb), 0.6);
    }
}

.animate-dynamic-border {
    animation: dynamic-border-glow 3s ease-in-out infinite;
}

/* ============================================================================
 * Dynamic Volume Slider Styling
 * ============================================================================ */

/* Webkit browsers (Chrome, Safari, Edge) */
input[type="range"]::-webkit-slider-thumb {
    background-color: var(--dynamic-accent);
    transition: background-color var(--color-transition);
}

input[type="range"]::-webkit-slider-thumb:hover {
    background-color: var(--dynamic-accent-light);
}

/* Firefox */
input[type="range"]::-moz-range-thumb {
    background-color: var(--dynamic-accent);
    border: none;
    border-radius: 50%;
    transition: background-color var(--color-transition);
}

input[type="range"]::-moz-range-thumb:hover {
    background-color: var(--dynamic-accent-light);
}

/* Track styling for dynamic accent */
input[type="range"]::-webkit-slider-runnable-track {
    transition: background-color var(--color-transition);
}

input[type="range"]::-moz-range-track {
    transition: background-color var(--color-transition);
}

/* Progress fill for range inputs */
input[type="range"].dynamic-range::-webkit-slider-runnable-track {
    background: linear-gradient(
        to right,
        var(--dynamic-accent) 0%,
        var(--dynamic-accent) var(--range-progress, 50%),
        var(--color-surface-1) var(--range-progress, 50%),
        var(--color-surface-1) 100%
    );
}
