@import 'tailwindcss';

@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-surface-2: var(--surface-2);
  --color-surface-3: var(--surface-3);
  --color-line: var(--border);
  --color-line-strong: var(--border-strong);
  --color-ink-1: var(--text-1);
  --color-ink-2: var(--text-2);
  --color-ink-3: var(--text-3);
  --color-brand: var(--brand);
  --color-brand-hover: var(--brand-hover);
  --color-brand-subtle: var(--brand-subtle);
  --color-brand-text: var(--brand-text);
  --color-success: var(--success);
  --color-success-subtle: var(--success-subtle);
  --color-warning: var(--warning);
  --color-warning-subtle: var(--warning-subtle);
  --color-danger: var(--danger);
  --color-danger-subtle: var(--danger-subtle);

  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-card: 0 1px 2px rgba(0,0,0,.03), 0 2px 8px rgba(0,0,0,.04);
  --shadow-pop: 0 4px 12px rgba(0,0,0,.08), 0 16px 48px rgba(0,0,0,.12);
  --shadow-brand: 0 2px 8px rgba(48,86,211,.28);
}

/* ── 亮色 ── */
:root {
  --bg: #f3f4f6;
  --surface: #ffffff;
  --surface-2: #f8f9fa;
  --surface-3: #eceef1;
  --border: #e3e6ea;
  --border-strong: #c8cdd6;
  --text-1: #111318;
  --text-2: #3d434f;
  --text-3: #747c8a;
  --brand: #3346d3;
  --brand-hover: #2a3ab8;
  --brand-subtle: #eef1ff;
  --brand-text: #2a3ab8;
  --success: #177245;
  --success-subtle: #ebfaf1;
  --warning: #a86509;
  --warning-subtle: #fef8eb;
  --danger: #d5304f;
  --danger-subtle: #fef0f2;
  color-scheme: light;
}

/* ── 暗色 ── */
.dark {
  --bg: #0c0d10;
  --surface: #141519;
  --surface-2: #1a1c22;
  --surface-3: #23262e;
  --border: #262932;
  --border-strong: #363b47;
  --text-1: #e9ebf0;
  --text-2: #a0a8b8;
  --text-3: #68707e;
  --brand: #6d8bfa;
  --brand-hover: #8aa2fb;
  --brand-subtle: #1a2144;
  --brand-text: #96adfa;
  --success: #34d399;
  --success-subtle: #0d2921;
  --warning: #fbbf24;
  --warning-subtle: #2b2109;
  --danger: #f87171;
  --danger-subtle: #2d1317;
  color-scheme: dark;
}

html, body, #root { height: 100%; }

/* 移动端适配：禁止横向溢出 / 去点按高亮 / 双击不缩放 / 刘海安全区 */
html, body { overflow-x: clip; }
body {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
@media (pointer: coarse) {
  button, [role='button'], a { min-height: 36px; }
  /* iOS Safari：输入框字号 <16px 时聚焦会强制放大视口 —— 触屏设备统一 16px 预防 */
  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']),
  select,
  textarea {
    font-size: 16px !important;
  }
}

body {
  background: var(--bg);
  color: var(--text-1);
  font-family: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI Variable Text', 'Segoe UI', 'Microsoft YaHei UI', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

h1, h2, h3 { letter-spacing: -0.022em; text-wrap: balance; }

/* 小屏：分区标题与卡片间距收紧 */
@media (max-width: 640px) {
  .hover-lift:hover { transform: none; }
}

.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; }

::selection { background: color-mix(in srgb, var(--brand) 18%, transparent); }

* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-3) 30%, transparent) transparent; }
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-3) 25%, transparent); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-3) 45%, transparent); }
*::-webkit-scrollbar-track { background: transparent; }

:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand) 50%, transparent);
  outline-offset: 2px;
  border-radius: inherit;
}

/* 微动效 */
.animate-in { animation: fp-in .22s cubic-bezier(.16,1,.3,1); }
@keyframes fp-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }

.animate-fade { animation: fp-fade .3s ease-out; }
@keyframes fp-fade { from { opacity: 0; } to { opacity: 1; } }

/* 数字输入去噪 */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type='number'] { -moz-appearance: textfield; appearance: textfield; }

/* 卡片悬停微抬 */
.hover-lift { transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease; }
.hover-lift:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04); }

/* 侧边栏激活指示条 */
.nav-active::before {
  content: '';
  position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--brand);
}

/* ---------- 简历打印 / 导出 ---------- */
@page { size: A4; margin: 10mm; }
@media print {
  .no-print { display: none !important; }
  html, body, #root { height: auto !important; background: #fff !important; }
  body { padding: 0 !important; }
  .app-scroll, .print-scroll { overflow: visible !important; height: auto !important; max-height: none !important; }
  .print-sheet { border: none !important; box-shadow: none !important; margin: 0 !important; max-width: none !important; width: 100% !important; padding: 0 !important; border-radius: 0 !important; }
  * { scrollbar-width: none !important; }
  *::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
}

/* ---------- 简历模板 ---------- */
.resume-tpl-tech .r-sec-title { color: var(--accent); border-left: 3px solid var(--accent); padding-left: 8px; }
.resume-tpl-tech .r-item-title { color: var(--accent); }
.resume-tpl-tech .num { color: var(--accent); }
.resume-tpl-minimal .r-sec-title { color: #666; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; border-bottom: 1px solid #e2e2e2; padding-bottom: 4px; }
.resume-tpl-classic .r-sec-title { border-bottom: 2px solid #222; padding-bottom: 4px; }
.resume-tpl-minimal .r-item-title { font-weight: 600; }