/* ============================================
   云查 · 信息核查平台 — 品牌设计系统
   风格: 数据科技青 (Data Tech Teal)
   ============================================ */

/* ---- Light Mode (Default) ---- */
:root {
  --vfy-primary-50: #F0FDFA;
  --vfy-primary-100: #CCFBF1;
  --vfy-primary-200: #99F6E4;
  --vfy-primary-300: #5EEAD4;
  --vfy-primary-400: #2DD4BF;
  --vfy-primary-500: #14B8A6;
  --vfy-primary-600: #0D9488;
  --vfy-primary-700: #0F766E;
  --vfy-primary-800: #115E59;
  --vfy-primary-900: #134E4A;

  --vfy-neutral-50: #F8FAFC;
  --vfy-neutral-100: #F1F5F9;
  --vfy-neutral-200: #E2E8F0;
  --vfy-neutral-300: #CBD5E1;
  --vfy-neutral-400: #94A3B8;
  --vfy-neutral-500: #64748B;
  --vfy-neutral-600: #475569;
  --vfy-neutral-700: #334155;
  --vfy-neutral-800: #1E293B;
  --vfy-neutral-900: #0F172A;

  --vfy-background: var(--vfy-neutral-50);
  --vfy-foreground: var(--vfy-neutral-900);
  --vfy-card: #FFFFFF;
  --vfy-card-foreground: var(--vfy-neutral-900);
  --vfy-popover: #FFFFFF;
  --vfy-popover-foreground: var(--vfy-neutral-900);
  --vfy-primary: var(--vfy-primary-600);
  --vfy-primary-foreground: #FFFFFF;
  --vfy-muted: var(--vfy-neutral-100);
  --vfy-muted-foreground: var(--vfy-neutral-500);
  --vfy-border: var(--vfy-neutral-200);
  --vfy-input: var(--vfy-neutral-200);
  --vfy-ring: var(--vfy-primary-600);

  --state-success: #10B981;
  --state-warning: #F59E0B;
  --state-error: #EF4444;
  --state-info: #3B82F6;

  --vfy-radius-small: 4px;
  --vfy-radius-medium: 8px;
  --vfy-radius-large: 16px;
  --vfy-radius-full: 9999px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --shadow-1: 0 1px 2px rgba(15,23,42,0.05), 0 1px 1px rgba(15,23,42,0.03);
  --shadow-2: 0 8px 24px -8px rgba(15,23,42,0.18);
  --shadow-3: 0 24px 60px -20px rgba(15,23,42,0.30);

  --vfy-font-sans: "Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --vfy-font-mono: "JetBrains Mono","Fira Code","Cascadia Code",monospace;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 80px;
}

.dark {
  --vfy-background: var(--vfy-neutral-900);
  --vfy-foreground: var(--vfy-neutral-100);
  --vfy-card: var(--vfy-neutral-800);
  --vfy-card-foreground: var(--vfy-neutral-100);
  --vfy-popover: var(--vfy-neutral-800);
  --vfy-popover-foreground: var(--vfy-neutral-100);
  --vfy-primary: var(--vfy-primary-500);
  --vfy-primary-foreground: var(--vfy-neutral-900);
  --vfy-muted: var(--vfy-neutral-700);
  --vfy-muted-foreground: var(--vfy-neutral-400);
  --vfy-border: var(--vfy-neutral-700);
  --vfy-input: var(--vfy-neutral-700);
  --vfy-ring: var(--vfy-primary-500);
}

body {
  font-family: var(--vfy-font-sans);
  background-color: var(--vfy-background);
  color: var(--vfy-foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

.vfy-display { font-size: clamp(40px,6vw,88px); line-height:1.02; font-weight:600; letter-spacing:-0.03em; text-wrap:balance; }
.vfy-h1 { font-size: clamp(28px,3.5vw,48px); line-height:1.18; font-weight:600; letter-spacing:-0.02em; text-wrap:balance; }
.vfy-h2 { font-size: clamp(22px,2.4vw,32px); line-height:1.2; font-weight:600; letter-spacing:-0.015em; text-wrap:balance; }
.vfy-h3 { font-size:20px; line-height:1.3; font-weight:600; letter-spacing:-0.01em; }
.vfy-body-lg { font-size:18px; line-height:1.55; font-weight:400; }
.vfy-body { font-size:15px; line-height:1.6; font-weight:400; }
.vfy-caption { font-size:13px; line-height:1.5; font-weight:400; letter-spacing:0.005em; }
.vfy-mono { font-family:var(--vfy-font-mono); font-size:13px; line-height:1.5; font-weight:500; }

.vfy-card { background-color:var(--vfy-card); color:var(--vfy-card-foreground); border:1px solid var(--vfy-border); border-radius:var(--vfy-radius-medium); }
.vfy-btn-primary { background-color:var(--vfy-primary); color:var(--vfy-primary-foreground); border-radius:var(--vfy-radius-medium); font-weight:600; transition:background-color 150ms cubic-bezier(.2,.8,.2,1); }
.vfy-btn-primary:hover { background-color:var(--vfy-primary-700); }
.vfy-btn-secondary { background-color:transparent; color:var(--vfy-foreground); border:1px solid var(--vfy-border); border-radius:var(--vfy-radius-medium); font-weight:500; transition:background-color 150ms cubic-bezier(.2,.8,.2,1); }
.vfy-btn-secondary:hover { background-color:var(--vfy-muted); }
.vfy-input { background-color:var(--vfy-card); color:var(--vfy-foreground); border:1px solid var(--vfy-input); border-radius:var(--vfy-radius-medium); transition:border-color 150ms cubic-bezier(.2,.8,.2,1); }
.vfy-input:focus { outline:none; border-color:var(--vfy-ring); box-shadow:0 0 0 2px rgba(13,148,136,0.2); }
.vfy-tag { display:inline-flex; align-items:center; height:24px; padding:2px 8px; border-radius:var(--vfy-radius-full); font-size:12px; font-weight:500; background:var(--vfy-muted); color:var(--vfy-muted-foreground); }
.vfy-tag-primary { background:var(--vfy-primary-50); color:var(--vfy-primary-700); }
.dark .vfy-tag-primary { background:rgba(20,184,166,0.15); color:var(--vfy-primary-300); }

@media (prefers-reduced-motion: reduce) { * { transition-duration:0.01ms !important; animation-duration:0.01ms !important; } }
