/* ============================================================
   效立方 v3 · Design Tokens
   设计哲学：克制、留白、内容为王、操作藏在意图里
============================================================ */

:root {
  /* 背景：更冷、更深的暗调（让作品图本身成为视觉中心） */
  --bg: #0e0e10;
  --bg-1: #161618;
  --bg-2: #1d1d20;
  --bg-3: #28282d;
  --bg-4: #36363c;
  --bg-paper: #faf9f7;  /* 偶尔需要的浅底（写真模式预览等） */

  /* 边线：极克制 */
  --line: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-3: rgba(255, 255, 255, 0.24);

  /* 文字 */
  --text: #fafafa;
  --text-2: rgba(255, 255, 255, 0.64);
  --text-3: rgba(255, 255, 255, 0.36);
  --text-4: rgba(255, 255, 255, 0.18);

  /* 强调色：单色克制（不滥用） */
  --brand: #4d92ff;             /* 冷蓝（logo + 主操作） */
  --brand-hover: #6fa6ff;
  --brand-soft: rgba(77, 146, 255, 0.16);
  --brand-glow: rgba(77, 146, 255, 0.28);

  /* 偶尔点缀色（不主用） */
  --warm: #ff8060;              /* 强调点（New 标签、爆款标） */
  --ok: #3ecf8e;
  --err: #ff5959;
  --warn: #f5a623;

  /* 尺寸：8 倍数 */
  --s-0: 4px;
  --s-1: 8px;
  --s-2: 12px;
  --s-3: 16px;
  --s-4: 20px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 40px;
  --s-8: 48px;
  --s-10: 64px;
  --s-12: 80px;
  --s-16: 120px;

  /* 圆角：保守，偏方正高级 */
  --r-0: 4px;
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --r-5: 28px;
  --r-full: 999px;

  /* 字号 */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;
  --fs-3xl: 42px;
  --fs-display: 56px;

  /* 行高 */
  --lh-tight: 1.2;
  --lh: 1.5;
  --lh-loose: 1.7;

  /* 字重 */
  --fw-r: 400;
  --fw-m: 500;
  --fw-sb: 600;
  --fw-b: 700;

  /* 字距（中文紧凑、英文宽松） */
  --tracking-tight: -0.015em;
  --tracking: -0.005em;
  --tracking-loose: 0.02em;
  --tracking-wide: 0.18em;        /* logo */

  /* 阴影 */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 18px rgba(0,0,0,0.4);
  --shadow-3: 0 12px 48px rgba(0,0,0,0.5);
  --shadow-card: 0 8px 32px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.25);
  --shadow-pop: 0 16px 60px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.3);
  --ring-focus: 0 0 0 2px var(--brand-glow);

  /* 动效 */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-instant: 80ms;
  --d-fast: 150ms;
  --d-normal: 240ms;
  --d-slow: 400ms;
  --d-cinematic: 700ms;

  /* Z-index */
  --z-bg: -1;
  --z-base: 0;
  --z-canvas: 1;
  --z-overlay: 50;
  --z-bar: 100;
  --z-modal: 200;
  --z-toast: 300;
  --z-tooltip: 400;
}

/* ===== Reset ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family:
    -apple-system, BlinkMacSystemFont,
    "SF Pro Text", "SF Pro Display",
    "PingFang SC", "Helvetica Neue", "Inter",
    sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh);
  letter-spacing: var(--tracking-tight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

button, input, textarea, select {
  font: inherit; color: inherit; letter-spacing: inherit;
}
button { cursor: pointer; border: none; background: transparent; }
input, textarea { outline: none; border: none; background: transparent; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--r-1);
}

/* 滚动条：超克制 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--bg-3);
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--bg-4); }

/* 选中文字 */
::selection {
  background: var(--brand-soft);
  color: var(--text);
}

/* ===== 通用动画 ===== */
@keyframes fade-up {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
@keyframes float-soft {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -8px, 0); }
}