/* ============================================================================
   外语台词本商城 - 温暖书香风设计系统
   配合 /js/theme.js（Tailwind 色阶重映射）使用。
   引入顺序：tailwind CDN -> /js/theme.js -> 本文件
   ========================================================================== */

:root {
    --ink: #211E1A;          /* 正文墨色 */
    --ink-soft: #635C53;     /* 次级文字 */
    --paper: #FAF7F2;        /* 纸张底色 */
    --paper-deep: #F3EEE5;   /* 深一层纸色 */
    --line: #E7E0D3;         /* 分隔线 */
    --moss: #2F5D50;         /* 墨绿主色 */
    --moss-soft: #3D7263;
    --clay: #B4552D;         /* 赤褐强调（价格） */
    --radius: 12px;
    --radius-lg: 16px;
}

/* ===== 基础排版 ===== */
body {
    background-color: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 标题使用衬线字体，营造书籍质感 */
h1, h2, h3, .font-serif {
    font-family: Georgia, "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
    letter-spacing: 0.01em;
}

/* 正文行高优化，长文更易读 */
article p, .prose p {
    line-height: 1.9;
}

/* ===== 纸纹质感：给页头渐变叠一层细微纹理 ===== */
header.bg-gradient-to-r::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.06;
    background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
    background-size: 12px 12px;
}
header.bg-gradient-to-r {
    position: relative;
}

/* ===== 卡片与阴影：更柔和、更有层次 ===== */
.shadow-lg,
.shadow-xl,
.shadow-2xl {
    box-shadow: 0 1px 2px rgba(33, 30, 26, 0.04), 0 6px 24px rgba(33, 30, 26, 0.07) !important;
}
.shadow,
.shadow-md {
    box-shadow: 0 1px 2px rgba(33, 30, 26, 0.04), 0 3px 12px rgba(33, 30, 26, 0.05) !important;
}

/* 商品卡片：悬浮微抬升 */
#productList > a,
.product-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
#productList > a:hover,
.product-card:hover {
    transform: translateY(-3px);
    border-color: #C8BEA9;
    box-shadow: 0 10px 30px rgba(33, 30, 26, 0.10) !important;
}

/* ===== 圆角统一 ===== */
.rounded-lg { border-radius: var(--radius) !important; }
.rounded-xl { border-radius: var(--radius-lg) !important; }

/* ===== 按钮：统一过渡与按压反馈 ===== */
button,
a.inline-flex,
a.block {
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease;
}
button:active {
    transform: scale(0.98);
}

/* 主按钮描边高光 */
.bg-sky-500,
.bg-sky-600 {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* ===== 表单控件：暖色边框 + 墨绿聚焦 ===== */
input,
textarea,
select {
    background-color: #fff;
    border-color: var(--line);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--moss-soft);
    box-shadow: 0 0 0 3px rgba(61, 114, 99, 0.14);
}

/* ===== 价格：赤褐 + 衬线，突出质感 ===== */
.price,
.text-red-500,
.text-red-600 {
    color: var(--clay) !important;
    font-family: Georgia, "Noto Serif SC", serif;
}

/* ===== 分隔线统一为暖色 ===== */
.border,
.border-t,
.border-b,
.border-l,
.border-r {
    border-color: var(--line);
}

/* ===== 图片：统一圆角与占位底色，避免加载时突兀 ===== */
img {
    background-color: var(--paper-deep);
}

/* ===== 滚动条（桌面端）===== */
@media (min-width: 768px) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: var(--paper-deep); }
    ::-webkit-scrollbar-thumb {
        background: #CFC5B4;
        border-radius: 6px;
        border: 2px solid var(--paper-deep);
    }
    ::-webkit-scrollbar-thumb:hover { background: #B8AC97; }
}

/* ===== 文本选中色 ===== */
::selection {
    background: rgba(61, 114, 99, 0.18);
    color: var(--ink);
}

/* ===== Toast 轻提示（供 ui.js 使用）===== */
#toastHost {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.toast {
    min-width: 200px;
    max-width: 86vw;
    padding: 12px 18px;
    border-radius: var(--radius);
    background: rgba(33, 30, 26, 0.94);
    color: #FAF7F2;
    font-size: 14px;
    box-shadow: 0 10px 30px rgba(33, 30, 26, 0.24);
    display: flex;
    align-items: center;
    gap: 10px;
    animation: toastIn 0.22s ease-out;
}
.toast.toast-out {
    animation: toastOut 0.2s ease-in forwards;
}
.toast-success { background: rgba(47, 93, 80, 0.96); }
.toast-error { background: rgba(156, 71, 38, 0.96); }

@keyframes toastIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
    to { opacity: 0; transform: translateY(10px); }
}

/* ===== 页脚 ===== */
.site-footer {
    background: #211E1A;
    color: #C9C2B6;
    margin-top: 64px;
}
.site-footer a {
    color: #C9C2B6;
    transition: color 0.2s ease;
}
.site-footer a:hover {
    color: #FAF7F2;
}
.site-footer h4 {
    color: #FAF7F2;
}

/* ===== 骨架屏（暖色版）===== */
.skeleton {
    background: linear-gradient(90deg, var(--paper-deep) 25%, #E7E0D3 50%, var(--paper-deep) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

/* ===== 无障碍：键盘聚焦可见 ===== */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--moss-soft);
    outline-offset: 2px;
}

/* ===== 移动端细节 ===== */
@media (max-width: 640px) {
    h1 { font-size: 1.25rem; }
    .site-footer { margin-top: 40px; }
}