/**
 * tokens.css — Bubbles 官网统一设计令牌
 * 所有页面强制引用，作为颜色/字号/间距/圆角/阴影/缓动的单一来源
 * 最后修改: 2026-08-03 20:30:00
 *
 * 使用规范：
 * 1. 禁止在业务代码中硬编码颜色/字号/圆角等，必须使用本文件定义的变量
 * 2. 新增令牌需在此文件统一添加，并注明用途
 * 3. 历史页面可逐步迁移，不强制一次性替换
 */

:root {
  /* ========== 品牌色：海军蓝（主色） ========== */
  --b-navy: #1B2B57;
  --b-navy-dark: #0F1A3A;
  --b-navy-mid: #233566;
  --b-navy-light: #2C3F6B;

  /* ========== 品牌色：金色（辅色/强调色） ========== */
  --b-gold: #BEA672;
  --b-gold-light: #D4C08A;
  --b-gold-bright: #E8D5A3;
  --b-gold-deep: #A88B4F;

  /* ========== 渐变 ========== */
  --b-gradient-gold: linear-gradient(135deg, #BEA672, #D4C08A);
  --b-gradient-gold-deep: linear-gradient(135deg, #BEA672, #A88B4F);
  --b-gradient-gold-shine: linear-gradient(135deg, #D4C08A, #BEA672, #D4C08A);
  --b-gradient-hero: linear-gradient(135deg, #0F1A3A 0%, #1B2B57 40%, #233566 100%);
  --b-gradient-card-edge: linear-gradient(180deg, #BEA672, #D4C08A);

  /* ========== 功能色 ========== */
  --b-success: #10B981;
  --b-danger: #EF4444;
  --b-warning: #F59E0B;
  --b-info: #3B82F6;
  --b-error: #DC2626;

  /* ========== 文字色（均满足 WCAG AA 4.5:1） ========== */
  --b-text-white: #FFFFFF;
  --b-text-muted: rgba(255, 255, 255, 0.85);
  --b-text-body: #1E293B;
  --b-text-secondary: #475569;
  --b-text-light: #64748B;        /* 对比度 4.5:1，可用于辅助文字 */
  --b-text-placeholder: #94A3B8;  /* 仅用于输入框 placeholder，不用于正文 */

  /* ========== 背景色 ========== */
  --b-bg-page: #F8F9FC;
  --b-bg-card: #FFFFFF;
  --b-bg-dark: #1B2B57;
  --b-bg-hover: #F1F5F9;

  /* ========== 边框色 ========== */
  --b-border-light: #E2E8F0;
  --b-border-medium: #CBD5E1;

  /* ========== 阴影（层级化） ========== */
  --b-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --b-shadow-card: rgba(50, 50, 93, 0.06) 0px 4px 12px -2px, rgba(0, 0, 0, 0.04) 0px 2px 4px;
  --b-shadow-card-hover: rgba(50, 50, 93, 0.10) 0px 20px 40px -8px, rgba(0, 0, 0, 0.06) 0px 8px 16px -8px;
  --b-shadow-gold: 0 6px 24px rgba(190, 166, 114, 0.45), 0 2px 8px rgba(0, 0, 0, 0.1);
  --b-shadow-gold-hover: 0 10px 32px rgba(190, 166, 114, 0.55), 0 4px 12px rgba(0, 0, 0, 0.15);
  --b-shadow-drawer: -8px 0 30px rgba(0, 0, 0, 0.12);

  /* ========== 圆角（四档阶梯） ========== */
  --b-radius-sm: 6px;
  --b-radius-md: 10px;
  --b-radius-lg: 16px;
  --b-radius-xl: 24px;
  --b-radius-full: 999px;

  /* ========== 间距（8 倍数阶梯） ========== */
  --b-space-1: 4px;
  --b-space-2: 8px;
  --b-space-3: 12px;
  --b-space-4: 16px;
  --b-space-5: 20px;
  --b-space-6: 24px;
  --b-space-8: 32px;
  --b-space-10: 40px;
  --b-space-12: 48px;
  --b-space-16: 64px;

  /* ========== 字号阶梯（6 级） ========== */
  --b-text-xs: 12px;    /* 辅助文字、标签 */
  --b-text-sm: 13px;    /* 次要信息 */
  --b-text-base: 14px;  /* 正文基础 */
  --b-text-md: 15px;    /* 正文略大 */
  --b-text-lg: 16px;    /* 强调正文 */
  --b-text-xl: 18px;    /* 小标题 */
  --b-text-2xl: 22px;   /* 卡片标题 */
  --b-text-3xl: 26px;   /* 区块副标题 */
  --b-text-4xl: 32px;   /* 区块主标题 */
  --b-text-5xl: 40px;   /* 页面标题 */
  --b-text-6xl: 52px;   /* Hero 大标题 */

  /* ========== 字重 ========== */
  --b-weight-regular: 400;
  --b-weight-medium: 500;
  --b-weight-semibold: 600;
  --b-weight-bold: 700;

  /* ========== 行高 ========== */
  --b-leading-tight: 1.2;
  --b-leading-snug: 1.4;
  --b-leading-normal: 1.6;
  --b-leading-relaxed: 1.7;

  /* ========== 缓动函数 ========== */
  --b-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --b-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* ========== 布局 ========== */
  --b-content-max: 1200px;
  --b-nav-h: 110px;
  --b-nav-h-mobile: 64px;

  /* ========== 响应式断点 ========== */
  --b-breakpoint-sm: 640px;
  --b-breakpoint-md: 768px;
  --b-breakpoint-lg: 1024px;
  --b-breakpoint-xl: 1280px;

  /* ========== 过渡时长 ========== */
  --b-duration-fast: 0.15s;
  --b-duration-base: 0.25s;
  --b-duration-slow: 0.4s;

  /* ========== 字体栈 ========== */
  --b-font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
}

/* ========== 兼容映射：旧变量名 → 新令牌 ==========
   历史代码使用 --navy/--gold 等旧名，此处映射到新令牌，
   确保旧代码无需改动即可工作 */
:root {
  --navy: var(--b-navy);
  --navy-dark: var(--b-navy-dark);
  --navy-mid: var(--b-navy-mid);
  --navy-light: var(--b-navy-light);
  --gold: var(--b-gold);
  --gold-light: var(--b-gold-light);
  --gold-bright: var(--b-gold-bright);
  --gradient-gold: var(--b-gradient-gold);
  --gradient-hero: var(--b-gradient-hero);
  --gradient-card-edge: var(--b-gradient-card-edge);
  --text-white: var(--b-text-white);
  --text-muted: var(--b-text-muted);
  --text-body: var(--b-text-body);
  --text-secondary: var(--b-text-secondary);
  --text-light: var(--b-text-light);
  --bg-page: var(--b-bg-page);
  --bg-card: var(--b-bg-card);
  --bg-dark: var(--b-bg-dark);
  --border-light: var(--b-border-light);
  --shadow-card: var(--b-shadow-card);
  --shadow-card-hover: var(--b-shadow-card-hover);
  --shadow-drawer: var(--b-shadow-drawer);
  --radius-sm: var(--b-radius-sm);
  --radius-md: var(--b-radius-md);
  --radius-lg: var(--b-radius-lg);
  --radius-xl: var(--b-radius-xl);
  --radius-full: var(--b-radius-full);
  --ease-spring: var(--b-ease-spring);
  --ease-smooth: var(--b-ease-smooth);
  --content-max: var(--b-content-max);
  --nav-h: var(--b-nav-h);
  --success: var(--b-success);
  --danger: var(--b-danger);
  --warning: var(--b-warning);
  --info: var(--b-info);
}