/* ===========================
   主题: Chasm (赛博霓虹)
   配色来源: colors/chasm.txt (22 色, 全部使用)
   风格: 科幻发光 — 小圆角、霓虹光晕、等宽字体、锐利感
   =========================== */

:root[data-theme="chasm"] {
    /* 背景色 */
    --bg-primary: #32313b;       /* 7 */
    --bg-secondary: #444774;     /* 6 */
    --bg-tertiary: #463c5e;      /* 8 */
    --hero-bg: #444774;          /* 6 */
    --section-alt-bg: #5d4776;   /* 9 */

    /* 卡片 */
    --card-bg: #463c5e;          /* 8 */
    --card-bg-hover: #5d4776;    /* 9 */
    --card-shadow: rgba(50, 49, 59, 0.5);
    --hover-shadow: rgba(50, 49, 59, 0.7);

    /* 文字 */
    --text-primary: #ffffff;     /* 22 */
    --text-secondary: #85daeb;   /* 1 */
    --text-muted: #f5daa7;       /* 14 */
    --nickname-color: #ca60ae;   /* 12 */
    --tagline-color: #ff5dcc;    /* 20 */

    /* 强调色 */
    --accent: #ca60ae;           /* 12 */
    --accent-hover: #ff5dcc;     /* 20 */
    --accent-text: #ffffff;      /* 22 */
    --accent-2: #855395;         /* 10 */

    /* 边框 & 阴影 */
    --border: #5d4776;           /* 9 */
    --border-hover: #4c60aa;     /* 5 */
    --shadow: rgba(50, 49, 59, 0.5);

    /* 导航栏 */
    --nav-bg: #444774;           /* 6 */
    --nav-text: #ffffff;         /* 22 */
    --nav-link-hover: #5efdf7;   /* 19 */

    /* 页脚 */
    --footer-bg: #32313b;        /* 7 */
    --footer-text: #85daeb;      /* 1 */

    /* 装饰 */
    --section-underline: #4ab9a3; /* 17 */
    --avatar-border: #4593a5;    /* 18 */

    /* 爱好卡片 */
    --hobby-accent-1: #855395;   /* 10 */
    --hobby-accent-2: #ab58a8;   /* 11 */
    --hobby-accent-3: #f3a787;   /* 13 */
    --hobby-accent-4: #f5daa7;   /* 14 */
    --hobby-icon-bg-1: #855395;  /* 10 */
    --hobby-icon-bg-2: #ab58a8;  /* 11 */
    --hobby-icon-bg-3: #f5daa7;  /* 14 */
    --hobby-icon-bg-4: #5efdf7;  /* 19 */
    --hobby-accent-5: #5fa1e7;   /* 3 */
    --hobby-icon-bg-5: #5d4776;  /* 9 */

    /* 社交链接 */
    --social-hover-1: #5fa1e7;   /* 3 */
    --social-hover-2: #5f6ee7;   /* 4 */
    --social-hover-3: #f3a787;   /* 13 */
    --social-hover-4: #8dd894;   /* 15 */
    --social-hover-5: #5dc190;   /* 16 */
    --social-hover-6: #fdfe89;   /* 21 */

    /* 额外 */
    --bg-secondary-alt: #4c60aa; /* 5 */
}

/* ---- 独特风格: 赛博霓虹 ---- */

/* 字体: 像素字体 — 复古科幻, 契合赛博霓虹主题 */
[data-theme="chasm"] body {
    font-family: "Fusion Pixel", "SF Mono", monospace;
}

/* 导航栏: 底部霓虹光线 */
[data-theme="chasm"] header {
    border-bottom: 2px solid #5efdf7;
    box-shadow: 0 2px 10px var(--shadow), 0 0 15px rgba(94, 253, 247, 0.2);
}

[data-theme="chasm"] .logo {
    text-transform: uppercase;
    letter-spacing: 2px;
}

