/* ============================================================
   图廊 TTGallery · 设计令牌（单一真相：本文件）
   参考真实站点：Unsplash/Pexels 的中性界面（图片优先、界面退后）
   + Wallhaven 的侧栏密度 + Giphy/LINE 的贴纸圆角处理
   其余样式文件只消费这里的变量，禁止裸色值/裸字号
   ============================================================ */

:root {
  /* —— 字体：全站一套系统无衬线，数字等宽 —— */
  --font-sans: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* —— 字号 —— */
  --fs-2xs: 0.6875rem; /* 11 */
  --fs-xs: 0.75rem;    /* 12 */
  --fs-sm: 0.8125rem;  /* 13 */
  --fs-md: 0.875rem;   /* 14 */
  --fs-lg: 1rem;       /* 16 */
  --fs-xl: 1.25rem;    /* 20 */

  /* —— 间距（4 的倍数） —— */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 28px;
  --sp-7: 40px;

  /* —— 圆角 —— */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* —— 阴影：只在浮层用，网格不用投影 —— */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.18);

  /* —— 动效 —— */
  --t-fast: 120ms;
  --t-med: 200ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* —— 层级 —— */
  --z-topbar: 20;
  --z-lightbox: 100;

  /* —— 布局 —— */
  --content-max: 1720px;
  --rail-w: 200px;
  --shell-gap: 28px;
  --pad-x: 24px;
  --topbar-h: 52px;
  --col-min: 216px;   /* 舒展 */
  --col-tight: 150px; /* 紧凑 */
  --gap: 10px;

  /* —— 悬停遮罩：压在图片上，跨主题共用 —— */
  --veil-from: rgba(0, 0, 0, 0);
  --veil-to: rgba(0, 0, 0, 0.78);
  --veil-ink: #fff;
  --media-btn: rgba(0, 0, 0, 0.45);       /* 压在图片上的圆形按钮 */
  --media-btn-hover: rgba(0, 0, 0, 0.7);
  --media-btn-line: rgba(255, 255, 255, 0.16);
  --badge-bg: rgba(0, 0, 0, 0.62);        /* 头像格上的计数角标 */
}

/* —— 浅色（默认）：贴纸多为白底，浅色页面才不把图片装进相框 —— */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f4f5;
  --bg-elev: #ffffff;
  --surface: #ececee;
  --surface-2: #e2e2e5;
  --plate: #ffffff;
  --text: #18181b;
  --text-mid: #52525b;
  --text-dim: #78787f;
  --line: #e4e4e7;
  --line-2: #d4d4d8;
  --ink: #18181b;          /* 强调即墨色：不加第二种彩色 */
  --ink-ink: #ffffff;      /* 墨底上的字 */
  --ink-soft: rgba(24, 24, 27, 0.06);
  --error: #dc2626;
  --scrim: rgba(9, 9, 11, 0.76);
}

/* —— 深色 —— */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0b0c;
  --bg-elev: #131316;
  --surface: #1b1b1f;
  --surface-2: #26262b;
  --plate: #1b1b1f;
  --text: #fafafa;
  --text-mid: #a1a1aa;
  --text-dim: #7c7c85;
  --line: #26262b;
  --line-2: #35353b;
  --ink: #fafafa;
  --ink-ink: #131316;
  --ink-soft: rgba(250, 250, 250, 0.08);
  --error: #f87171;
  --scrim: rgba(0, 0, 0, 0.82);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.55);
}

/* —— 壁纸是横图，列宽给大一点，免得 16:9 被压成细条 —— */
[data-tab="wallpaper"] {
  --col-min: 320px;
  --col-tight: 220px;
}