/* ============================================================================
   candywebV2 —— 九套风格 × 明暗
   ----------------------------------------------------------------------------
   每个主题两块：基础块给 light 值，[data-mode="dark"] 块只覆盖需要变的变量。
   加一套新风格 = 在这里加两块 + 在 js/app.js 的 WS_THEMES 里加名字，
   别的地方一行都不用改。check.js 会校验三处（CSS light 块 / CSS dark 块 /
   JS 数组）完全对齐。
   ========================================================================== */

/* 兜底：万一 data-theme 没设上，也用 candy 的亮色，不会白屏 */
:root {
    --c-bg: #f8fafc;        --c-bg-2: #eef4ff;
    --c-surface: #ffffff;   --c-surface-2: #f4f7fd;
    --c-border: #e2e8f4;    --c-text: #1e2433;      --c-dim: #6b7690;
    --c-accent: #4f7cff;    --c-accent-2: #a855f7;  --c-accent-ink: #ffffff;
    --c-shadow: 0 4px 20px -8px rgba(31,45,80,.16);
    --c-glow: rgba(79,124,255,.22);
    --c-pattern: none;      --c-pattern-size: 24px; --c-pattern-op: .5;
    --c-radius: 14px;
    --c-font: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
              system-ui, -apple-system, sans-serif;
}

/* ============================ 1. sakura 樱花 ============================ */
html[data-theme="sakura"] {
    --c-bg: #fff6f9;        --c-bg-2: #ffeaf2;
    --c-surface: #ffffff;   --c-surface-2: #fff1f6;
    --c-border: #f7d9e5;    --c-text: #3d2a33;      --c-dim: #8f7581;
    --c-accent: #e8467f;    --c-accent-2: #f79ec2;  --c-accent-ink: #ffffff;
    --c-shadow: 0 4px 20px -8px rgba(180,60,110,.18);
    --c-glow: rgba(232,70,127,.20);
    --c-pattern:
        radial-gradient(circle at 20% 30%, var(--c-accent-2) 0 3px, transparent 4px),
        radial-gradient(circle at 70% 65%, var(--c-accent) 0 2px, transparent 3px),
        radial-gradient(circle at 45% 90%, var(--c-accent-2) 0 2px, transparent 3px);
    --c-pattern-size: 150px 150px;
    --c-pattern-op: .16;
}
html[data-theme="sakura"][data-mode="dark"] {
    --c-bg: #1a1017;        --c-bg-2: #241522;
    --c-surface: #241822;   --c-surface-2: #2f1f2c;
    --c-border: #46303e;    --c-text: #f5e8ef;      --c-dim: #ab90a0;
    --c-accent: #ff6fa8;    --c-accent-2: #ffa9d0;  --c-accent-ink: #2a0d19;
    --c-shadow: 0 4px 24px -8px rgba(0,0,0,.55);
    --c-glow: rgba(255,111,168,.26);
    --c-pattern-op: .22;
}

/* ============================ 2. candy 糖果 ============================ */
html[data-theme="candy"] {
    --c-bg: #f8fafc;        --c-bg-2: #eef4ff;
    --c-surface: #ffffff;   --c-surface-2: #f4f7fd;
    --c-border: #e2e8f4;    --c-text: #1e2433;      --c-dim: #6b7690;
    --c-accent: #4f7cff;    --c-accent-2: #a855f7;  --c-accent-ink: #ffffff;
    --c-shadow: 0 4px 20px -8px rgba(31,45,80,.16);
    --c-glow: rgba(79,124,255,.22);
    --c-pattern: radial-gradient(circle, var(--c-accent-2) 0 2px, transparent 2.6px);
    --c-pattern-size: 26px 26px;
    --c-pattern-op: .13;
}
html[data-theme="candy"][data-mode="dark"] {
    --c-bg: #0b0f19;        --c-bg-2: #121829;
    --c-surface: #141a2a;   --c-surface-2: #1c2438;
    --c-border: #2a3448;    --c-text: #e6ecf8;      --c-dim: #8d9ab5;
    --c-accent: #6d8dff;    --c-accent-2: #c084fc;  --c-accent-ink: #0a0e18;
    --c-shadow: 0 4px 24px -8px rgba(0,0,0,.6);
    --c-glow: rgba(109,141,255,.26);
    --c-pattern-op: .2;
}

