/* ============================================================
   theme.css - 主题变量(浅色 / 深色) + 基础重置 + 原生控件基线
   设计语言:
     · 冷调中性底 + 单一柔光强调色
     · 大圆角 + 轻微噪点纹理,拒绝模板化卡片
     · 自绘 SVG 图形代替图标字体
     · 纯色填充,严禁渐变
   ============================================================ */

:root,
:root[data-theme="light"] {
  /* 背景层 */
  --bg-base:        #f3f1ec;
  --bg-surface:     #ffffff;
  --bg-elev:        #faf8f3;
  --bg-sunken:      #ece9e2;
  --bg-overlay:     rgba(28, 30, 36, .55);

  /* 线条 */
  --line-soft:      rgba(28, 30, 36, .08);
  --line-strong:    rgba(28, 30, 36, .22);

  /* 文字 */
  --fg-strong:      #15171c;
  --fg-normal:      #3a3f48;
  --fg-muted:       #7c8089;
  --fg-faint:       #b2b6bd;
  --fg-on-accent:   #ffffff;

  /* 状态色 */
  --state-ok:       #2f8f5a;
  --state-ok-soft:  rgba(47, 143, 90, .14);
  --state-warn:     #c47a1f;
  --state-warn-soft:rgba(196, 122, 31, .14);
  --state-err:      #c14a4a;
  --state-err-soft: rgba(193, 74, 74, .14);
  --state-info:     #3a6fb8;
  --state-info-soft:rgba(58, 111, 184, .14);

  /* 强调色 - 浅色:暖琥珀 */
  --accent:         #d96f3a;
  --accent-soft:    #f0d8c5;
  --accent-deep:    #b35424;
  --accent-ink:     #ffffff;
  --accent-ring:    rgba(217, 111, 58, .22);

  /* 阴影 */
  --shadow-1:       0 1px 0 rgba(28, 30, 36, .04), 0 8px 24px rgba(28, 30, 36, .06);
  --shadow-2:       0 1px 0 rgba(28, 30, 36, .05), 0 20px 48px rgba(28, 30, 36, .12);
  --shadow-inset:   inset 0 1px 0 rgba(255, 255, 255, .6);

  /* 纹理 */
  --grain:          url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

  /* 形变 */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* 动效 */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: .15s;
  --t-mid:  .25s;
}

:root[data-theme="dark"] {
  --bg-base:        #0c0e14;
  --bg-surface:     #141823;
  --bg-elev:        #1b2030;
  --bg-sunken:      #0a0c12;
  --bg-overlay:     rgba(0, 0, 0, .65);

  --line-soft:      rgba(255, 255, 255, .06);
  --line-strong:    rgba(255, 255, 255, .16);

  --fg-strong:      #f4f4f1;
  --fg-normal:      #d4d6dd;
  --fg-muted:       #8b8f99;
  --fg-faint:       #4f535c;
  --fg-on-accent:   #0c0e14;

  --state-ok:       #5fbf86;
  --state-ok-soft:  rgba(95, 191, 134, .16);
  --state-warn:     #e3a35b;
  --state-warn-soft:rgba(227, 163, 91, .16);
  --state-err:      #e87979;
  --state-err-soft: rgba(232, 121, 121, .16);
  --state-info:     #7aa6e8;
  --state-info-soft:rgba(122, 166, 232, .16);

  /* 强调色 - 深色:雾紫青 */
  --accent:         #8a7dff;
  --accent-soft:    #2a2a55;
  --accent-deep:    #b1a6ff;
  --accent-ink:     #0c0e14;
  --accent-ring:    rgba(138, 125, 255, .28);

  --shadow-1:       0 1px 0 rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .45);
  --shadow-2:       0 1px 0 rgba(0, 0, 0, .5), 0 22px 60px rgba(0, 0, 0, .6);
  --shadow-inset:   inset 0 1px 0 rgba(255, 255, 255, .04);

  --grain:          url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ============================================================
   重置
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: light dark; }

body {
  font-family: "Inter", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "ss01", "cv11";
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-normal);
  background: var(--bg-base);
  background-image: var(--grain);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--fg-on-accent); }
img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; color: var(--fg-strong); letter-spacing: -.01em; }
p { margin: 0; }
code, pre, kbd, samp { font-family: "JetBrains Mono", "SFMono-Regular", "Menlo", "Consolas", monospace; }

/* 自定义滚动条 - 极简 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--fg-muted); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   原生表单基线 - 全部组件必须配套完整样式
   ============================================================ */
input, textarea, select, button {
  font: inherit;
  color: inherit;
}

input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
textarea,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  background: var(--bg-elev);
  color: var(--fg-strong);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.4;
  transition:
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}

textarea { resize: vertical; min-height: 96px; line-height: 1.55; }

input::placeholder,
textarea::placeholder { color: var(--fg-faint); }

input:hover:not(:disabled):not(:focus),
textarea:hover:not(:disabled):not(:focus),
select:hover:not(:disabled):not(:focus) {
  border-color: var(--line-strong);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  background: var(--bg-surface);
}

input:disabled,
textarea:disabled,
select:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* number 控件去掉 spinner(可选通过 .no-spin 恢复) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
input.no-spin::-webkit-inner-spin-button,
input.no-spin::-webkit-outer-spin-button { -webkit-appearance: auto; }

/* select 下拉箭头 —— 由包装层 .select-field 的 ::after 绘制 */
.select-field {
  position: relative;
  display: block;
  width: 100%;
}
.select-field > select {
  padding-right: 40px !important;
  width: 100%;
}
.select-field::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--fg-muted);
  border-bottom: 1.5px solid var(--fg-muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  z-index: 1;
}
:root[data-theme="dark"] .select-field::after {
  border-right-color: var(--fg-faint);
  border-bottom-color: var(--fg-faint);
}

select option { background: var(--bg-surface); color: var(--fg-strong); }

/* checkbox / radio - 自绘 */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  flex: none;
  border: 1px solid var(--line-strong);
  background: var(--bg-elev);
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
input[type="radio"] { border-radius: 50%; }

input[type="checkbox"]:hover,
input[type="radio"]:hover { border-color: var(--accent); }

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1.5px;
  width: 5px; height: 9px;
  border: solid var(--fg-on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--fg-on-accent);
  transform: translate(-50%, -50%);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* file 输入 - 让它看起来像个按钮 */
input[type="file"] {
  -webkit-appearance: none;
  appearance: none;
  border: 1px dashed var(--line-strong);
  background: var(--bg-elev);
  border-radius: 12px;
  padding: 18px;
  font-size: 13px;
  color: var(--fg-muted);
  cursor: pointer;
}
input[type="file"]::-webkit-file-upload-button {
  -webkit-appearance: none;
  appearance: none;
  margin-right: 12px;
  padding: 6px 12px;
  background: var(--accent);
  color: var(--fg-on-accent);
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
}

/* range 滑块 */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
  padding: 0;
  border: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--line-strong);
  border-radius: 99px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: -6px;
  border: 2px solid var(--bg-surface);
  box-shadow: 0 0 0 1px var(--accent);
  cursor: pointer;
}
input[type="range"]:focus { box-shadow: none; background: transparent; }

/* 校验态 */
.is-invalid,
.is-invalid:hover,
.is-invalid:focus {
  border-color: var(--state-err) !important;
  box-shadow: 0 0 0 3px var(--state-err-soft) !important;
}

/* 等宽点缀 */
.mono { font-family: "JetBrains Mono", "SFMono-Regular", "Menlo", "Consolas", monospace; letter-spacing: .02em; }