/* ==========================================================================
   主题系统 — 仅覆盖设计 token（颜色/圆角/阴影/边框/图标观感），不改任何布局/结构/交互。
   Classic（天赐蓝，默认）= app.css 的 :root。其余主题在此覆盖 token。
   切换：document.documentElement[data-theme="apple|luxury|dark"]。
   ========================================================================== */

/* 换主题平滑过渡 */
html { transition: background-color .25s ease, color .25s ease; }
.card, .navbar, .tabbar, .btn, .input, .textarea, .select, .tag, .chip,
.sheet, .dialog, .home-banner, .list, .quick-icon, .grid-9-icon {
    transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}

/* ---------------- ② 苹果风 / 极简白 ---------------- */
[data-theme="apple"] {
    --color-primary: #007aff;
    --color-primary-dark: #0062cc;
    --color-primary-light: #eaf3ff;

    --color-success: #34c759;
    --color-warning: #ff9500;
    --color-danger: #ff3b30;
    --color-muted: #8e8e93;

    --bg-page: #f2f2f7;
    --bg-card: #ffffff;
    --bg-subtle: #f7f7fb;
    --border: #e4e4ea;
    --border-strong: #d1d1d6;

    --text-main: #1c1c1e;
    --text-sub: #6e6e73;
    --text-placeholder: #b0b0b5;

    --input-bg: #ffffff;
    --btn-bg: #ededf2;             /* 更轻、更克制 */
    --btn-bg-disabled: #f2f2f6;
    --chip-disabled-bg: #f2f2f6;
    --tag-success-bg: #e4f8ea;
    --tag-warning-bg: #fff1e0;
    --tag-danger-bg: #ffe9e8;
    --tag-muted-bg: #eef0f3;

    /* Header 不用大面积蓝色：白到浅灰的轻渐变 + 深色文字 */
    --header-bg: linear-gradient(180deg, #ffffff 0%, #f2f2f7 100%);
    --header-fg: var(--text-main);

    --card-border: #ececf0;        /* 极简白：浅边框替代重阴影 */
    --icon-filter: saturate(.92);  /* 颜色克制、更轻盈 */

    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 22px;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-pop: 0 12px 34px rgba(0, 0, 0, .12);
}

/* ---------------- ③ 米白香槟 / 东方雅 ---------------- */
[data-theme="luxury"] {
    --color-primary: #a8853f;          /* 香槟金（偏深以便白字可读） */
    --color-primary-dark: #8d6e30;
    --color-primary-light: #f1e6cd;

    --color-success: #5f8a4f;
    --color-warning: #c2853a;
    --color-danger: #bf4a31;
    --color-muted: #a89c84;

    --bg-page: #f6f1e8;                 /* 米白 */
    --bg-card: #fffdf8;                 /* 暖白 */
    --bg-subtle: #f1ebdc;
    --border: #e6ddca;
    --border-strong: #d8ccb2;

    --text-main: #3a332a;              /* 温润棕黑 */
    --text-sub: #7a7060;
    --text-placeholder: #b3a892;

    --input-bg: #fffdf8;
    --btn-bg: #efe7d6;
    --btn-bg-disabled: #ece3cf;
    --chip-disabled-bg: #ece3cf;
    --tag-success-bg: #e9f0e1;
    --tag-warning-bg: #f7ecd9;
    --tag-danger-bg: #f6e4df;
    --tag-muted-bg: #ece3cf;

    /* Header：暖香槟 → 米白轻渐变 + 深色文字（不刺眼、不土黄） */
    --header-bg: linear-gradient(135deg, #ecdcb6 0%, #f6f1e8 100%);
    --header-fg: var(--text-main);

    --card-border: #ece0c8;            /* 柔和暖描边 */
    --icon-filter: sepia(.28) saturate(1.15) hue-rotate(-8deg); /* 暖金点缀 */

    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 18px;
    --shadow-card: 0 1px 3px rgba(120, 100, 60, .07), 0 1px 2px rgba(120, 100, 60, .05);
    --shadow-pop: 0 10px 28px rgba(120, 100, 60, .15);
}

/* ---------------- ④ 深色模式 / 夜幕黑 ---------------- */
[data-theme="dark"] {
    --color-primary: #3b82f6;          /* 品牌蓝仅作 Accent / 主按钮 / 选中 */
    --color-primary-dark: #2f6fd6;
    --color-primary-light: #1d2b48;    /* 蓝调深 tint：图标底、进度条底 */

    --color-success: #4ade80;
    --color-warning: #fbbf24;
    --color-danger: #f87171;
    --color-muted: #94a3b8;

    --bg-page: #0f172a;                 /* 石墨蓝黑（非纯黑） */
    --bg-card: #1e293b;
    --bg-subtle: #1b2430;
    --border: #334155;
    --border-strong: #475569;

    --text-main: #f8fafc;
    --text-sub: #cbd5e1;
    --text-placeholder: #7c8aa3;

    --input-bg: #1b2430;
    --btn-bg: #334155;
    --btn-bg-disabled: #283344;
    --chip-disabled-bg: #283344;
    --tag-success-bg: rgba(74, 222, 128, .16);
    --tag-warning-bg: rgba(251, 191, 36, .16);
    --tag-danger-bg: rgba(248, 113, 113, .16);
    --tag-muted-bg: #2a3647;

    /* Header 与页面融合：不再使用蓝色大色块 */
    --header-bg: var(--bg-card);
    --header-fg: var(--text-main);

    --nav-bg: #111827;                  /* 顶/底栏比卡片更沉一点 */
    --card-border: #2c3a4f;            /* 卡片边界清楚，阴影很轻 */
    --icon-filter: grayscale(.22) brightness(1.06); /* 降低饱和、偏蓝灰 */

    --shadow-card: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-pop: 0 12px 34px rgba(0, 0, 0, .55);
}

/* ---------------- 主题设置页：色块预览 ---------------- */
.theme-swatch {
    width: 36px; height: 36px; border-radius: 50%; flex: none;
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 0 1px var(--border);
}
.theme-swatch[data-swatch="classic"] { background: linear-gradient(135deg, #2b6cb0 50%, #f5f7fa 50%); }
.theme-swatch[data-swatch="apple"]   { background: linear-gradient(135deg, #007aff 50%, #f2f2f7 50%); }
.theme-swatch[data-swatch="luxury"]  { background: linear-gradient(135deg, #a8853f 50%, #f6f1e8 50%); }
.theme-swatch[data-swatch="dark"]    { background: linear-gradient(135deg, #3b82f6 50%, #1e293b 50%); }
.theme-check { color: var(--color-primary); font-weight: 700; font-size: 18px; }