/* ============================================================
   京研嘉品 设计令牌 v3.0 · 唯一源（Single Source of Truth）
   网站 / H5 消费 px；小程序 tokens.wxss 从本文件逐值派生（px × 2 = rpx）
   禁止在任何页面 / wxss 中自定义第二套颜色·间距·字阶变量。
   依据：《审查意见与优化方案报告_ox8_v1.md》裁决 1/2/3 ·
        《京研嘉品_视觉设计规范_v1.0.md》第二章全色阶
   ============================================================ */
:root {
  /* ---- Brand 蓝 50–900（主色 · 行动与信任）---- */
  --jy-brand-50:  #EEF3FE;
  --jy-brand-100: #E3EBFD;
  --jy-brand-200: #C7D6F8;
  --jy-brand-300: #9EB8F0;
  --jy-brand-400: #6B90F0;
  --jy-brand-500: #3869EA; /* ★ 主 CTA / 链接 / 选中态 */
  --jy-brand-600: #2A50C8; /* 按钮 hover / 按压 */
  --jy-brand-700: #21409F; /* 白底深字强调（AA 达标）*/
  --jy-brand-800: #183176; /* 深色区块背景 */
  --jy-brand-900: #10214D; /* 反白 logo 底 / 页脚深色区 */

  /* ---- Accent 橙 50–900（点缀 · 数据与促销，禁主按钮）---- */
  --jy-accent-50:  #FFF1E8;
  --jy-accent-100: #FFE0CC;
  --jy-accent-300: #FFA37D;
  --jy-accent-500: #FF6B35; /* ★ 价格强调 / 涨幅角标 / 促销徽标 */
  --jy-accent-600: #E05A2B;
  --jy-accent-700: #B8481F; /* 白底橙色小字必须用此档 */

  /* ---- 中性层：文本 / 背景 / 描边 / 禁用 ---- */
  --jy-text:            #1F2A44;
  --jy-text-secondary:  #6B7688;
  --jy-text-tertiary:   #8593A8;
  --jy-text-on-brand:   #FFFFFF; /* 白名单例外：品牌底反白文字 */
  --jy-bg-page:         #FFFFFF;
  --jy-bg-section:      #F4F7FE;
  --jy-border-light:    #E3EAFB;
  --jy-border-strong:   #C7D6F8;
  --jy-disabled-bg:     #EEF1F6;
  --jy-disabled-text:   #A8B3C4;

  /* ---- 状态色（主色 / 浅底 / 深字变体）---- */
  --jy-success:        #16A34A;  --jy-success-bg: #E8F7EE;  --jy-success-deep: #12813B;
  --jy-warning:        #D97706;  --jy-warning-bg: #FEF5E6;  --jy-warning-deep: #92400E;
  --jy-error:          #DC2626;  --jy-error-bg:   #FDECEC;  --jy-error-deep:   #B91C1C;
  --jy-info:           #3869EA;  --jy-info-bg:    #EEF3FE;  --jy-info-deep:    #21409F;

  /* ---- 动效：时长四档 + 缓动三档 ---- */
  --jy-dur-fast:   120ms;
  --jy-dur-base:   200ms;
  --jy-dur-slow:   320ms;
  --jy-dur-reveal: 480ms;
  --jy-ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --jy-ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --jy-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- 字阶七级（Web px ↔ MP rpx ×2 锁定）---- */
  --jy-fs-h1:      44px;   /* 88rpx  · 行高 1.25 · 600 */
  --jy-fs-h2:      32px;   /* 64rpx  · 行高 1.3  · 600 */
  --jy-fs-h3:      24px;   /* 48rpx  · 行高 1.35 · 600 */
  --jy-fs-h4:      20px;   /* 40rpx  · 行高 1.4  · 500 */
  --jy-fs-body-lg: 16px;   /* 32rpx  · 行高 1.6  · 400 */
  --jy-fs-body:    14px;   /* 28rpx  · 行高 1.7  · 400 */
  --jy-fs-caption: 12px;   /* 24rpx  · 行高 1.5  · 400 */

  /* ---- 间距（4pt 网格八级）---- */
  --jy-space-1:  4px;
  --jy-space-2:  8px;
  --jy-space-3: 12px;
  --jy-space-4: 16px;
  --jy-space-6: 24px;
  --jy-space-8: 32px;
  --jy-space-12: 48px;
  --jy-space-16: 64px;

  /* ---- 圆角三档 + 胶囊 ---- */
  --jy-radius-sm:   8px;
  --jy-radius-md:  16px;
  --jy-radius-lg:  24px;
  --jy-radius-pill: 999px;

  /* ---- 阴影三档 ---- */
  --jy-shadow-1: 0 4px 16px rgba(56, 105, 234, 0.08);   /* 卡片静置 */
  --jy-shadow-2: 0 8px 28px rgba(30, 58, 150, 0.10);    /* raised / 弹层 */
  --jy-shadow-3: 0 12px 36px rgba(30, 58, 150, 0.16);   /* hover 提升 */

  /* ---- z-index 层级表 ---- */
  --jy-z-dropdown: 1000;
  --jy-z-sticky:   1100;
  --jy-z-fixed:    1200;
  --jy-z-modal:    2000;
  --jy-z-toast:    3000;

  /* ---- 字体栈 ---- */
  --jy-font-cn: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;

  /* ---- 组件尺寸 ---- */
  --jy-btn-h:    44px;  /* 88rpx · 触控热区下限 */
  --jy-header-h: 64px;

  /* ============ 语义别名层（页面优先消费这一层；
     未来启用暗色只覆盖此处，页面零改动）============ */
  --jy-surface:       var(--jy-bg-page);
  --jy-surface-alt:   var(--jy-bg-section);
  --jy-text-primary:  var(--jy-text);
  --jy-line:          var(--jy-border-light);

  /* ============ 存量兼容别名（v2.0 名称保留，数值对齐 v3.0）============ */
  --jy-brand:       var(--jy-brand-500);
  --jy-brand-deep:  var(--jy-brand-600);
  --jy-brand-light: var(--jy-brand-300);
  --jy-on-deep-sub: var(--jy-brand-200);
  --jy-sub-on-white:var(--jy-brand-400);
  --jy-bg:          var(--jy-bg-page);
  --jy-card-shadow: var(--jy-shadow-1);
}

