/* ======================================================================
 * ui-redesign.css — 全站 UI 重设计 v3（配色 / 字体层级 / 布局质感 / 焦点可访问性）
 *
 * 加载顺序：home.css → site-refresh.css → theme-toggle.css → 本文件（最后加载，权重最高）。
 * 设计原则：
 *   1. 只重定义设计令牌与通用 Chrome（导航/页脚/按钮/卡片/焦点），不动各工具页自有样式；
 *   2. 结构性覆盖一律用 :where() 把特异性降到 0，任何页面自己的样式仍可覆盖本文件；
 *   3. 深色模式由导航栏三态切换（auto/light/dark）控制，本文件在 :root[data-theme="dark"]
 *      下同步重定义色板，所有 var(--c-*) 消费方自动跟随。
 * ====================================================================== */

/* ---------- 1. 浅色 · 设计令牌重定义（青翠 × 靛紫双主色） ---------- */
:root {
    /* 中性底色：微青调，与旧版冷灰区分 */
    --c-bg: #f4f7f5;
    --c-bg-soft: #ebf0ed;
    --c-bg-card: #ffffff;
    --c-surface: #ffffff;
    --c-surface-soft: #f8faf9;
    --c-surface-2: #eef2f0;

    /* 文字层级：主文更沉稳，次级更柔和 */
    --c-text: #161b1e;
    --c-text-sub: #414b51;
    --c-text-muted: #7b868c;

    /* 主色：青翠绿（旧版蓝 → 青翠），辅色靛紫 */
    --c-primary: #0c8a67;
    --c-primary-dark: #086a50;
    --c-primary-soft: #e4f5ee;

    --c-border: #e2e8e4;
    --c-accent-cyan: #0899b8;
    --c-accent-purple: #7c5cf6;
    --c-accent-pink: #ef5f8e;
    --c-accent-green: #18a05a;
    --c-accent-orange: #e08519;

    /* 阴影：带青调，浮起更柔 */
    --shadow-sm: 0 1px 2px rgba(18, 46, 38, 0.05);
    --shadow-md: 0 8px 24px rgba(18, 46, 38, 0.08);
    --shadow-lg: 0 18px 48px rgba(18, 46, 38, 0.12);
    --shadow-hover: 0 20px 52px rgba(12, 138, 103, 0.18);

    /* 圆角体系：更圆润 */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 22px;
}

/* ---------- 2. 字体层级重排（:where 保证不抢工具页样式） ---------- */
:where(h1, h2, h3) {
    letter-spacing: -0.015em;
    line-height: 1.28;
}
:where(h1) { font-weight: 800; }
:where(h2) { font-weight: 750; }
:where(h3) { font-weight: 650; }
:where(p, li, td, th, dd, dt, figcaption) {
    letter-spacing: 0.12px;
}
/* 段落节奏：连续段落间留白 */
:where(p + p) { margin-top: 0.85em; }

/* ---------- 3. 通用 Chrome：导航栏 ---------- */
:where(.header) {
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 1px 0 rgba(18, 46, 38, 0.06);
}
/* 导航底部青翠渐变发丝线 */
:where(.header)::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(12, 138, 103, 0.55) 30%,
        rgba(124, 92, 246, 0.45) 65%,
        transparent 100%);
    pointer-events: none;
}
/* 导航链接 hover：短下划线滑入 */
:where(.header .nav-links a, .nav-links a) {
    position: relative;
    transition: color 0.25s ease;
}
:where(.header .nav-links a)::after {
    content: "";
    position: absolute;
    left: 50%; bottom: -4px;
    width: 0; height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--c-primary), var(--c-accent-purple));
    transition: width 0.25s var(--ease, ease), left 0.25s var(--ease, ease);
}
:where(.header .nav-links a:hover)::after {
    left: 12%;
    width: 76%;
}

/* ---------- 3.5 通用 Chrome：面包屑（未自带样式的工具页兜底，与导航容器对齐） ---------- */
.tsk-crumb-bar-in {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 32px 0;
}
.tsk-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--c-text-sub, #5a6a72);
}
.tsk-crumb a {
    color: var(--c-text-sub, #5a6a72);
    text-decoration: none;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--c-bg-soft, rgba(18, 46, 38, 0.05));
    transition: color 0.15s ease, background 0.15s ease;
}
.tsk-crumb a:hover {
    color: var(--c-primary);
    background: var(--c-primary-soft, rgba(12, 138, 103, 0.09));
}
.tsk-crumb .tsk-crumb-sep {
    color: var(--c-text-muted, #9aa79c);
    font-size: 12px;
}
.tsk-crumb .tsk-crumb-cur {
    color: var(--c-text, #16242b);
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(12, 138, 103, 0.10), rgba(124, 92, 246, 0.10));
}
:root[data-theme="dark"] .tsk-crumb a {
    background: rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .tsk-crumb .tsk-crumb-cur {
    color: #eef3ee;
}
@media (max-width: 768px) {
    .tsk-crumb-bar-in { padding: 8px 16px 0; }
}

/* ---------- 4. 通用 Chrome：页脚 ---------- */:where(footer)::before {
    content: "";
    display: block;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(12, 138, 103, 0.35) 35%,
        rgba(124, 92, 246, 0.30) 70%,
        transparent 100%);
}

/* ---------- 5. 按钮：统一手感 ---------- */
:where(button, .btn, [class*="btn"]) {
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
:where(button:active) { transform: scale(0.97); }

/* ---------- 6. 焦点可访问性（键盘导航全站可见） ---------- */
:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- 7. 选区与滚动条微调 ---------- */
::selection {
    background: rgba(12, 138, 103, 0.18);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: rgba(12, 138, 103, 0.28);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(12, 138, 103, 0.45); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 8. 深色模式 · 令牌同步重定义 ---------- */
:root[data-theme="dark"] {
    --c-bg: #0e1413;
    --c-bg-soft: #151c1a;
    --c-bg-card: #151d1b;
    --c-surface: #151d1b;
    --c-surface-soft: #1a2321;
    --c-surface-2: #0e1413;

    --c-text: #e9efec;
    --c-text-sub: #b0bcba;
    --c-text-muted: #7f8d8a;

    --c-primary: #3ecf9f;
    --c-primary-dark: #6fe0ba;
    --c-primary-soft: rgba(62, 207, 159, 0.13);

    --c-border: #263029;
    --c-accent-cyan: #22b8d4;
    --c-accent-purple: #a78bfa;
    --c-accent-pink: #f472a0;
    --c-accent-green: #34d399;
    --c-accent-orange: #f0a04b;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.42);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.5);
    --shadow-hover: 0 20px 52px rgba(62, 207, 159, 0.16);
}
:root[data-theme="dark"] :where(.header) {
    background: rgba(14, 20, 19, 0.86);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}
:root[data-theme="dark"] ::selection {
    background: rgba(62, 207, 159, 0.28);
}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(62, 207, 159, 0.30);
    border: 2px solid transparent;
    background-clip: content-box;
}
:root[data-theme="dark"] :where(footer)::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(62, 207, 159, 0.30) 35%,
        rgba(167, 139, 250, 0.28) 70%,
        transparent 100%);
}

/* ---------- 9. 减弱动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
    :where(*) {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}