/* ============================ 3. cyber 赛博 ============================ */
html[data-theme="cyber"] {
    --c-bg: #eef6ff;        --c-bg-2: #dfeaff;
    --c-surface: #ffffff;   --c-surface-2: #eef5ff;
    --c-border: #c9dcf5;    --c-text: #0d1b2a;      --c-dim: #5a7291;
    --c-accent: #0891b2;    --c-accent-2: #d6259a;  --c-accent-ink: #ffffff;
    --c-shadow: 0 4px 20px -8px rgba(8,80,140,.2);
    --c-glow: rgba(8,145,178,.22);
    --c-pattern:
        linear-gradient(to right, var(--c-accent) 1px, transparent 1px),
        linear-gradient(to bottom, var(--c-accent) 1px, transparent 1px);
    --c-pattern-size: 44px 44px;
    --c-pattern-op: .1;
    --c-font: ui-monospace, "Cascadia Code", Consolas, "Microsoft YaHei", monospace;
}
html[data-theme="cyber"][data-mode="dark"] {
    --c-bg: #04070f;        --c-bg-2: #08101f;
    --c-surface: #0b1322;   --c-surface-2: #101b30;
    --c-border: #1c2f52;    --c-text: #d7e8ff;      --c-dim: #7591bd;
    --c-accent: #22d3ee;    --c-accent-2: #f472b6;  --c-accent-ink: #04121a;
    --c-shadow: 0 0 0 1px rgba(34,211,238,.08), 0 8px 30px -10px rgba(0,0,0,.8);
    --c-glow: rgba(34,211,238,.3);
    --c-pattern-op: .16;
}
/* 赛博风专属：卡片描边发光 + 标题等宽 */
html[data-theme="cyber"] .card,
html[data-theme="cyber"] .bm { box-shadow: var(--c-shadow); }
html[data-theme="cyber"] .card:hover,
html[data-theme="cyber"] .bm:hover { box-shadow: 0 0 0 1px var(--c-accent), 0 0 26px -6px var(--c-glow); }
html[data-theme="cyber"] .sec-head h2,
html[data-theme="cyber"] .hero__title { letter-spacing: .06em; }

/* ============================ 4. minimal 极简 ============================ */
html[data-theme="minimal"] {
    --c-bg: #ffffff;        --c-bg-2: #f4f4f5;
    --c-surface: #ffffff;   --c-surface-2: #fafafa;
    --c-border: #e5e5e6;    --c-text: #16161a;      --c-dim: #77777e;
    --c-accent: #16161a;    --c-accent-2: #6b6b73;  --c-accent-ink: #ffffff;
    --c-shadow: none;
    --c-glow: rgba(0,0,0,.06);
    --c-pattern: none;      --c-pattern-size: 24px; --c-pattern-op: 0;
    --c-radius: 4px;
}
html[data-theme="minimal"][data-mode="dark"] {
    --c-bg: #0e0e10;        --c-bg-2: #17171a;
    --c-surface: #16161a;   --c-surface-2: #1e1e22;
    --c-border: #2c2c31;    --c-text: #f2f2f4;      --c-dim: #96969e;
    --c-accent: #f2f2f4;    --c-accent-2: #b9b9c0;  --c-accent-ink: #16161a;
    --c-glow: rgba(255,255,255,.07);
}
html[data-theme="minimal"] .sec-head h2 { font-weight: 400; letter-spacing: .14em; text-transform: uppercase; font-size: 1.1rem; }
html[data-theme="minimal"] .hero__title { font-weight: 300; letter-spacing: .04em; }
html[data-theme="minimal"] .card:hover { transform: none; }

