/* ============================================================
   芒果帝国 (Mango Empire) — Theme v3.1「黯金纪元」
   ============================================================
   主题覆盖层：在 v2 基础上替换沉郁史诗调色板
   设计语言：深空极黑 + 古铜金 + 深靛紫 + 冷灰中层
   风格基准：暗黑破坏神 IV / 艾尔登法环 / 沉郁史诗感
   核心升级：低饱和高级色 · 克制发光 · 冷灰过渡 · 金属反光质感
   ============================================================
   使用方式：在 style.css 和 design-upgrade-v2.css 之后引入
   <link rel="stylesheet" href="/css/theme-v3.css">
   ============================================================ */

@layer theme-v3-tokens, theme-v3-components, theme-v3-overrides;

/* ============================================================
   @layer theme-v3-tokens — 沉郁史诗调色板（覆盖 v2 令牌）
   ============================================================ */
@layer theme-v3-tokens {
  :root {
    /* ===== 品牌主色相（沉郁史诗 · 古铜金 + 深靛紫）===== */
    --hue-gold: 56;       /* 古铜金 — 偏红棕调，非亮黄 */
    --hue-purple: 266;    /* 深靛紫 — 偏蓝靛调，非艳紫 */
    --hue-teal: 188;      /* 深青色 — 冷色平衡，增加克制感 */
    --neutral-hue: 230;   /* 冷灰调 — 微蓝紫，避免死灰也避免艳紫 */

    /* ===== 金色系 · 古铜金（低饱和 · 沉郁高级感）===== */
    --gold-base-l: 65%;
    --gold-base-c: 0.16;
    --gold: oklch(var(--gold-base-l) var(--gold-base-c) var(--hue-gold));   /* 主金 — 古铜色 */
    --gold-light: oklch(80% 0.10 60);
    --gold-dark: oklch(49% 0.14 52);
    --gold-muted: oklch(57% 0.155 54);
    --gold-rose: oklch(58% 0.12 55);

    /* 金色色阶（沉郁版 · 显式定义确保低饱和）*/
    --gold-50:  oklch(94% 0.025 65);
    --gold-100: oklch(88% 0.06 62);
    --gold-200: oklch(80% 0.10 60);
    --gold-300: oklch(72% 0.14 58);
    --gold-400: oklch(65% 0.16 56);
    --gold-500: oklch(57% 0.155 54);
    --gold-600: oklch(49% 0.14 52);
    --gold-700: oklch(41% 0.12 50);
    --gold-800: oklch(33% 0.09 48);
    --gold-900: oklch(25% 0.06 45);

    /* ===== 紫色系 · 深靛紫（低饱和 · 紫罗兰调）===== */
    --purple: oklch(47% 0.17 264);
    --purple-light: oklch(64% 0.16 268);
    --purple-dark: oklch(33% 0.12 260);
    --purple-muted: oklch(55% 0.08 265);

    --purple-50:  oklch(92% 0.03 275);
    --purple-100: oklch(84% 0.07 272);
    --purple-200: oklch(74% 0.12 270);
    --purple-300: oklch(64% 0.16 268);
    --purple-400: oklch(55% 0.18 266);
    --purple-500: oklch(47% 0.17 264);
    --purple-600: oklch(40% 0.15 262);
    --purple-700: oklch(33% 0.12 260);
    --purple-800: oklch(26% 0.09 258);
    --purple-900: oklch(19% 0.06 255);

    /* ===== 深青色系 · 冷色平衡（新增 v3）===== */
    --teal-50:  oklch(94% 0.03 195);
    --teal-100: oklch(86% 0.06 192);
    --teal-200: oklch(76% 0.10 190);
    --teal-300: oklch(66% 0.13 188);
    --teal-400: oklch(56% 0.14 186);
    --teal-500: oklch(48% 0.13 184);
    --teal-600: oklch(40% 0.11 182);
    --teal-700: oklch(33% 0.09 180);
    --teal-800: oklch(26% 0.07 178);
    --teal-900: oklch(19% 0.05 176);

    /* ===== 金属质感色阶（沉郁版）===== */
    --metal-iron:     oklch(36% 0.008 230);
    --metal-bronze:   oklch(58% 0.12 55);
    --metal-silver:   oklch(72% 0.008 230);
    --metal-gold:     var(--gold-400);
    --metal-platinum: oklch(82% 0.008 220);
    --metal-obsidian: oklch(20% 0.01 240);

    /* ===== 语义化功能色（沉郁化）===== */
    --color-success-base: oklch(55% 0.13 150);
    --color-success-soft: oklch(66% 0.08 150 / 0.15);
    --color-success-strong: oklch(42% 0.14 148);
    --color-warning-base: oklch(62% 0.14 62);
    --color-warning-soft: oklch(72% 0.09 65 / 0.12);
    --color-error-base: oklch(48% 0.14 28);
    --color-error-strong: oklch(35% 0.15 25);
    --color-info-base: oklch(55% 0.12 240);
    --color-red-orange: oklch(48% 0.14 28);
    --color-ice-blue: oklch(62% 0.10 230);

    /* ===== 背景层级（沉郁深空）===== */
    --bg-app: oklch(10% 0.012 240);
    --bg-surface-1: oklch(14% 0.014 235);
    --bg-surface-2: oklch(20% 0.018 230);
    --bg-surface-3: oklch(26% 0.022 250);

    /* 毛玻璃（冷调半透，克制）*/
    --bg-glass-default: oklch(28% 0.02 230 / 0.4);
    --bg-glass-hover: oklch(34% 0.03 235 / 0.5);
    --bg-glass-border: oklch(50% 0.04 230 / 0.2);

    /* 输入框（沉郁）*/
    --input-bg: oklch(16% 0.015 230 / 0.7);
    --input-border: oklch(38% 0.025 230 / 0.5);
    --input-border-focus: var(--gold-500);
    --input-ring: oklch(57% 0.155 54 / 0.25);

    /* ===== 文本层级 ===== */
    --text-headline: oklch(94% 0.008 230);
    --text-body: oklch(82% 0.012 230);
    --text-subtle: oklch(62% 0.014 230);
    --text-disabled: oklch(45% 0.01 230);
    --text-on-gold: oklch(15% 0.02 50);
    --text-on-glass: var(--neutral-50);
    --text-gold: var(--gold-300);
    --text-rose: var(--gold-500);

    /* ===== 发光效果（克制版）===== */
    --glow-gold-sm: 0 0 8px oklch(57% 0.155 54 / 0.25);
    --glow-gold-md: 0 0 16px oklch(57% 0.155 54 / 0.2);
    --glow-gold-lg: 0 0 32px oklch(57% 0.155 54 / 0.15);
    --glow-purple-sm: 0 0 8px oklch(47% 0.17 264 / 0.2);
    --glow-purple-md: 0 0 16px oklch(47% 0.17 264 / 0.15);

    /* ===== 按钮交互令牌（沉郁版）===== */
    --btn-gold-bg: var(--gold-500);
    --btn-gold-hover: var(--gold-400);
    --btn-gold-active: var(--gold-600);
    --btn-gold-disabled: oklch(45% 0.08 55);
    --btn-gold-text: oklch(15% 0.02 50);
    --btn-gold-text-disabled: var(--neutral-600);

    --btn-glass-bg: var(--bg-glass-default);
  }
}

