/* 咸鱼电竞设计系统 · 01 Tokens
   层级：primitive（是什么颜色）→ semantic（用在哪）→ component（哪个组件）。
   页面与组件只引用 semantic / component。历史变量名（--xy-* / --s6-* / --p2-* …）
   在本文件末尾统一映射到新 token，未改造的旧页面自动获得新色板。
   级联顺序见 index.html 顶部：@layer legacy, xy.tokens, xy.base, xy.shell, xy.components, xy.pages, xy.responsive; */

@font-face { font-family: "XY Serif"; src: url("./fonts/serif-sc-700.woff2?v=20261107-b100") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "XY Italic"; src: url("./fonts/playfair-italic.woff2?v=20261012-v7d") format("woff2"); font-style: italic; font-weight: 400 900; font-display: swap; }

/* 余额数字：只给客户会员卡（Barlow Condensed，只裁了数字和符号） */
@font-face { font-family: "XY Member Num"; src: url("./fonts/member-num-600.woff2?v=20261107-b100") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "XY Member Num"; src: url("./fonts/member-num-500.woff2?v=20261107-b100") format("woff2"); font-weight: 500; font-display: swap; }
/* 客服名字：圆体。名字后台能改，所以分两片：固定文字的小片（各约 13KB）先用，名字里出现别的汉字才下载大片（各约 590KB） */
@font-face { font-family: "XY Round"; src: url("./fonts/round-900-rest.woff2?v=20261107-b100") format("woff2"); font-weight: 900; font-display: swap; unicode-range: U+4E00-9FFF; }
@font-face { font-family: "XY Round"; src: url("./fonts/round-900-core.woff2?v=20261107-b100") format("woff2"); font-weight: 900; font-display: swap; unicode-range: U+20-7E,U+B7,U+2013,U+4E2D,U+4ECA,U+4EE5,U+4EEC,U+4F11,U+503C,U+5355,U+53EF,U+540E,U+5440,U+552E,U+5728,U+5BA2,U+5C0F,U+5F53,U+5F85,U+606F,U+6211,U+627E,U+63A5,U+65E5,U+670D,U+70B9,U+70E4,U+732B,U+7531,U+7591,U+7CFB,U+7EBF,U+8054,U+8C37,U+8D77,U+90FD,U+95EE,U+9C7C; }
@font-face { font-family: "XY Round"; src: url("./fonts/round-500-rest.woff2?v=20261107-b100") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+4E00-9FFF; }
@font-face { font-family: "XY Round"; src: url("./fonts/round-500-core.woff2?v=20261107-b100") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+20-7E,U+B7,U+2013,U+4E2D,U+4ECA,U+4EE5,U+4EEC,U+4F11,U+503C,U+5355,U+53EF,U+540E,U+5440,U+552E,U+5728,U+5BA2,U+5C0F,U+5F53,U+5F85,U+606F,U+6211,U+627E,U+63A5,U+65E5,U+670D,U+70B9,U+70E4,U+732B,U+7531,U+7591,U+7CFB,U+7EBF,U+8054,U+8C37,U+8D77,U+90FD,U+95EE,U+9C7C; }

