/* ============================================================
   msa505.com — CSS Custom Properties (Apple Glass Design System)
   ============================================================
   设计方向：苹果系毛玻璃质感 + 电商活力配色
   所有视觉参数统一在此管理，组件样式通过 var() 引用
   ============================================================ */

:root {
  /* ===== 主色调 ===== */
  --color-primary: #FF6B3D;        /* 活力橙 — 主按钮、链接、价格高亮 */
  --color-primary-hover: #E55A2B;  /* 悬浮加深 */
  --color-primary-light: rgba(255, 107, 61, 0.08);

  --color-accent: #E60012;         /* 淘宝红 — 价格、促销标签 */
  --color-accent-hover: #C40010;

  /* ===== 语义色 ===== */
  --color-success: #34C759;
  --color-warning: #FF9500;
  --color-error: #FF3B30;

  /* ===== 中性色 ===== */
  --color-text-primary: #1D1D1F;    /* 主文字 — 接近 Apple 风格 */
  --color-text-secondary: #6E6E73;  /* 次要文字 */
  --color-text-tertiary: #AEAEB2;   /* 辅助文字 / 占位 */
  --color-text-inverse: #FFFFFF;

  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-light: rgba(0, 0, 0, 0.04);
  --color-divider: rgba(0, 0, 0, 0.06);

  /* ===== 背景系统 ===== */
  --bg-page: #F2F2F7;              /* iOS 风格页面底色 */
  --bg-card: rgba(255, 255, 255, 0.72);   /* 毛玻璃卡片背景 */
  --bg-card-solid: #FFFFFF;        /* 纯白卡片（备选） */
  --bg-card-hover: rgba(255, 255, 255, 0.9);
  --bg-overlay: rgba(0, 0, 0, 0.4);
  --bg-header__bar: rgba(242, 242, 247, 0.78);
  --bg-footer: rgba(255, 255, 255, 0.6);
  --bg-image-placeholder: rgba(0, 0, 0, 0.03);

  /* ===== 毛玻璃效果 ===== */
  --glass-blur: saturate(180%) blur(20px);
  --glass-blur-nav: saturate(200%) blur(24px);
  --glass-backdrop: -webkit-backdrop-filter var(--glass-blur);
  --header__bar-backdrop: -webkit-backdrop-filter var(--glass-blur-nav);

  /* ===== 渐变端点（配合主色使用） ===== */
  --color-primary-gradient-start: #FF8A61;
  --color-primary-gradient-end: #FF7A4F;

  /* ===== 阴影系统 ===== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-button: 0 2px 8px rgba(255, 107, 61, 0.25);
  --shadow-button-hover: 0 4px 14px rgba(255, 107, 61, 0.35);
  --shadow-nav: 0 1px 4px rgba(0, 0, 0, 0.06);

  /* ===== 字体栈 ===== */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", "Fira Code", monospace;

  /* ===== 字号阶梯 ===== */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 36px;
  --text-3xl: 48px;

  /* ===== 圆角体系 ===== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ===== 间距体系 ===== */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* ===== 过渡动画 ===== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* ===== Z-Index 层级 ===== */
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-nav: 1000;
  --z-overlay: 2000;
  --z-modal: 3000;
  --z-toast: 4000;

  /* ===== 布局常量 ===== */
  --content-max-width: min(1600px, calc(100vw - 48px));
  --sidebar-width: 300px;
  --header-height: 56px;

  /* ===== 响应式断点（用作参考，实际在媒体查询中使用） ===== */
  /* --bp-tablet: 768px; */
  /* --bp-desktop: 1024px; */
  /* --bp-wide: 1280px; */
}