/*  ╔══════════════════════════════════════════════════════════════╗
    ║  淘淘衣橱 · 公共设计令牌  V1.0                               ║
    ║  Shared design tokens for all pages.                         ║
    ║  Import AFTER each page's own CSS so tokens act as defaults. ║
    ╚══════════════════════════════════════════════════════════════╝  */

/* ── Web Font Loading ── */
@import url('https://cdn.jsdelivr.net/npm/@fontsource/zcool-xiaowei@5/index.css');

/* ── Typography ── */
:root {
  --font-ui: "PingFang SC", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-brand: "ZCOOL XiaoWei", "站酷小薇LOGO体", "PingFang SC", sans-serif;
}

/* ── Spacing scale (4 / 8 / 12 / 16 / 24 / 32) ── */
:root {
  --space-05: 4px;
  --space-1:  8px;
  --space-15: 12px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --page-inline: 16px;
}

/* ── Border-radius scale ── */
:root {
  --r-xs:     8px;
  --r-sm:     12px;
  --r-md:     16px;   /* small modules              */
  --r-lg:     18px;   /* standard cards              */
  --r-xl:     24px;   /* large cards / image areas   */
  --r-sheet:  27px;   /* bottom-sheet top corners    */
  --r-pill:   999px;  /* pills & capsules            */
  --r-circle: 50%;
}

/* ── Shadow scale ── */
:root {
  --sh-xs:     0 2px 6px rgba(0, 0, 0, .06);
  --sh-sm:     0 5px 12px rgba(100, 60, 40, .07);
  --sh-md:     0 8px 20px rgba(100, 60, 40, .10);
  --sh-lg:     0 14px 35px rgba(100, 60, 40, .12);
  --sh-sheet:  0 -20px 48px rgba(67, 39, 28, .20);
  --sh-btn:    0 9px 18px rgba(248, 65, 20, .23);
  --sh-modal:  0 26px 70px rgba(42, 23, 16, .34);
}

/* ── Navigation ── */
:root {
  --nav-h: 56px;
}

/* ── Motion ── */
:root {
  --ease-out:    cubic-bezier(.22, .9, .32, 1);
  --dur-fast:    .18s;
  --dur-normal:  .25s;
  --dur-sheet:   .35s;
}