[data-theme="chasm"] .nav-links a {
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

/* 卡片: 小圆角 + 霓虹发光边框 */
[data-theme="chasm"] .hobby-card {
    border-radius: 6px;
    border-top: 3px solid var(--hobby-accent-1);
}
[data-theme="chasm"] .hobby-card:nth-child(1) { border-top-color: var(--hobby-accent-1); }
[data-theme="chasm"] .hobby-card:nth-child(2) { border-top-color: var(--hobby-accent-2); }
[data-theme="chasm"] .hobby-card:nth-child(3) { border-top-color: var(--hobby-accent-3); }
[data-theme="chasm"] .hobby-card:nth-child(4) { border-top-color: var(--hobby-accent-4); }
[data-theme="chasm"] .hobby-card:nth-child(5) { border-top-color: var(--hobby-accent-5); }

[data-theme="chasm"] .hobby-card:nth-child(1):hover { box-shadow: 0 0 20px rgba(133, 83, 149, 0.4); }
[data-theme="chasm"] .hobby-card:nth-child(2):hover { box-shadow: 0 0 20px rgba(171, 88, 168, 0.4); }
[data-theme="chasm"] .hobby-card:nth-child(3):hover { box-shadow: 0 0 20px rgba(243, 167, 135, 0.4); }
[data-theme="chasm"] .hobby-card:nth-child(4):hover { box-shadow: 0 0 20px rgba(245, 218, 167, 0.4); }
[data-theme="chasm"] .hobby-card:nth-child(5):hover { box-shadow: 0 0 20px rgba(95, 161, 231, 0.4); }

[data-theme="chasm"] .hobby-card:hover {
    transform: translateY(-6px);
}

/* 图标: 方形 (科技感) */
[data-theme="chasm"] .hobby-icon {
    width: 60px;
    height: 60px;
    border-radius: 6px;
}

/* 关于我: 深色面板 + 霓虹左框 */
[data-theme="chasm"] .about-content {
    border-radius: 6px;
    border-left: 3px solid #5efdf7;
    box-shadow: 0 0 15px rgba(94, 253, 247, 0.1);
}

/* 社交链接: 霓虹悬停发光 */
[data-theme="chasm"] .social-link {
    border-radius: 6px;
}

[data-theme="chasm"] .social-link:nth-child(1):hover { box-shadow: 0 0 15px rgba(95, 161, 231, 0.3); }
[data-theme="chasm"] .social-link:nth-child(2):hover { box-shadow: 0 0 15px rgba(95, 110, 231, 0.3); }
[data-theme="chasm"] .social-link:nth-child(3):hover { box-shadow: 0 0 15px rgba(243, 167, 135, 0.3); }
[data-theme="chasm"] .social-link:nth-child(4):hover { box-shadow: 0 0 15px rgba(141, 216, 148, 0.3); }
[data-theme="chasm"] .social-link:nth-child(5):hover { box-shadow: 0 0 15px rgba(93, 193, 144, 0.3); }
[data-theme="chasm"] .social-link:nth-child(6):hover { box-shadow: 0 0 15px rgba(253, 254, 137, 0.3); }

[data-theme="chasm"] .social-link:hover {
    transform: translateY(-4px);
}

/* 标题: 发光下划线 */
[data-theme="chasm"] .section-header h2 {
    text-transform: uppercase;
    letter-spacing: 1px;
}

[data-theme="chasm"] .section-header h2::after {
    width: 50px;
    height: 2px;
    background-color: #5efdf7;
    box-shadow: 0 0 8px #5efdf7;
}

/* Hero 区域: 底部霓虹光线 (与页脚一致) */
[data-theme="chasm"] #home {
    border-bottom: 2px solid #5efdf7;
    box-shadow: 0 4px 15px rgba(94, 253, 247, 0.1);
}

/* 头像: 方形圆角 + 霓虹边框 */
[data-theme="chasm"] .avatar img {
    border-radius: 12px;
    border-width: 3px;
    border-color: #5efdf7;
    box-shadow: 0 0 20px rgba(94, 253, 247, 0.2);
}

/* 昵称: 发光效果 */
[data-theme="chasm"] .hero-text .nickname {
    text-shadow: 0 0 12px rgba(202, 96, 174, 0.6);
}

[data-theme="chasm"] .hero-text .tagline {
    font-style: normal;
}

/* 页脚: 顶部霓虹线 */
[data-theme="chasm"] footer {
    border-top: 2px solid #5efdf7;
    box-shadow: 0 -4px 15px rgba(94, 253, 247, 0.1);
}

[data-theme="chasm"] footer p {
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

/* 主题按钮发光 */
[data-theme="chasm"] .theme-btn[data-theme="chasm"] {
    box-shadow: 0 0 10px rgba(202, 96, 174, 0.5);
}

/* 语言切换器: 赛博发光 */
[data-theme="chasm"] .lang-trigger {
    border-radius: 4px;
    border-color: #5fa1e7;
    background-color: #32313b;
    color: #5efdf7;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.75rem;
    box-shadow: 0 0 6px rgba(95, 161, 231, 0.3);
}

[data-theme="chasm"] .lang-trigger:hover {
    box-shadow: 0 0 12px rgba(95, 161, 231, 0.6);
}

[data-theme="chasm"] .lang-switcher.open .lang-trigger {
    box-shadow: 0 0 14px rgba(95, 161, 231, 0.7);
}

[data-theme="chasm"] .lang-dropdown {
    border-radius: 4px;
    border-color: #5fa1e7;
    background-color: #32313b;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(95, 161, 231, 0.3), 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="chasm"] .lang-option {
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="chasm"] .lang-option:hover {
    background-color: rgba(95, 161, 231, 0.25);
    box-shadow: inset 0 0 8px rgba(95, 161, 231, 0.3);
}

[data-theme="chasm"] .lang-option.active {
    background-color: #5fa1e7;
    color: #32313b;
    box-shadow: 0 0 10px rgba(95, 161, 231, 0.5);
}