/* ==========================================================================
   福友电竞 · Design Tokens  v1.0
   --------------------------------------------------------------------------
   全站唯一的「数值与颜色来源」。所有组件只允许引用 var(--fy-*)，禁止写死色值。
   改主题 = 只改这个文件。

   命名规范：
     --fy-{色系}-{深浅}      颜色
     --fy-r-*                圆角 radius
     --fy-sh-*               阴影 shadow
     --fy-fs-*               字号 font-size
     --fy-fw-*               字重 font-weight
     --fy-sp-*               间距 spacing
     --fy-grad-*             渐变 gradient
     --fy-z-*                层级
     --fy-dur-* / --fy-ease-*  动效
   ========================================================================== */

:root {
  /* ======================================================================
     一、品牌色 · 福气金 / 奶油橙
     取自品牌 IP：福友猫额头的「福」字金、金色皇冠、奶油色皮毛
     ====================================================================== */
  --fy-gold-800: #A85E12;
  --fy-gold-700: #C9761B;
  --fy-gold-600: #E8912B;
  --fy-gold-500: #F5A93C;   /* ★ 主色 */
  --fy-gold-400: #FFBE5C;
  --fy-gold-300: #FFD489;
  --fy-gold-200: #FFE7B8;
  --fy-gold-100: #FFF3DC;
  --fy-gold-050: #FFFBF3;

  /* 辅助色 · 暖红（Banner 标语条、限时/热卖标签、价格） */
  --fy-red-700: #A82F1B;
  --fy-red-600: #C93F27;
  --fy-red-500: #E8543A;    /* ★ 暖红 */
  --fy-red-400: #F4705A;
  --fy-red-200: #FFC9BC;
  --fy-red-100: #FFE3DC;

  /* 辅助色 · 浅杏 / 米白 / 浅黄 */
  --fy-apricot-300: #F7CFA0;
  --fy-apricot-200: #FBE0BE;
  --fy-apricot-100: #FDF0DC;
  --fy-cream-200: #FFF3E2;
  --fy-cream-100: #FFF9F0;   /* ★ 奶油白 */
  --fy-cream-050: #FFFDF8;
  --fy-lemon-200: #FFEFA8;
  --fy-lemon-100: #FFF7D6;

  /* 辅助色 · 深棕（文字体系） */
  --fy-brown-900: #3A2110;
  --fy-brown-800: #4A2C14;
  --fy-brown-700: #5C3A1E;   /* ★ 深棕 · 主文字 */
  --fy-brown-600: #6F4826;
  --fy-brown-500: #8A603A;
  --fy-brown-400: #A9805A;
  --fy-brown-300: #C4A583;   /* 暖灰 / 米棕 · 未选中态 */
  --fy-brown-200: #E3D2BC;
  --fy-brown-100: #F2E7D8;

  /* 语义色 */
  --fy-ok: #3FAE6A;
  --fy-ok-bg: #E6F6EC;
  --fy-warn: #F5A93C;
  --fy-warn-bg: #FFF3DC;
  --fy-danger: #E8543A;
  --fy-danger-bg: #FFE9E3;
  --fy-info: #4A90D9;
  --fy-info-bg: #E8F2FC;

  /* ======================================================================
     二、语义化颜色（组件只用这一层）
     ====================================================================== */
  --fy-text: var(--fy-brown-700);
  --fy-text-strong: var(--fy-brown-900);
  --fy-text-sub: var(--fy-brown-500);
  --fy-text-weak: var(--fy-brown-400);
  --fy-text-mute: var(--fy-brown-300);
  --fy-text-on-gold: #FFFFFF;
  --fy-text-price: var(--fy-red-500);

  --fy-surface: #FFFFFF;
  --fy-surface-warm: var(--fy-cream-050);
  --fy-surface-sunken: var(--fy-cream-100);
  --fy-surface-glass: rgba(255, 253, 248, 0.86);

  --fy-line: rgba(201, 152, 92, 0.18);
  --fy-line-strong: rgba(201, 152, 92, 0.32);
  --fy-line-gold: rgba(245, 169, 60, 0.42);

  /* 页面背景：绝不用纯白 */
  --fy-bg-page: var(--fy-cream-100);
  --fy-bg-top: #FFF4E2;

  /* ======================================================================
     三、渐变
     ====================================================================== */
  --fy-grad-gold: linear-gradient(135deg, #FFD489 0%, #F5A93C 46%, #E8912B 100%);
  --fy-grad-gold-deep: linear-gradient(135deg, #F5A93C 0%, #E8912B 55%, #C9761B 100%);
  --fy-grad-gold-soft: linear-gradient(135deg, #FFF7E6 0%, #FFE7B8 58%, #FFD489 100%);
  --fy-grad-red: linear-gradient(135deg, #F4705A 0%, #E8543A 100%);
  --fy-grad-page: linear-gradient(180deg, #FFF4E2 0%, #FFF9F0 44%, #FFFDF8 100%);
  --fy-grad-card: linear-gradient(180deg, #FFFFFF 0%, #FFFBF4 100%);
  --fy-grad-glass: linear-gradient(180deg, rgba(255, 253, 248, 0.96) 0%, rgba(255, 247, 235, 0.92) 100%);
  --fy-grad-halo: radial-gradient(circle at 50% 50%, rgba(255, 208, 128, 0.55) 0%, rgba(255, 208, 128, 0) 68%);

  /* ======================================================================
     四、圆角
     ====================================================================== */
  --fy-r-xs: 6px;
  --fy-r-sm: 10px;
  --fy-r-md: 14px;
  --fy-r-lg: 18px;
  --fy-r-xl: 24px;
  --fy-r-2xl: 30px;
  --fy-r-pill: 999px;

  /* ======================================================================
     五、阴影（暖调，不用纯黑）
     ====================================================================== */
  --fy-sh-xs: 0 1px 2px rgba(176, 120, 52, 0.06);
  --fy-sh-sm: 0 2px 8px rgba(176, 120, 52, 0.08);
  --fy-sh-md: 0 4px 14px rgba(176, 120, 52, 0.10);
  --fy-sh-lg: 0 8px 24px rgba(176, 120, 52, 0.14);
  --fy-sh-xl: 0 14px 38px rgba(176, 120, 52, 0.18);
  --fy-sh-glow: 0 6px 18px rgba(245, 169, 60, 0.34);
  --fy-sh-glow-strong: 0 8px 24px rgba(232, 145, 43, 0.44);
  --fy-sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.92);
  --fy-sh-inner: inset 0 0 0 1.5px var(--fy-line-gold);

  /* ======================================================================
     六、字体与字号
     ====================================================================== */
  --fy-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
             "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fy-font-num: "DIN Alternate", "SF Pro Display", -apple-system, BlinkMacSystemFont,
                 "PingFang SC", "Microsoft YaHei", sans-serif;

  --fy-fs-10: 10px;
  --fy-fs-11: 11px;
  --fy-fs-12: 12px;
  --fy-fs-13: 13px;
  --fy-fs-14: 14px;   /* 正文基准 */
  --fy-fs-15: 15px;
  --fy-fs-16: 16px;
  --fy-fs-18: 18px;
  --fy-fs-20: 20px;
  --fy-fs-24: 24px;
  --fy-fs-28: 28px;
  --fy-fs-32: 32px;

  --fy-fw-400: 400;
  --fy-fw-500: 500;
  --fy-fw-600: 600;
  --fy-fw-700: 700;
  --fy-fw-800: 800;
  --fy-fw-900: 900;

  --fy-lh-tight: 1.15;
  --fy-lh-snug: 1.35;
  --fy-lh-normal: 1.55;

  --fy-ls-tight: -0.2px;
  --fy-ls-wide: 0.4px;

  /* ======================================================================
     七、间距（4 的倍数）
     ====================================================================== */
  --fy-sp-1: 4px;
  --fy-sp-2: 8px;
  --fy-sp-3: 12px;
  --fy-sp-4: 16px;
  --fy-sp-5: 20px;
  --fy-sp-6: 24px;
  --fy-sp-7: 32px;
  --fy-sp-8: 40px;

  --fy-gutter: 14px;          /* 页面左右留白 */
  --fy-nav-h: 58px;           /* 底部导航高度 */
  --fy-safe-b: env(safe-area-inset-bottom, 0px);

  /* ======================================================================
     八、层级
     ====================================================================== */
  --fy-z-bg: 0;
  --fy-z-content: 1;
  --fy-z-sticky: 100;
  --fy-z-nav: 900;
  --fy-z-mask: 1000;
  --fy-z-modal: 1010;
  --fy-z-toast: 1100;

  /* ======================================================================
     九、动效
     ====================================================================== */
  --fy-dur-fast: 140ms;
  --fy-dur: 220ms;
  --fy-dur-slow: 380ms;
  --fy-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fy-ease-back: cubic-bezier(0.34, 1.42, 0.64, 1);

  /* ======================================================================
     十、图标（双色图标的内层颜色，见 fy-brand-icons.js）
     ====================================================================== */
  --fy-icon-inner: #FFF6E6;
}

/* 小屏微调：字号与留白各收一档 */
@media (max-width: 360px) {
  :root {
    --fy-gutter: 12px;
    --fy-fs-14: 13px;
    --fy-fs-16: 15px;
    --fy-fs-18: 17px;
  }
}