/**
 * MindRead 공통 테마 스타일
 * 다크모드/라이트모드 전환
 */

/* ===== 기본 변수 (라이트 모드) ===== */
:root {
    --theme-bg: #fff8f3;
    --theme-bg-secondary: #fff0f5;
    --theme-bg-tertiary: #ffe4ed;
    --theme-text: #1a1a2e;
    --theme-text-secondary: #666680;
    --theme-text-muted: #9999aa;
    --theme-card-bg: rgba(255, 255, 255, 0.95);
    --theme-card-border: rgba(0, 0, 0, 0.06);
    --theme-header-bg: rgba(255, 248, 243, 0.95);
    --theme-nav-bg: rgba(255, 248, 243, 0.98);
    --theme-input-bg: rgba(255, 255, 255, 0.8);
    --theme-shadow: rgba(0, 0, 0, 0.08);
    --theme-overlay: rgba(0, 0, 0, 0.5);

    /* 브랜드 컬러 */
    --primary: #FF6B9D;
    --secondary: #9D8DF1;
    --accent: #FFB347;
}

/* ===== 다크 모드 ===== */
[data-theme="dark"],
body.dark-mode {
    --theme-bg: #0a0a0f;
    --theme-bg-secondary: #14141f;
    --theme-bg-tertiary: #1a1a2e;
    --theme-text: #f0f0f5;
    --theme-text-secondary: #a0a0b0;
    --theme-text-muted: #606070;
    --theme-card-bg: rgba(26, 26, 46, 0.95);
    --theme-card-border: rgba(255, 255, 255, 0.08);
    --theme-header-bg: rgba(10, 10, 15, 0.95);
    --theme-nav-bg: rgba(10, 10, 15, 0.98);
    --theme-input-bg: rgba(26, 26, 46, 0.8);
    --theme-shadow: rgba(0, 0, 0, 0.3);
    --theme-overlay: rgba(0, 0, 0, 0.7);
}

/* ===== 공통 요소 전환 ===== */
body {
    background: var(--theme-bg);
    color: var(--theme-text);
    transition: background 0.3s, color 0.3s;
}

/* 다크모드 기본 요소 */
body.dark-mode .header,
body.dark-mode header {
    background: var(--theme-header-bg) !important;
    border-bottom-color: var(--theme-card-border) !important;
}

body.dark-mode .mobile-nav,
body.dark-mode nav.mobile-nav {
    background: var(--theme-nav-bg) !important;
    border-top-color: var(--theme-card-border) !important;
}

body.dark-mode .card,
body.dark-mode .menu-list,
body.dark-mode .modal-content {
    background: var(--theme-card-bg) !important;
    border-color: var(--theme-card-border) !important;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background: var(--theme-input-bg) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-card-border) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--theme-text-muted) !important;
}

/* 다크모드 링크 */
body.dark-mode a {
    color: var(--primary);
}

/* 다크모드 그림자 */
body.dark-mode [class*="shadow"],
body.dark-mode .card {
    box-shadow: 0 4px 20px var(--theme-shadow) !important;
}