/*
 * 多主题令牌：cool（炫酷）/ nature（自然）/ cute（可爱）
 *
 * 用法：
 *   1. <head> 里先引 theme.css，再引 theme.js（同步，便于首屏就设好 data-theme）
 *   2. html 上会出现 data-theme="cool|nature|cute"
 *   3. 业务样式只消费语义变量，不再写死色值
 */

/* ===== 派生层：一档 tint 生成 1~20 级叠加色，换主题时自动跟着变 ===== */
:root {
    --tint-1: color-mix(in srgb, var(--tint) 1.5%, transparent);
    --tint-2: color-mix(in srgb, var(--tint) 2%, transparent);
    --tint-3: color-mix(in srgb, var(--tint) 3%, transparent);
    --tint-4: color-mix(in srgb, var(--tint) 4%, transparent);
    --tint-5: color-mix(in srgb, var(--tint) 5%, transparent);
    --tint-6: color-mix(in srgb, var(--tint) 6%, transparent);
    --tint-7: color-mix(in srgb, var(--tint) 7%, transparent);
    --tint-8: color-mix(in srgb, var(--tint) 8%, transparent);
    --tint-9: color-mix(in srgb, var(--tint) 9%, transparent);
    --tint-10: color-mix(in srgb, var(--tint) 10%, transparent);
    --tint-11: color-mix(in srgb, var(--tint) 11%, transparent);
    --tint-12: color-mix(in srgb, var(--tint) 12%, transparent);
    --tint-14: color-mix(in srgb, var(--tint) 14%, transparent);
    --tint-16: color-mix(in srgb, var(--tint) 16%, transparent);
    --tint-20: color-mix(in srgb, var(--tint) 22%, transparent);

    --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent);
    --accent-line: color-mix(in srgb, var(--accent) 38%, transparent);
    --accent-glow: color-mix(in srgb, var(--accent) 55%, transparent);
    --accent-2-soft: color-mix(in srgb, var(--accent-2) 15%, transparent);

    --ok-soft: color-mix(in srgb, var(--ok) 14%, transparent);
    --ok-line: color-mix(in srgb, var(--ok) 36%, transparent);
    --warn-soft: color-mix(in srgb, var(--warn) 15%, transparent);
    --warn-line: color-mix(in srgb, var(--warn) 38%, transparent);
    --danger-soft: color-mix(in srgb, var(--danger) 13%, transparent);
    --danger-line: color-mix(in srgb, var(--danger) 34%, transparent);
}

