/*
 * 永贸时代 · 黑金设计 Tokens + 工具类
 *
 * 文字仅两档：--text-1 主文 / --text-muted 弱文（--text-2、--text-3 为兼容别名）。
 * 本仓库未接入 Tailwind 构建链；请勿使用 @tailwind。
 */
:root {
  --bg-canvas: #060605;
  --bg-surface: #0f0e0b;
  --bg-surface-2: #181712;
  --bg-elev: #221f18;

  --stroke-1: #352f22;
  --stroke-2: #4a4230;
  --stroke-strong: #6e5f3a;

  --gold-50: #fdf6dd;
  --gold-100: #f6e7a6;
  --gold-200: #ecd070;
  --gold-300: #e4c24a;
  --gold-400: #d4ae2e;
  --gold-500: #c9a227;
  --gold-600: #a47900;
  --gold-700: #7a5c00;
  --gold-800: #5a4400;
  --gold-900: #3b2c00;

  /* 两档正文色：主文提亮以利对比；弱文单档避免灰阶杂乱 */
  --text-1: #f8f2e4;
  --text-muted: #b0a178;
  --text-2: var(--text-muted);
  --text-3: var(--text-muted);

  --success: #5da46a;
  --danger: #d24e4e;
  --warning: #e2a13b;
  --info: #6aa3d4;

  --radius: 14px;
}

/* 仅深色：默认描边 */
[data-theme="dark"] *,
[data-theme="dark"] *::before,
[data-theme="dark"] *::after {
  border-color: var(--stroke-1);
}

[data-theme="dark"] body {
  background-image: radial-gradient(
      at 12% 16%,
      rgba(201, 162, 39, 0.12) 0px,
      transparent 55%
    ),
    radial-gradient(at 88% 12%, rgba(201, 162, 39, 0.1) 0px, transparent 58%),
    radial-gradient(at 50% 100%, rgba(201, 162, 39, 0.08) 0px, transparent 72%),
    linear-gradient(180deg, var(--bg-canvas) 0%, #0a0907 100%);
  background-attachment: fixed;
}

[data-theme="dark"] ::selection {
  background: rgba(201, 162, 39, 0.4);
  color: var(--text-1);
}

@layer utilities {
  .text-gold {
    color: var(--gold-300);
  }
  .text-gold-strong {
    color: var(--gold-500);
  }
  .border-gold {
    border-color: var(--gold-700);
  }
  .bg-gold-line {
    background-image: linear-gradient(
      90deg,
      transparent,
      var(--gold-500),
      transparent
    );
  }
  .glow-gold {
    box-shadow: 0 0 0 1px var(--gold-700),
      0 12px 40px -12px rgba(201, 162, 39, 0.45);
  }
  .glow-gold-sm {
    box-shadow: 0 0 0 1px var(--gold-700),
      0 4px 16px -6px rgba(201, 162, 39, 0.35);
  }
  .ring-gold {
    --tw-ring-color: var(--gold-500);
  }
  .gold-shimmer {
    background-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(201, 162, 39, 0.25) 50%,
      transparent 100%
    );
    background-size: 200% 100%;
    animation: gold-shimmer 3.5s linear infinite;
  }
}

@keyframes gold-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@layer utilities {
  .pic-mermaid-compact {
    width: 100%;
  }

  .pic-mermaid-compact > div[aria-label="mermaid"] {
    width: 100%;
    min-width: 0;
  }

  .pic-mermaid-compact svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
  }
}