/*
 * theme.css — 佩奇乔治 · 全局 CSS 变量系统
 * 生成: 2026-04-22  by Sonnet A (前端 UI)
 * 覆盖: index.html + admin.html 的内联硬编码色
 */

/* ========== 平台主题色 (14 个平台) ========== */
:root {
  --color-naver:         #03C75A;
  --color-naver-dark:    #02a34a;
  --color-naver-dim:     #018a3e;

  --color-coupang:       #E4002B;
  --color-coupang-dark:  #c9001f;
  --color-coupang-dim:   #a80019;

  --color-jumia:         #F68B1E;
  --color-jumia-dark:    #d9751a;
  --color-jumia-dim:     #b86014;

  --color-aliexpress:    #FF6900;
  --color-aliexpress-dark: #E62E04;
  --color-aliexpress-dim:  #b32500;

  --color-gmauction:     #2F9A42;
  --color-gmauction-dark:#247A33;
  --color-gmauction-dim: #1a5a26;

  --color-elevenst:      #F43142;
  --color-elevenst-dark: #C7152E;
  --color-elevenst-dim:  #9a0e22;

  --color-kakao:         #FEE500;
  --color-kakao-mid:     #F9B200;
  --color-kakao-dark:    #CF8700;
  --color-kakao-text:    #3C1E1E;

  --color-temu:          #FB7701;
  --color-temu-dark:     #E4570E;
  --color-temu-dim:      #b8420a;

  --color-amazonjp-orange: #FF9900;
  --color-amazon-navy:     #232F3E;
  --color-amazon-navy-dark:#131A22;

  --color-amazonus-navy:   #232F3E;

  --color-amazonca-red:    #D52B1E;

  --color-amazonuk-blue:   #012169;
  --color-amazonuk-red:    #C8102E;

  --color-amazonde-gold:   #D4AF37;
  --color-amazonde-dark:   #1C1C1C;

  --color-amazonfr-blue:   #0055A4;
  --color-amazonfr-red:    #EF4135;

  --color-amazonit-green:  #009246;
  --color-amazonit-red:    #CE2B37;

  /* ========== 系统色 (亮色模式默认) ========== */
  --bg-primary:    #f8f9fc;
  --bg-card:       #ffffff;
  --text-primary:  #1a1a2e;
  --text-muted:    #6b7280;
  --text-subtle:   #9ca3af;
  --border:        rgba(0,0,0,0.08);
  --border-solid:  #e5e7eb;
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.04);
  --shadow-md:     0 8px 32px rgba(0,0,0,0.1);
  --shadow-lg:     0 20px 60px rgba(0,0,0,0.15);

  /* ========== 骨架屏 ========== */
  --skeleton-base: #f0f0f0;
  --skeleton-shine:#e0e0e0;

  /* ========== 焦点环 (a11y) ========== */
  --focus-ring: 0 0 0 3px rgba(3,199,90,0.45);
}

/* ========== 暗色模式 (body.dark) ========== */
body.dark {
  --bg-primary:   #0f172a;
  --bg-card:      #1e293b;
  --text-primary: #f1f5f9;
  --text-muted:   #94a3b8;
  --text-subtle:  #64748b;
  --border:       rgba(255,255,255,0.1);
  --border-solid: rgba(255,255,255,0.12);
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:    0 8px 32px rgba(0,0,0,0.4);
  --skeleton-base: #1e293b;
  --skeleton-shine:#2d3f55;
}

/* ========== 骨架屏动画 ========== */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.loading-skeleton {
  background: linear-gradient(
    90deg,
    var(--skeleton-base) 25%,
    var(--skeleton-shine) 50%,
    var(--skeleton-base) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  height: 24px;
  border-radius: 4px;
  margin: 6px 0;
}

/* ========== 焦点可见性 (a11y) ========== */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-naver);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}