/* ===== 炫酷风：深色霓虹，保留原 SupportPilot 观感 ===== */
[data-theme="cool"] {
    --tint: #ffffff;

    --bg: #07080f;
    --bg-elev: #0b0d18;
    --surface: rgba(255, 255, 255, .05);
    --surface-2: rgba(255, 255, 255, .03);

    --text: #eceffa;
    --text-2: #c8cee0;
    --text-3: #a9b0c6;
    --muted: #8b93ab;
    --muted-2: #6d7488;
    --faint: #5f6577;

    --line: rgba(255, 255, 255, .11);
    --line-strong: rgba(140, 130, 255, .45);

    --accent: #7c5cff;
    --accent-2: #22d3ee;
    --accent-3: #b23bff;
    --accent-ink: #ffffff;

    --ok: #3ddc97;
    --warn: #ffc454;
    --danger: #ff6b6b;

    --aurora:
            radial-gradient(46% 40% at 16% 10%, rgba(124, 92, 255, .52), transparent 70%),
            radial-gradient(42% 36% at 88% 24%, rgba(34, 211, 238, .28), transparent 72%),
            radial-gradient(44% 38% at 62% 98%, rgba(178, 59, 255, .30), transparent 72%);
    --grid: rgba(255, 255, 255, .022);
    --glow: rgba(124, 92, 255, .95);
    --glow-opacity: .55;
    --shadow-card: 0 26px 64px -46px rgba(124, 92, 255, 1);
    --shadow-pop: 0 22px 50px -16px rgba(90, 70, 255, .55);
    --shadow-accent: 0 6px 22px rgba(110, 92, 255, .38);
    --shadow-hard: 0 20px 50px -20px rgba(0, 0, 0, .9);

    --grad-primary: linear-gradient(135deg, #7c5cff, #5b8bff);
    --grad-brand: linear-gradient(145deg, #7c5cff, #22d3ee);
    --grad-hero: linear-gradient(105deg, #a78bfa 0%, #22d3ee 42%, #f0abfc 100%);
    --grad-warn: linear-gradient(135deg, #ffc454, #ff9f43);

    /* 强调色上的文字色 / 下拉箭头（深色背景下用浅灰箭头） */
    --accent-text: #c9c0ff;
    --warn-ink: #1b1030;
    --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b93ab' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    --radius: 16px;
    --radius-sm: 10px;
    --radius-lg: 20px;
    --font: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

/* ===== 自然风：暖米绿浅色，长时间看不累 ===== */
[data-theme="nature"] {
    --tint: #2c3a2e;

    --bg: #f4f5ec;
    --bg-elev: #fbfcf4;
    --surface: rgba(255, 255, 255, .78);
    --surface-2: rgba(255, 255, 255, .5);

    --text: #29342a;
    --text-2: #46543f;
    --text-3: #5b6a55;
    --muted: #6f7d6a;
    --muted-2: #84927e;
    --faint: #97a291;

    --line: rgba(44, 58, 46, .15);
    --line-strong: rgba(79, 138, 91, .5);

    --accent: #4f8a5b;
    --accent-2: #86b96a;
    --accent-3: #d9a94c;
    --accent-ink: #ffffff;

    --ok: #3d8f5f;
    --warn: #c08a1c;
    --danger: #c4553f;

    --aurora:
            radial-gradient(48% 42% at 12% 4%, rgba(146, 196, 124, .34), transparent 70%),
            radial-gradient(42% 38% at 90% 14%, rgba(217, 169, 76, .20), transparent 72%),
            radial-gradient(46% 40% at 58% 100%, rgba(79, 138, 91, .20), transparent 72%);
    --grid: rgba(44, 58, 46, .055);
    --glow: rgba(79, 138, 91, .45);
    --glow-opacity: .5;
    --shadow-card: 0 24px 56px -42px rgba(44, 58, 46, .55);
    --shadow-pop: 0 20px 44px -18px rgba(44, 58, 46, .28);
    --shadow-accent: 0 6px 20px rgba(79, 138, 91, .28);
    --shadow-hard: 0 20px 44px -18px rgba(44, 58, 46, .26);

    --grad-primary: linear-gradient(135deg, #4f8a5b, #86b96a);
    --grad-brand: linear-gradient(145deg, #4f8a5b, #d9a94c);
    --grad-hero: linear-gradient(105deg, #3f7a4c 0%, #7fb069 45%, #d9a94c 100%);
    --grad-warn: linear-gradient(135deg, #d9a94c, #c08a1c);

    --accent-text: #356c44;
    --warn-ink: #ffffff;
    --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6a55' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    --radius: 16px;
    --radius-sm: 10px;
    --radius-lg: 20px;
    --font: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

/* ===== 可爱风：奶粉色系，大圆角软阴影 ===== */
[data-theme="cute"] {
    --tint: #462c3b;

    --bg: #fff5f9;
    --bg-elev: #fffafc;
    --surface: rgba(255, 255, 255, .86);
    --surface-2: rgba(255, 255, 255, .6);

    --text: #46303d;
    --text-2: #6b4f60;
    --text-3: #86697a;
    --muted: #9b7d8f;
    --muted-2: #ad93a3;
    --faint: #bfa7b5;

    --line: rgba(216, 160, 186, .42);
    --line-strong: rgba(255, 143, 177, .62);

    --accent: #ff8fb1;
    --accent-2: #ffbe6b;
    --accent-3: #a78bfa;
    --accent-ink: #ffffff;

    --ok: #4fc08d;
    --warn: #eda33a;
    --danger: #f2708f;

    --aurora:
            radial-gradient(46% 40% at 14% 6%, rgba(255, 174, 202, .42), transparent 70%),
            radial-gradient(42% 36% at 88% 16%, rgba(255, 208, 150, .34), transparent 72%),
            radial-gradient(46% 40% at 56% 100%, rgba(186, 165, 255, .28), transparent 72%);
    --grid: rgba(216, 160, 186, .16);
    --glow: rgba(255, 143, 177, .5);
    --glow-opacity: .6;
    --shadow-card: 0 24px 56px -40px rgba(216, 130, 168, .7);
    --shadow-pop: 0 20px 44px -16px rgba(216, 130, 168, .38);
    --shadow-accent: 0 6px 22px rgba(255, 143, 177, .4);
    --shadow-hard: 0 20px 44px -18px rgba(216, 130, 168, .34);

    --grad-primary: linear-gradient(135deg, #ff8fb1, #ffbe6b);
    --grad-brand: linear-gradient(145deg, #ff8fb1, #a78bfa);
    --grad-hero: linear-gradient(105deg, #ff8fb1 0%, #ffbe6b 45%, #a78bfa 100%);
    --grad-warn: linear-gradient(135deg, #ffbe6b, #ff9f43);

    --accent-text: #d9638a;
    --warn-ink: #ffffff;
    --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239b7d8f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    --radius: 20px;
    --radius-sm: 14px;
    --radius-lg: 26px;
    --font: "Yuanti SC", "Yuanti TC", -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

/* ===== 全局底色与极光背景（各页面共用） ===== */
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
}

/* ===== 风格切换器 ===== */
.theme-dock {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    font-family: var(--font);
}

.theme-fab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px 9px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--bg-elev);
    color: var(--text-2);
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    box-shadow: var(--shadow-pop);
    transition: transform .18s, border-color .18s, color .18s;
}

.theme-fab:hover {
    color: var(--text);
    border-color: var(--line-strong);
    transform: translateY(-1px);
}

.theme-fab svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.theme-menu {
    width: 178px;
    padding: 7px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--bg-elev);
    box-shadow: var(--shadow-pop);
    display: flex;
    flex-direction: column;
    gap: 3px;
    animation: theme-pop .16s ease-out;
}

.theme-menu[hidden] {
    display: none;
}

@keyframes theme-pop {
    from { opacity: 0; transform: translateY(6px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.theme-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-2);
    font-size: 13px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .16s, color .16s, border-color .16s;
}

.theme-opt:hover {
    color: var(--text);
    background: var(--tint-6);
}

.theme-opt[aria-checked="true"] {
    color: var(--text);
    border-color: var(--accent-line);
    background: var(--accent-soft);
}

.theme-opt .sw {
    width: 16px;
    height: 16px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--line);
}

.theme-opt .sw-cool { background: linear-gradient(135deg, #7c5cff, #22d3ee); }
.theme-opt .sw-cute { background: linear-gradient(135deg, #ff8fb1, #ffbe6b); }
.theme-opt .sw-nature { background: linear-gradient(135deg, #4f8a5b, #d9a94c); }

.theme-opt .tick {
    margin-left: auto;
    width: 14px;
    height: 14px;
    opacity: 0;
    color: var(--accent);
}

.theme-opt[aria-checked="true"] .tick {
    opacity: 1;
}

@media (max-width: 640px) {
    .theme-dock {
        right: 14px;
        bottom: 14px;
    }

    .theme-fab .theme-fab-text {
        display: none;
    }

    .theme-fab {
        padding: 10px;
        border-radius: 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .theme-menu,
    .theme-fab {
        animation: none;
        transition: none;
    }
}