/* ============================ 5. aurora 极光 ============================ */
html[data-theme="aurora"] {
    --c-bg: #f2fbf9;        --c-bg-2: #e7f5ff;
    --c-surface: #ffffff;   --c-surface-2: #eef8f7;
    --c-border: #cfeae6;    --c-text: #10302c;      --c-dim: #5c807b;
    --c-accent: #0d9488;    --c-accent-2: #6366f1;  --c-accent-ink: #ffffff;
    --c-shadow: 0 4px 20px -8px rgba(13,110,110,.18);
    --c-glow: rgba(13,148,136,.2);
    --c-pattern: repeating-linear-gradient(115deg,
        var(--c-accent) 0 1px, transparent 1px 26px);
    --c-pattern-size: auto;
    --c-pattern-op: .1;
}
html[data-theme="aurora"][data-mode="dark"] {
    --c-bg: #04121a;        --c-bg-2: #0a1f2c;
    --c-surface: #0a1c26;   --c-surface-2: #102a36;
    --c-border: #1b3f4c;    --c-text: #dff5f3;      --c-dim: #7ba6a8;
    --c-accent: #2dd4bf;    --c-accent-2: #818cf8;  --c-accent-ink: #04181a;
    --c-shadow: 0 4px 24px -8px rgba(0,0,0,.6);
    --c-glow: rgba(45,212,191,.26);
    --c-pattern-op: .16;
}

/* ============================ 6. mint 薄荷 ============================ */
html[data-theme="mint"] {
    --c-bg: #f3fbf7;        --c-bg-2: #e6f7ee;
    --c-surface: #ffffff;   --c-surface-2: #eef9f3;
    --c-border: #d0ecdd;    --c-text: #133226;      --c-dim: #5f8574;
    --c-accent: #0f9d76;    --c-accent-2: #2dd4bf;  --c-accent-ink: #ffffff;
    --c-shadow: 0 4px 20px -8px rgba(15,120,95,.16);
    --c-glow: rgba(15,157,118,.2);
    --c-pattern: radial-gradient(circle, var(--c-accent) 0 1.6px, transparent 2.2px);
    --c-pattern-size: 22px 22px;
    --c-pattern-op: .12;
}
html[data-theme="mint"][data-mode="dark"] {
    --c-bg: #071610;        --c-bg-2: #0c2219;
    --c-surface: #0c1f18;   --c-surface-2: #132c22;
    --c-border: #1f4436;    --c-text: #e0f5ec;      --c-dim: #7fa899;
    --c-accent: #4ade80;    --c-accent-2: #2dd4bf;  --c-accent-ink: #04160d;
    --c-shadow: 0 4px 24px -8px rgba(0,0,0,.55);
    --c-glow: rgba(74,222,128,.24);
    --c-pattern-op: .18;
}

/* ============================ 7. amber 琥珀 ============================ */
html[data-theme="amber"] {
    --c-bg: #fffaf0;        --c-bg-2: #fdf0da;
    --c-surface: #ffffff;   --c-surface-2: #fdf5e6;
    --c-border: #f2e0be;    --c-text: #3a2a10;      --c-dim: #8b7350;
    --c-accent: #c2740a;    --c-accent-2: #f0a825;  --c-accent-ink: #ffffff;
    --c-shadow: 0 4px 20px -8px rgba(170,110,20,.18);
    --c-glow: rgba(194,116,10,.22);
    --c-pattern: repeating-linear-gradient(45deg,
        var(--c-accent) 0 1px, transparent 1px 20px);
    --c-pattern-size: auto;
    --c-pattern-op: .1;
}
html[data-theme="amber"][data-mode="dark"] {
    --c-bg: #170f05;        --c-bg-2: #241809;
    --c-surface: #1e1508;   --c-surface-2: #2b1e0c;
    --c-border: #4a3517;    --c-text: #f7ecd8;      --c-dim: #b39a72;
    --c-accent: #fbbf24;    --c-accent-2: #fb923c;  --c-accent-ink: #1d1403;
    --c-shadow: 0 4px 24px -8px rgba(0,0,0,.6);
    --c-glow: rgba(251,191,36,.26);
    --c-pattern-op: .16;
}

