/*
 * Pebblous Blog - Theme Variables
 * Shared CSS variables for all pages
 * Import this file at the top of other CSS files
 */

/* ========================================
   Theme System - CSS Variables
   ======================================== */
:root {
    /* Typography */
    --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-display: 'Outfit', 'Pretendard', sans-serif;
    --font-mono: 'Roboto Mono', ui-monospace, 'SF Mono', monospace;

    /* Dark Theme (default) */
    --bg-primary: #020617;
    --bg-secondary: #0f172a;
    --bg-card: rgba(31, 41, 55, 0.95);
    --bg-card-start: rgba(30, 41, 59, 0.75);
    --bg-card-end: rgba(15, 23, 42, 0.75);
    --bg-card-hover-start: rgba(30, 41, 59, 0.95);
    --bg-card-hover-end: rgba(15, 23, 42, 0.95);
    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --heading-color: #ffffff;
    --border-color: #374151;
    --accent-color: #F86825;
    --teal-color: #14b8a6;
    --tag-bg: rgba(248, 104, 37, 0.15);
    --logo-url: url('https://pebblous.github.io/image/Pebblous_BM_White_RGB.png');
    --hero-card-bg: rgba(30, 41, 59, 0.6);
    --hero-card-border: rgba(71, 85, 105, 0.5);
    --contact-btn-bg: #1e293b;
    --contact-btn-hover: #334155;
    --card-border: transparent;
    --tag-scroll-gradient: rgba(30, 41, 59, 0.9);
    --logo-placeholder-bg: #1e293b;
    --search-bg: rgba(30, 41, 59, 0.5);
    --search-border: #475569;
    --header-bg: #0f172a;
    --header-border: #1e293b;
    --footer-bg: #0f172a;
}

[data-theme="light"] {
    --bg-primary: #F9FAFB;
    --bg-secondary: #F3F4F6;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-card-start: rgba(255, 255, 255, 0.9);
    --bg-card-end: rgba(249, 250, 251, 0.9);
    --bg-card-hover-start: rgba(255, 255, 255, 1);
    --bg-card-hover-end: rgba(249, 250, 251, 1);
    --text-primary: #111827;
    --text-secondary: #4B5563;
    --text-muted: #6B7280;
    --heading-color: #111827;
    --border-color: #E5E7EB;
    --accent-color: #F86825;
    --teal-color: #0d9488;
    --tag-bg: rgba(248, 104, 37, 0.1);
    --logo-url: url('https://pebblous.github.io/image/Pebblous_BM_Black_RGB.png');
    --hero-card-bg: rgba(255, 255, 255, 0.8);
    --hero-card-border: rgba(229, 231, 235, 0.8);
    --contact-btn-bg: #F3F4F6;
    --contact-btn-hover: #E5E7EB;
    --card-border: rgba(229, 231, 235, 0.6);
    --tag-scroll-gradient: rgba(249, 250, 251, 0.95);
    --logo-placeholder-bg: #f5f5f5;
    --search-bg: rgba(255, 255, 255, 0.8);
    --search-border: #D1D5DB;
    --header-bg: #ffffff;
    --header-border: #E5E7EB;
    --footer-bg: #F3F4F6;
}

[data-theme="beige"] {
    --bg-primary: #F5EED9;
    --bg-secondary: #FFF3D9;
    --bg-card: rgba(255, 252, 245, 0.6);
    --bg-card-start: rgba(255, 252, 245, 0.85);
    --bg-card-end: rgba(245, 238, 217, 0.85);
    --bg-card-hover-start: rgba(255, 252, 245, 1);
    --bg-card-hover-end: rgba(245, 238, 217, 1);
    --text-primary: #3A2E1C;
    --text-secondary: #574523;
    --text-muted: #78716c;
    --heading-color: #3A2E1C;
    --border-color: #E8D9B8;
    --accent-color: #F86825;
    --teal-color: #0d9488;
    --tag-bg: rgba(248, 104, 37, 0.12);
    --logo-url: url('https://pebblous.github.io/image/Pebblous_BM_Orange_RGB.png');
    --hero-card-bg: rgba(255, 248, 225, 0.8);
    --hero-card-border: rgba(232, 217, 184, 0.8);
    --contact-btn-bg: #FFF3D9;
    --contact-btn-hover: #E8D9B8;
    --card-border: rgba(232, 217, 184, 0.5);
    --tag-scroll-gradient: rgba(255, 252, 245, 0.95);
    --logo-placeholder-bg: #FFF8E1;
    --search-bg: rgba(255, 252, 245, 0.9);
    --search-border: #D4C5A0;
    --header-bg: #FFF8E1;
    --header-border: #E8D9B8;
    --footer-bg: #FFF3D9;
}

/* ========================================
   Common Component Styles
   ======================================== */

/* Default logo in cards - prevent stretching */
.default-logo {
    width: 37.5%;
    height: auto;
    object-fit: contain !important;
    max-width: 100%;
}

/* Logo placeholder - theme-aware background */
.logo-placeholder {
    background-color: var(--logo-placeholder-bg);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.card:hover .logo-placeholder {
    transform: scale(1.02);
}