@layer xy.tokens {
  :root {
    /* ── primitive：梅墨中性色（带 350° 梅紫色相，替代纯灰黑） ── */
    --ink-950: #0d0a0f; --ink-900: #120e15; --ink-850: #17121a; --ink-800: #1c1620;
    --ink-750: #231c28; --ink-700: #2d2532; --ink-600: #3b3241; --ink-500: #5a4f5f;
    --ink-400: #8b7f8d; --ink-300: #a3979f; --ink-200: #cdc2c8; --ink-100: #ebe3e7;
    --milk: #fbf6f8;

    /* ── primitive：Logo 粉（实测 #FDD8E9 / #F8D2E4 / #E8B9D4） ── */
    --sakura-50: #fdf1f6; --sakura-100: #fbe3ed; --sakura-200: #f8cfe0; --sakura-300: #f4b3cf;
    --sakura-400: #ec95bc; --sakura-500: #dc77a6; --sakura-700: #8c3d63; --sakura-900: #3a1428;

    /* ── primitive：语义色（降饱和） ── */
    --mint-400: #86d4ab; --honey-400: #efc27c; --rose-400: #f28f98; --sky-400: #91b9f0;

    /* ── 字体：全部本地 / 系统自带 ── */
    --font-ui: "Microsoft YaHei UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
    --font-num: Bahnschrift, "DIN Alternate", "Segoe UI", "Microsoft YaHei UI", sans-serif;
    --font-accent: "XY Italic", Georgia, "Times New Roman", serif;
    --font-serif: "XY Serif", "Songti SC", "SimSun", serif;
    --font-round: "XY Round", var(--font-ui);

    /* ── 间距 4 的倍数 / 圆角 / 动效 ── */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
    --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --t-fast: 140ms; --t-base: 220ms; --t-slow: 320ms;

    /* ── semantic ── */
    --bg-canvas: var(--ink-950);
    --bg-sidebar: var(--ink-900);
    --bg-surface: var(--ink-850);
    --bg-raised: var(--ink-800);
    --bg-sunken: #0a080c;
    --bg-hover: var(--ink-750);
    --bg-selected: rgba(244, 179, 207, .10);

    --hairline: rgba(255, 228, 240, .07);
    --hairline-strong: rgba(255, 228, 240, .13);
    --highlight: inset 0 1px 0 rgba(255, 240, 247, .045);

    --text-1: var(--milk); --text-2: var(--ink-200); --text-3: var(--ink-300); --text-4: var(--ink-400);

    --accent: var(--sakura-300);
    --accent-hover: var(--sakura-200);
    --accent-strong: var(--sakura-400);
    --accent-ink: var(--sakura-900);
    --accent-tint: rgba(244, 179, 207, .12);

    --st-ok: var(--mint-400); --st-ok-tint: rgba(134, 212, 171, .13);
    --st-warn: var(--honey-400); --st-warn-tint: rgba(239, 194, 124, .13);
    --st-err: var(--rose-400); --st-err-tint: rgba(242, 143, 152, .13);
    --st-info: var(--sky-400); --st-info-tint: rgba(145, 185, 240, .13);

    --ring: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--sakura-300);
    --shadow-float: 0 24px 64px rgba(4, 2, 6, .55), 0 2px 8px rgba(4, 2, 6, .4);
    --shadow-card: inset 0 1px 0 rgba(255, 240, 247, .045), 0 0 0 1px rgba(255, 228, 240, .05);

    /* ── component ── */
    --control-h: 40px;
    --card-pad: 24px;
    --card-radius: 18px;
    --card-bg: linear-gradient(180deg, rgba(255, 236, 245, .022), transparent 160px), var(--bg-surface);
    --item-radius: 16px;
    --focus-bg: linear-gradient(160deg, #fdf3f7 0%, #f9e2ec 58%, #f5d3e2 100%);
    --focus-ink: var(--sakura-900);
    --focus-ink-2: #7a4a62;
    --role-player: var(--sky-400); --role-staff: var(--rose-400); --role-customer: var(--honey-400); --role-owner: var(--sakura-300);
  }
  @media (max-width: 979px) {
    :root { --card-pad: 14px; --card-radius: 16px; --item-radius: 14px; }  /* 10-27 业主：手机上大方框别太空 */
  }

  /* ── 历史变量名 → 新 token（旧页面无需改造即获得新色板） ── */
  :root {
    --xy-canvas: var(--bg-canvas); --xy-sidebar: var(--bg-sidebar); --xy-surface: var(--bg-surface);
    --xy-raised: var(--bg-raised); --xy-soft: var(--bg-hover);
    --xy-text: var(--text-1); --xy-text-soft: var(--text-2); --xy-muted: var(--text-3);
    --xy-accent: var(--accent); --xy-accent-hover: var(--accent-hover); --xy-accent-ink: var(--accent-ink); --xy-accent-soft: var(--accent-tint);
    --xy-ok: var(--st-ok); --xy-warn: var(--st-warn); --xy-bad: var(--st-err); --xy-info: var(--st-info);
    --xy-line: var(--hairline); --xy-line-strong: var(--hairline-strong);
    --xy-radius-sm: var(--r-sm); --xy-radius-md: var(--r-md); --xy-radius-lg: var(--r-lg);
    --xy-shadow-overlay: var(--shadow-float); --xy-shadow-soft: 0 10px 26px rgba(4, 2, 6, .3);
    --xy-ease: var(--ease-out); --xy-font: var(--font-ui);
    --xy-role-player: var(--role-player); --xy-role-staff: var(--role-staff); --xy-role-customer: var(--role-customer); --xy-role-owner: var(--role-owner);
    --sidebar-2: var(--bg-raised);
    --focus-ring: rgba(244, 179, 207, .6);
    --s6-purple: #c8b6f2;
    --p1-glass-shadow-front: var(--shadow-float);
    --p1-glass-env-pink: rgba(244, 179, 207, .06);
    --p1-glass-env-cool: rgba(145, 185, 240, .04);
  }
}