/* ============================ 8. graphite 石墨 ============================ */
html[data-theme="graphite"] {
    --c-bg: #f4f5f7;        --c-bg-2: #e8eaef;
    --c-surface: #ffffff;   --c-surface-2: #f0f2f5;
    --c-border: #dcdfe6;    --c-text: #1c2029;      --c-dim: #6a7280;
    --c-accent: #475569;    --c-accent-2: #0ea5e9;  --c-accent-ink: #ffffff;
    --c-shadow: 0 4px 18px -8px rgba(30,40,60,.2);
    --c-glow: rgba(14,165,233,.16);
    --c-pattern:
        linear-gradient(to right, var(--c-accent-2) 1px, transparent 1px),
        linear-gradient(to bottom, var(--c-accent-2) 1px, transparent 1px);
    --c-pattern-size: 60px 60px;
    --c-pattern-op: .07;
    --c-radius: 10px;
}
html[data-theme="graphite"][data-mode="dark"] {
    --c-bg: #0d0f13;        --c-bg-2: #15181e;
    --c-surface: #14171d;   --c-surface-2: #1c2029;
    --c-border: #282d37;    --c-text: #e4e7ec;      --c-dim: #8b93a1;
    --c-accent: #94a3b8;    --c-accent-2: #38bdf8;  --c-accent-ink: #0d0f13;
    --c-shadow: 0 4px 22px -8px rgba(0,0,0,.6);
    --c-glow: rgba(56,189,248,.2);
    --c-pattern-op: .12;
}

/* ============================ 9. mist 雾 ============================ */
html[data-theme="mist"] {
    --c-bg: #f6f8fb;        --c-bg-2: #e8eff8;
    --c-surface: #ffffff;   --c-surface-2: #eff4fa;
    --c-border: #d8e2ef;    --c-text: #1d2836;      --c-dim: #67788e;
    --c-accent: #4f7ea8;    --c-accent-2: #8fb3d9;  --c-accent-ink: #ffffff;
    --c-shadow: 0 4px 20px -8px rgba(60,90,130,.18);
    --c-glow: rgba(79,126,168,.2);
    --c-pattern: radial-gradient(circle, var(--c-accent-2) 0 1.4px, transparent 2px);
    --c-pattern-size: 30px 30px;
    --c-pattern-op: .16;
}
html[data-theme="mist"][data-mode="dark"] {
    --c-bg: #0b0f14;        --c-bg-2: #131a23;
    --c-surface: #121821;   --c-surface-2: #1a222d;
    --c-border: #27313f;    --c-text: #e2eaf4;      --c-dim: #8a9bb0;
    --c-accent: #8ab4e8;    --c-accent-2: #b3cdea;  --c-accent-ink: #0b0f14;
    --c-shadow: 0 4px 22px -8px rgba(0,0,0,.6);
    --c-glow: rgba(138,180,232,.22);
    --c-pattern-op: .18;
}

/* ============================================================================
   风格选择器里每个小色块的颜色（写在这里，JS 不用维护第二份配色表）
   ========================================================================== */
.theme-chip[data-theme-name="sakura"]   .theme-chip__dot { --chip: linear-gradient(135deg,#e8467f,#f79ec2); }
.theme-chip[data-theme-name="candy"]    .theme-chip__dot { --chip: linear-gradient(135deg,#4f7cff,#a855f7); }
.theme-chip[data-theme-name="cyber"]    .theme-chip__dot { --chip: linear-gradient(135deg,#22d3ee,#f472b6); }
.theme-chip[data-theme-name="minimal"]  .theme-chip__dot { --chip: linear-gradient(135deg,#d4d4d8,#71717a); }
.theme-chip[data-theme-name="aurora"]   .theme-chip__dot { --chip: linear-gradient(135deg,#2dd4bf,#818cf8); }
.theme-chip[data-theme-name="mint"]     .theme-chip__dot { --chip: linear-gradient(135deg,#0f9d76,#2dd4bf); }
.theme-chip[data-theme-name="amber"]    .theme-chip__dot { --chip: linear-gradient(135deg,#c2740a,#f0a825); }
.theme-chip[data-theme-name="graphite"] .theme-chip__dot { --chip: linear-gradient(135deg,#475569,#38bdf8); }
.theme-chip[data-theme-name="mist"]     .theme-chip__dot { --chip: linear-gradient(135deg,#4f7ea8,#8fb3d9); }