/* Meditimer Custom Styles - Tailwind Compatible */

/* CSS Variables for Meditation Theme - App Color Scheme */
:root {
    /* Primary meditation colors */
    --meditation-primary: #66B380;      /* Peaceful green (0.4, 0.7, 0.5) */
    --meditation-secondary: #4D80B3;    /* Serene blue (0.3, 0.5, 0.7) */
    --meditation-accent: #9980CC;       /* Calming purple (0.6, 0.5, 0.8) */
    --rating-color: #E69933;            /* Warm orange (0.9, 0.6, 0.2) */
    
    /* Light theme colors */
    --light-bg: #FAFAFC;               /* Almost white (0.98, 0.98, 0.99) */
    --light-surface: #FFFFFF;          /* Pure white */
    --light-surface-secondary: #F2F2F7; /* Light gray (0.95, 0.95, 0.97) */
    --light-text-primary: #33334D;     /* Dark text (0.2, 0.2, 0.3) */
    --light-text-secondary: #666680;   /* Medium text (0.4, 0.4, 0.5) */
    --light-text-tertiary: #9999B3;    /* Light text (0.6, 0.6, 0.7) */
    --light-border: #E6E6EB;           /* Light border (0.9, 0.9, 0.92) */
    --light-shadow: rgba(0, 0, 0, 0.06); /* Light shadow */
    --light-separator: #E6E6EB;        /* Separator line */
    
    /* Dark theme colors */
    --dark-bg: #0D0D14;               /* Very dark blue-gray (0.05, 0.05, 0.08) */
    --dark-surface: #1A1A21;          /* Dark surface (0.1, 0.1, 0.13) */
    --dark-surface-secondary: #26262E; /* Darker gray (0.15, 0.15, 0.18) */
    --dark-text-primary: #F2F2F7;      /* Light text (0.95, 0.95, 0.97) */
    --dark-text-secondary: #B3B3BF;    /* Medium light text (0.7, 0.7, 0.75) */
    --dark-text-tertiary: #80808C;     /* Darker light text (0.5, 0.5, 0.55) */
    --dark-border: #333340;            /* Dark border (0.2, 0.2, 0.25) */
    --dark-shadow: rgba(0, 0, 0, 0.3); /* Dark shadow */
    --dark-separator: #333340;         /* Dark separator */
    
    /* Default to light theme */
    --bg: var(--light-bg);
    --surface: var(--light-surface);
    --surface-secondary: var(--light-surface-secondary);
    --text-primary: var(--light-text-primary);
    --text-secondary: var(--light-text-secondary);
    --text-tertiary: var(--light-text-tertiary);
    --border: var(--light-border);
    --shadow: var(--light-shadow);
    --separator: var(--light-separator);
}

/* Additional custom styles that complement Tailwind */
.download-btn {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.download-btn:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

/* Focus styles for accessibility */
a:focus,
button:focus {
    outline: 2px solid var(--meditation-primary);
    outline-offset: 2px;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--meditation-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--meditation-secondary);
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .hero::before {
        animation: none;
    }
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: var(--dark-bg);
        --surface: var(--dark-surface);
        --surface-secondary: var(--dark-surface-secondary);
        --text-primary: var(--dark-text-primary);
        --text-secondary: var(--dark-text-secondary);
        --text-tertiary: var(--dark-text-tertiary);
        --border: var(--dark-border);
        --shadow: var(--dark-shadow);
        --separator: var(--dark-separator);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --meditation-primary: #0066cc;
        --text-primary: #000000;
        --text-secondary: #333333;
    }
}

/* Hide scrollbar for carousel */
.scrollbar-hide {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}