/* ==========================================================================
   彩研所 · base.css
   变量 / 主题（深浅 + 跟随系统）/ 重置 / 排版
   全部颜色通过 CSS 变量定义，切换主题只需切换 data-theme
   ========================================================================== */

/* ---------- 浅色（默认） ---------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg:            #f3eee4;
  --bg-grad:       radial-gradient(1100px 520px at 100% -8%, rgba(158, 26, 26, 0.08) 0%, rgba(255,255,255,0) 58%),
                   radial-gradient(820px 460px at -8% 0%, rgba(176, 137, 58, 0.10) 0%, rgba(255,255,255,0) 52%);
  --bg-elev:       #fbf8f1;
  --bg-elev-2:     #f6f1e7;
  --bg-sunken:     #ebe4d6;
  --bg-hover:      #efe8da;

  --text:          #1a1612;
  --text-dim:      #5c5348;
  --text-mute:     #8a8174;

  --border:        #e4d9c6;
  --border-strong: #d2c4ad;

  --accent:        #9e1a1a;
  --accent-soft:   rgba(158, 26, 26, 0.10);
  --accent-2:      #b0893a;
  --accent-2-soft: rgba(176, 137, 58, 0.14);

  --ok:            #2c7a4f;
  --ok-soft:       rgba(44, 122, 79, 0.12);
  --warn:          #b07812;
  --warn-soft:     rgba(176, 120, 18, 0.14);
  --danger:        #9e1a1a;
  --danger-soft:   rgba(158, 26, 26, 0.12);
  --info:          #3d5c7a;
  --info-soft:     rgba(61, 92, 122, 0.12);

  --ball-red:      #c42b32;
  --ball-blue:     #2b5f9e;
  --ball-gold:     #b0893a;

  --shadow-1: 0 1px 0 rgba(26, 22, 18, 0.04);
  --shadow-2: 0 8px 24px rgba(26, 22, 18, 0.06);
  --shadow-3: 0 18px 40px rgba(26, 22, 18, 0.10);

  --chart-1: #9e1a1a;
  --chart-2: #2b5f9e;
  --chart-3: #2c7a4f;
  --chart-4: #b0893a;
  --chart-5: #6b4c8a;
  --chart-6: #3d7a78;
  --chart-7: #c46a2b;
  --chart-8: #8a3d5c;
  --chart-grid: #e8dfd0;
  --chart-axis: #a89882;
  --chart-label: #5c5348;
  --chart-bg: #fbf8f1;
}

/* ---------- 深色 ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #12100d;
  --bg-grad:       radial-gradient(1100px 520px at 100% -8%, rgba(224, 86, 76, 0.14) 0%, rgba(0,0,0,0) 58%),
                   radial-gradient(820px 460px at -8% 0%, rgba(212, 176, 106, 0.10) 0%, rgba(0,0,0,0) 52%);
  --bg-elev:       #1c1914;
  --bg-elev-2:     #221e18;
  --bg-sunken:     #0e0c0a;
  --bg-hover:      #2a251e;

  --text:          #ece6da;
  --text-dim:      #b3aa9b;
  --text-mute:     #7d7466;

  --border:        #2c271f;
  --border-strong: #3d362b;

  --accent:        #e0564c;
  --accent-soft:   rgba(224, 86, 76, 0.16);
  --accent-2:      #d4b06a;
  --accent-2-soft: rgba(212, 176, 106, 0.16);

  --ok:            #5dba86;
  --ok-soft:       rgba(93, 186, 134, 0.16);
  --warn:          #d4a24a;
  --warn-soft:     rgba(212, 162, 74, 0.16);
  --danger:        #e0564c;
  --danger-soft:   rgba(224, 86, 76, 0.16);
  --info:          #7ea0be;
  --info-soft:     rgba(126, 160, 190, 0.16);

  --ball-red:      #e0564c;
  --ball-blue:     #5a86c4;
  --ball-gold:     #d4b06a;

  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.35);
  --shadow-2: 0 10px 28px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 20px 44px rgba(0, 0, 0, 0.55);

  --chart-1: #e0564c;
  --chart-2: #5a86c4;
  --chart-3: #5dba86;
  --chart-4: #d4b06a;
  --chart-5: #b39ad4;
  --chart-6: #5db8b4;
  --chart-7: #e08a4a;
  --chart-8: #d47a9a;
  --chart-grid: #2c271f;
  --chart-axis: #7d7466;
  --chart-label: #b3aa9b;
  --chart-bg: #1c1914;
}

/* ---------- 跟随系统：data-theme="auto" ---------- */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --bg:            #12100d;
    --bg-grad:       radial-gradient(1100px 520px at 100% -8%, rgba(224, 86, 76, 0.14) 0%, rgba(0,0,0,0) 58%),
                     radial-gradient(820px 460px at -8% 0%, rgba(212, 176, 106, 0.10) 0%, rgba(0,0,0,0) 52%);
    --bg-elev:       #1c1914;
    --bg-elev-2:     #221e18;
    --bg-sunken:     #0e0c0a;
    --bg-hover:      #2a251e;
    --text:          #ece6da;
    --text-dim:      #b3aa9b;
    --text-mute:     #7d7466;
    --border:        #2c271f;
    --border-strong: #3d362b;
    --accent:        #e0564c;
    --accent-soft:   rgba(224, 86, 76, 0.16);
    --accent-2:      #d4b06a;
    --accent-2-soft: rgba(212, 176, 106, 0.16);
    --ok:            #5dba86;
    --ok-soft:       rgba(93, 186, 134, 0.16);
    --warn:          #d4a24a;
    --warn-soft:     rgba(212, 162, 74, 0.16);
    --danger:        #e0564c;
    --danger-soft:   rgba(224, 86, 76, 0.16);
    --info:          #7ea0be;
    --info-soft:     rgba(126, 160, 190, 0.16);
    --ball-red:      #e0564c;
    --ball-blue:     #5a86c4;
    --ball-gold:     #d4b06a;
    --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.35);
    --shadow-2: 0 10px 28px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 20px 44px rgba(0, 0, 0, 0.55);
    --chart-1: #e0564c;
    --chart-2: #5a86c4;
    --chart-3: #5dba86;
    --chart-4: #d4b06a;
    --chart-5: #b39ad4;
    --chart-6: #5db8b4;
    --chart-7: #e08a4a;
    --chart-8: #d47a9a;
    --chart-grid: #2c271f;
    --chart-axis: #7d7466;
    --chart-label: #b3aa9b;
    --chart-bg: #1c1914;
  }
}