/* ---------- 暗色模式预留钩子（本期不发布，仅声明）---------- */
[data-theme="dark"] {
  --jy-surface:      #10182B;
  --jy-surface-alt:  #16203A;
  --jy-text-primary: #E7ECF8;
  --jy-line:         #26314F;
}

/* ---------- 基础组件映射 ---------- */
.jy-btn-primary {
  background: var(--jy-brand); color: var(--jy-text-on-brand);
  border: none; border-radius: var(--jy-radius-sm);
  min-height: var(--jy-btn-h); font-family: var(--jy-font-cn); font-weight: 500;
  cursor: pointer;
}
.jy-btn-primary:hover  { background: var(--jy-brand-600); }
.jy-btn-primary:active { background: var(--jy-brand-700); }
/* 促销专用变体：默认禁用，仅活动位且单视图 ≤1 个 */
.jy-btn-primary--accent { background: var(--jy-accent-500); }
.jy-btn-primary--accent:hover { background: var(--jy-accent-600); }

.jy-btn-ghost {
  background: transparent; color: var(--jy-brand);
  border: 1px solid var(--jy-brand); border-radius: var(--jy-radius-sm);
  min-height: var(--jy-btn-h); font-family: var(--jy-font-cn);
}
.jy-btn-ghost:hover { background: var(--jy-brand-50); }

.jy-card {
  background: var(--jy-surface); border: 1px solid var(--jy-line);
  border-radius: var(--jy-radius-md); box-shadow: var(--jy-shadow-1);
}

/* ---------- 可达性基线（全站统一焦点态）---------- */
:focus-visible {
  outline: 2px solid var(--jy-brand-500);
  outline-offset: 2px;
  border-radius: 2px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: calc(var(--jy-z-toast) + 1);
  background: var(--jy-brand-900); color: var(--jy-text-on-brand);
  padding: var(--jy-space-2) var(--jy-space-4); border-radius: 0 0 var(--jy-radius-sm) 0;
}
.skip-link:focus-visible { left: 0; }

/* ---------- 动效降级兜底（硬性）---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}