/* CSS Variables for theming - Dark mode as default */
:root {
    --background: #0a0a0a;
    --foreground: #fafafa;
    --card: #1a1a1a;
    --card-foreground: #fafafa;
    --primary: #ff6b9d;
    --primary-foreground: #ffffff;
    --secondary: #2a2a2a;
    --secondary-foreground: #fafafa;
    --muted: #2a2a2a;
    --muted-foreground: #b0b0b0;
    --border: #333333;
    --input: #2a2a2a;
    --ring: #52525b;
    
    /* Preference colors */
    --color-favorite: #ff6b9d;
    --color-like: #4ecdc4;
    --color-indifferent: #ffd93d;
    --color-maybe: #ff8c42;
    --color-dislike: #ff4757;
    --color-not-entered: #374151;
    
    /* New accent colors from image */
    --accent-pink: #ff6b9d;
    --accent-purple: #a55eea;
    --accent-orange: #ff8c42;
    
    /* Sticky header colors */
    --sticky-header-bg: rgba(26, 26, 26, 0.95);
    --sticky-header-bg-scrolled: rgba(26, 26, 26, 0.98);
}

.light {
    /* Pastel color scheme inspired by the image */
    --background: linear-gradient(135deg, #f8c6ff 0%, #fff0fe 50%, #f8c6ff 100%);
    --foreground: #2d3748;
    --card: rgba(255, 255, 255, 0.8);
    --card-foreground: #2d3748;
    --primary: #ec4899;
    --primary-foreground: #ffffff;
    --secondary: rgba(243, 232, 255, 0.7);
    --secondary-foreground: #553c9a;
    --muted: rgba(243, 232, 255, 0.5);
    --muted-foreground: #6b7280;
    --border: rgba(219, 234, 254, 0.6);
    --input: rgba(243, 232, 255, 0.7);
    --ring: #c084fc;
    
    /* Pastel preference colors */
    --color-favorite: #f472b6;
    --color-like: #34d399;
    --color-indifferent: #fbbf24;
    --color-maybe: #fb923c;
    --color-limit: #f87171;
    --color-not-entered: #e2e8f0;
    
    /* Pastel accent colors */
    --primary: #ff6b9d;
    --accent-teal: #34d399;
    --accent-purple: #c084fc;
    --accent-orange: #fb923c;
    
    /* Sticky header colors for light theme */
    --sticky-header-bg: rgba(255, 255, 255, 0.85);
    --sticky-header-bg-scrolled: rgba(255, 255, 255, 0.95);
}

/* Set dark mode as default */
body {
    background: var(--background);
    color: var(--foreground);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light theme specific background */
body.light {
    background: var(--background);
    background-attachment: fixed;
}

/* Theme transition effects */
.theme-transitioning {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.theme-transitioning * {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}