/* ---------- 排版 ---------- */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", "Courier New", monospace;
  --font-serif: "Songti SC", "SimSun", "Noto Serif SC", Georgia, serif;

  --radius-s: 4px;
  --radius-m: 6px;
  --radius-l: 10px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --header-h: 156px;
  --maxw: 1440px;
}

/* ---------- 重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* hidden 属性必须始终生效：组件样式（如 .loading-mask 的 display:grid）
   会覆盖 UA 样式表里的 [hidden]{display:none}，导致遮罩常显（本 Bug 的根因） */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    linear-gradient(180deg, rgba(158, 26, 26, 0.035), transparent 140px),
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(26, 22, 18, 0.018) 3px, rgba(26, 22, 18, 0.018) 4px),
    var(--bg-grad);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-2); font-weight: 600; line-height: 1.3; }
h1 { font-size: 1.55rem; font-family: var(--font-serif); font-weight: 700; letter-spacing: 0.04em; }
h2 { font-size: 1.2rem; font-family: var(--font-serif); }
h3 { font-size: 1.05rem; }
h4 { font-size: 0.95rem; }
p  { margin: 0 0 var(--space-3); }

a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

ul, ol { margin: 0; padding-left: 1.2em; }

code, kbd, samp, .mono { font-family: var(--font-mono); font-size: 0.9em; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

::selection { background: var(--accent-soft); }

/* 滚动条（WebKit） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-pill);
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-mute); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-m);
}
.skip-link:focus { left: var(--space-3); top: var(--space-3); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 打印 */
@media print {
  .app-header, .app-footer, .theme-toggle { display: none !important; }
  body { background: #fff; color: #000; }
}