/* ============================================================
   @layer theme-v3-components — 组件级视觉升级
   ============================================================ */
@layer theme-v3-components {

  /* ===== 导航栏（沉郁毛玻璃）===== */
  .navbar {
    background: oklch(14% 0.014 235 / 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid oklch(40% 0.03 230 / 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .navbar.scrolled {
    background: oklch(12% 0.012 235 / 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid oklch(50% 0.04 55 / 0.15);
    box-shadow: 0 4px 30px oklch(0% 0 0 / 0.4);
  }

  /* Logo 金色调整为古铜金 */
  .nav-logo-icon svg path[stroke*="navMangoBase"],
  .nav-logo-icon svg stop[stop-color="#F2D68A"] { stop-color: #D4A55A; }
  .nav-logo-icon svg stop[stop-color="#D4A847"] { stop-color: #B8860B; }
  .nav-logo-icon svg stop[stop-color="#B8893A"] { stop-color: #8B6914; }

  .nav-logo-main {
    background: linear-gradient(135deg, var(--gold-200), var(--gold-400), var(--gold-500));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* 导航菜单项 */
  .nav-menu a {
    color: var(--text-subtle);
    transition: color 0.3s ease;
    position: relative;
  }

  .nav-menu a:hover {
    color: var(--gold-300);
  }

  .nav-menu a.active {
    color: var(--gold-300);
  }

  .nav-menu a.active::after {
    background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
    opacity: 0.6;
  }

  /* 注册按钮（古铜金）*/
  .btn-nav-register {
    background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
    color: var(--btn-gold-text);
    border: 1px solid oklch(57% 0.155 54 / 0.4);
    box-shadow: var(--glow-gold-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .btn-nav-register:hover {
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    box-shadow: var(--glow-gold-md);
    transform: translateY(-1px);
  }

  /* 用户下拉菜单 */
  .dropdown-menu {
    background: oklch(18% 0.02 230 / 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--bg-glass-border);
    box-shadow: 0 20px 60px oklch(0% 0 0 / 0.5);
  }

  .dropdown-menu a:hover {
    background: oklch(57% 0.155 54 / 0.1);
    color: var(--gold-300);
  }

  .dropdown-divider {
    border-color: oklch(40% 0.03 230 / 0.3);
  }

  /* ===== 玻璃卡片（沉郁克制版）===== */
  .glass-card,
  .page-box,
  .dashboard-stat-card,
  .feature-card {
    background: oklch(22% 0.02 230 / 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid oklch(45% 0.035 230 / 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .glass-card:hover,
  .page-box:hover,
  .dashboard-stat-card:hover,
  .feature-card:hover {
    border-color: oklch(57% 0.155 54 / 0.25);
    box-shadow: 0 8px 40px oklch(0% 0 0 / 0.3),
                0 0 20px oklch(57% 0.155 54 / 0.08);
    transform: translateY(-2px);
  }

  /* 菲涅尔光（克制版）*/
  .glass-card::before,
  .page-box::before,
  .dashboard-stat-card::before,
  .feature-card::before {
    background: radial-gradient(
        ellipse at 30% 15%,
        oklch(100% 0 0 / 0.05) 0%,
        transparent 55%
    );
  }

  /* ===== Hero 金属文字（沉郁古铜版）===== */
  .hero-title,
  .hero-galaxy h1,
  .hero-container h1 {
    background: linear-gradient(
        135deg,
        var(--gold-200) 0%,
        var(--gold-400) 25%,
        var(--gold-500) 45%,
        var(--gold-600) 55%,
        var(--purple-400) 80%,
        var(--purple-500) 100%
    );
    filter: drop-shadow(0 15px 40px oklch(57% 0.155 54 / 0.15));
    animation-duration: 10s;
  }

  /* Hero 紫色环境光（克制）*/
  .hero-galaxy::before,
  .hero-container::before {
    background: radial-gradient(
        circle at 70% 30%,
        oklch(47% 0.17 264 / 0.12) 0%,
        oklch(28% 0.08 260 / 0.04) 50%,
        transparent 75%
    );
  }

  /* ===== 按钮系统（沉郁古铜）===== */
  .btn-primary,
  .btn-gold,
  button.primary {
    background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
    color: var(--btn-gold-text);
    border: 1px solid oklch(57% 0.155 54 / 0.4);
    box-shadow: var(--glow-gold-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .btn-primary:hover,
  .btn-gold:hover,
  button.primary:hover {
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    box-shadow: var(--glow-gold-md);
    transform: translateY(-1px);
  }

  .btn-secondary,
  .btn-purple {
    background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
    border: 1px solid oklch(47% 0.17 264 / 0.4);
    box-shadow: var(--glow-purple-sm);
  }

  .btn-secondary:hover,
  .btn-purple:hover {
    background: linear-gradient(135deg, var(--purple-400), var(--purple-600));
    box-shadow: var(--glow-purple-md);
  }

  /* ===== 表单输入（沉郁版）===== */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select,
  textarea,
  .form-input,
  .input-field {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-body);
    transition: all 0.3s ease;
  }

  input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="password"]:focus,
  input[type="number"]:focus,
  select:focus,
  textarea:focus,
  .form-input:focus,
  .input-field:focus {
    border-color: var(--gold-500);
    box-shadow: 0 0 0 3px oklch(57% 0.155 54 / 0.15),
                var(--glow-gold-sm);
    outline: none;
  }

  /* ===== 徽章（沉郁色）===== */
  .badge-gold {
    background: oklch(57% 0.155 54 / 0.15);
    color: var(--gold-300);
    border: 1px solid oklch(57% 0.155 54 / 0.3);
  }

  .badge-purple {
    background: oklch(47% 0.17 264 / 0.15);
    color: var(--purple-300);
    border: 1px solid oklch(47% 0.17 264 / 0.3);
  }

  .badge-success {
    background: oklch(55% 0.13 150 / 0.15);
    color: oklch(72% 0.12 150);
    border: 1px solid oklch(55% 0.13 150 / 0.3);
  }

  .badge-danger {
    background: oklch(48% 0.14 28 / 0.15);
    color: oklch(68% 0.12 30);
    border: 1px solid oklch(48% 0.14 28 / 0.3);
  }

  /* ===== 表格（沉郁版）===== */
  table.data-table,
  .table thead th {
    border-bottom: 1px solid oklch(40% 0.03 230 / 0.3);
  }

  table.data-table tbody tr,
  .table tbody tr {
    border-bottom: 1px solid oklch(30% 0.02 230 / 0.3);
  }

  table.data-table tbody tr:hover,
  .table tbody tr:hover {
    background: oklch(57% 0.155 54 / 0.04);
  }

  /* ===== 分割线（金色装饰）===== */
  .divider-gold,
  .section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-600), transparent);
    opacity: 0.4;
  }

  /* ===== 金属文字效果（通用类）===== */
  .text-metallic,
  .metallic-text {
    background: linear-gradient(
      135deg,
      var(--gold-200) 0%,
      var(--gold-400) 20%,
      var(--gold-500) 45%,
      var(--gold-600) 55%,
      var(--gold-500) 75%,
      var(--gold-300) 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 10px oklch(55% 0.14 56 / 0.25));
    animation: metallic-shimmer 8s ease-in-out infinite alternate;
  }

  @keyframes metallic-shimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
  }

  /* ===== 页脚（沉郁版）===== */
  .footer {
    background: oklch(12% 0.012 235 / 0.9);
    border-top: 1px solid oklch(40% 0.03 230 / 0.2);
  }

  .footer-links a:hover {
    color: var(--gold-300);
  }

  .footer-bottom {
    border-color: oklch(35% 0.025 230 / 0.3);
  }

  /* ===== 通知铃铛 ===== */
  .bell-badge {
    background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
    color: var(--btn-gold-text);
    box-shadow: var(--glow-gold-sm);
  }

  .bell-badge-admin {
    background: linear-gradient(135deg, var(--purple-400), var(--purple-600));
    box-shadow: var(--glow-purple-sm);
  }

  .notification-panel {
    background: oklch(18% 0.02 230 / 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--bg-glass-border);
    box-shadow: 0 20px 60px oklch(0% 0 0 / 0.5);
  }

  .notif-item:hover {
    background: oklch(57% 0.155 54 / 0.06);
  }

  .notif-item.unread {
    background: oklch(57% 0.155 54 / 0.04);
  }

  .notif-dot {
    background: var(--gold-400);
    box-shadow: 0 0 6px oklch(57% 0.155 54 / 0.5);
  }

  /* ===== 模态框（沉郁版）===== */
  .modal-overlay {
    background: oklch(5% 0.01 240 / 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .modal-content {
    background: oklch(20% 0.02 230 / 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid oklch(45% 0.035 230 / 0.25);
    box-shadow: 0 30px 80px oklch(0% 0 0 / 0.6);
  }
}

/* ============================================================
   @layer theme-v3-overrides — 滚动揭示动画 & 响应式
   ============================================================ */
@layer theme-v3-overrides {

  /* ===== 滚动揭示动画（与 shared.js 配合）===== */
  .reveal,
  .reveal-up,
  .reveal-left,
  .reveal-right {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
  }

  .reveal-up {
    transform: translateY(40px);
  }

  .reveal-left {
    transform: translateX(-40px);
  }

  .reveal-right {
    transform: translateX(40px);
  }

  .reveal-visible {
    opacity: 1;
    transform: translate(0, 0);
  }

  /* 延迟类 */
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
  .reveal-delay-4 { transition-delay: 0.4s; }
  .reveal-delay-5 { transition-delay: 0.5s; }
  .reveal-delay-6 { transition-delay: 0.6s; }

  /* ===== 减少动效偏好 ===== */
  @media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-up,
    .reveal-left,
    .reveal-right {
      opacity: 1;
      transform: none;
      transition: none;
    }

    .text-metallic,
    .metallic-text,
    .hero-title,
    .hero-galaxy h1,
    .hero-container h1 {
      animation: none;
    }
  }

  /* ===== 焦点可见 ===== */
  *:focus-visible {
    outline: 2px solid var(--gold-400);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px oklch(57% 0.155 54 / 0.15);
    border-radius: 4px;
  }

  /* ===== 移动端菜单按钮 ===== */
  .nav-toggle {
    background: oklch(30% 0.02 230 / 0.6);
    border: 1px solid oklch(50% 0.04 230 / 0.2);
    color: var(--text-body);
    transition: all 0.3s ease;
  }

  .nav-toggle:hover {
    background: oklch(40% 0.03 230 / 0.7);
    border-color: oklch(57% 0.155 54 / 0.3);
    color: var(--gold-300);
  }

  /* ===== 响应式微调 ===== */
  @media (max-width: 768px) {
    .nav-menu {
      background: oklch(16% 0.015 235 / 0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-top: 1px solid oklch(40% 0.03 230 / 0.2);
    }

    .nav-menu a {
      border-bottom: 1px solid oklch(30% 0.02 230 / 0.3);
    }
  }
}