/*
 * Ghost Theme CSS - The Ghost Maps Frontend
 * Extends admin theme with frontend-specific variables
 */

:root {
    /* === GHOST THEME COLORS === */
    --ghost-black: #000000;
    --ghost-dark: #202938; 
    --ghost-gray: #F5F5F5;
    --ghost-white: #FFFFFF;
    --ghost-accent: #F04444;
    
    /* === GHOST ATMOSPHERE COLORS === */
    --mist-gray: #F8F9FA;
    --blood-red: #8B0000;
    --bone-white: #FFF8DC;
    --shadow-purple: #2E1065;
    --midnight-blue: #0F1419;
    --fog-gray: rgba(248, 249, 250, 0.8);
    
    /* === UI COLORS === */
    --color-primary: var(--ghost-dark);
    --color-secondary: #6B7280;
    --color-accent: var(--ghost-accent);
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;
    --color-info: #3B82F6;
    
    /* === BACKGROUND COLORS === */
    --bg-primary: var(--ghost-white);
    --bg-secondary: var(--ghost-gray);
    --bg-dark: var(--ghost-black);
    --bg-midnight: var(--midnight-blue);
    --bg-card: var(--ghost-white);
    --bg-overlay: rgba(0, 0, 0, 0.7);
    --bg-mist: var(--fog-gray);
    
    /* === TEXT COLORS === */
    --text-primary: var(--ghost-dark);
    --text-secondary: #6B7280;
    --text-muted: #9CA3AF;
    --text-white: var(--ghost-white);
    --text-bone: var(--bone-white);
    
    /* === TYPOGRAPHY === */
    --font-family: "Noto Sans Thai", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-ghost: "Creepster", "Nosifer", cursive; /* For special ghost text */
    
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;
    --font-size-4xl: 32px;
    --font-size-5xl: 48px;
    
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* === SPACING === */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    
    /* === BORDER RADIUS === */
    --radius-sm: 8px;
    --radius-md: 15px;
    --radius-lg: 30px;
    --radius-full: 50%;
    
    /* === SHADOWS & GLOWS === */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.25);
    
    /* Ghost glows */
    --glow-red: 0 0 20px rgba(240, 68, 68, 0.5);
    --glow-purple: 0 0 20px rgba(46, 16, 101, 0.5);
    --glow-white: 0 0 15px rgba(255, 255, 255, 0.3);
    
    /* === TRANSITIONS === */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* === LAYOUT === */
    --sidebar-width: 300px;
    --topbar-height: 60px;
    --bottom-nav-height: 70px;
    --container-max-width: 1200px;
    
    /* === Z-INDEX === */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal: 1050;
    --z-tooltip: 1070;
    --z-toast: 1080;
    
    /* === CATEGORY COLORS === */
    --category-haunted: #8B5CF6;
    --category-abandoned: #6B7280;
    --category-cemetery: #374151;
    --category-forest: #059669;
    --category-temple: #DC2626;
    --category-bridge: #2563EB;
    --category-university: #7C3AED;
    --category-hospital: #BE185D;
    --category-hotel: #0891B2;
    --category-market: #EA580C;
}

/* === DARK THEME (Auto for ghost atmosphere) === */
[data-theme="dark"], .app-page {
    --bg-primary: var(--midnight-blue);
    --bg-secondary: #161B22;
    --bg-card: #21262D;
    --text-primary: var(--bone-white);
    --text-secondary: #8B949E;
    --text-muted: #656D76;
}

/* === RESPONSIVE BREAKPOINTS === */
@media (max-width: 767px) {
    :root {
        --font-size-4xl: 24px;
        --font-size-3xl: 20px;
        --font-size-2xl: 18px;
        --spacing-lg: 16px;
        --spacing-xl: 24px;
    }
}

/* === GHOST ANIMATIONS === */
@keyframes ghostFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes ghostGlow {
    0%, 100% { box-shadow: var(--glow-red); }
    50% { box-shadow: var(--glow-purple); }
}

@keyframes spookyPulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

@keyframes mist {
    0% { opacity: 0; transform: translateX(-100px); }
    50% { opacity: 0.7; }
    100% { opacity: 0; transform: translateX(100px); }
}

/* === UTILITY CLASSES === */
.ghost-glow { box-shadow: var(--glow-red); }
.ghost-float { animation: ghostFloat 3s ease-in-out infinite; }
.ghost-pulse { animation: spookyPulse 2s ease-in-out infinite; }
.text-accent { color: var(--ghost-accent); }
.text-ghost { color: var(--bone-white); }
.bg-midnight { background-color: var(--midnight-blue); }
.bg-mist { background-color: var(--bg-mist); }