/* ============================================================
   variables.css — 寻帧 v3 设计令牌（双主题）
   亮色主题：官网营销页 / 支付中转页（data-theme="light"）
   暗色主题：登录后工作台（默认，data-theme="dark"）
   ============================================================ */

/* ---------- 暗色主题（工作台默认） ---------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* 背景 */
  --bg-page: #0C0F16;            /* (12,15,22) 页面底 */
  --bg-surface: #141926;         /* (20,25,38) 面板/卡片 */
  --bg-elevated: #1C2233;        /* (28,34,51) 浮层/弹窗 */
  --bg-inset: #0F1320;           /* (15,19,32) 输入框/内嵌区 */
  --bg-hover: rgba(255, 255, 255, 0.05);
  --bg-active: rgba(255, 255, 255, 0.08);

  /* 文字 */
  --text-primary: #E8ECF4;       /* (232,236,244) */
  --text-secondary: #9AA5BC;     /* (154,165,188) */
  --text-tertiary: #6B7690;      /* (107,118,144) */
  --text-inverse: #0C0F16;

  /* 描边 */
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-focus: rgba(124, 124, 255, 0.55);

  /* 品牌 */
  --brand-400: #9B9BFF;
  --brand-500: #7C7CFF;          /* (124,124,255) 暗色下提亮 */
  --brand-600: #6366F1;
  --brand-700: #4F52D9;
  --brand-soft: rgba(124, 124, 255, 0.14);
  --brand-grad: linear-gradient(135deg, #6366F1 0%, #A855F7 100%);
  --brand-grad-hi: linear-gradient(135deg, #818CF8 0%, #C084FC 100%);
  --accent-cyan: #22D3EE;        /* (34,211,238) 辉光点缀 */
  --accent-cyan-soft: rgba(34, 211, 238, 0.12);

  /* 语义色 */
  --success: #34D399;
  --success-soft: rgba(52, 211, 153, 0.14);
  --warning: #FBBF24;
  --warning-soft: rgba(251, 191, 36, 0.14);
  --error: #F87171;
  --error-soft: rgba(248, 113, 113, 0.14);

  /* 阴影与辉光 */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
  --glow-brand: 0 0 0 1px rgba(124, 124, 255, 0.35), 0 4px 24px rgba(99, 102, 241, 0.35);
  --ring-edge: inset 0 1px 0 rgba(255, 255, 255, 0.06);   /* 卡片顶边高光 */

  /* 布局 */
  --shell-topbar-h: 60px;
  --shell-sidebar-w: 240px;
  --shell-sidebar-w-mini: 68px;

  /* 圆角 */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 999px;

  /* 动效 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.28s;
  --dur-slow: 0.6s;
}

/* ---------- 亮色主题（官网/支付） ---------- */
[data-theme="light"] {
  color-scheme: light;

  --bg-page: #FFFFFF;
  --bg-surface: #F6F7FB;         /* (246,247,251) */
  --bg-elevated: #FFFFFF;
  --bg-inset: #F0F2F8;
  --bg-hover: rgba(14, 19, 32, 0.04);
  --bg-active: rgba(14, 19, 32, 0.07);

  --text-primary: #0E1320;       /* (14,19,32) */
  --text-secondary: #5A6478;     /* (90,100,120) */
  --text-tertiary: #8B94A8;
  --text-inverse: #FFFFFF;

  --border: #E5E8F0;
  --border-strong: #D2D7E4;
  --border-focus: rgba(91, 91, 245, 0.5);

  --brand-400: #7B7BF8;
  --brand-500: #5B5BF5;          /* (91,91,245) */
  --brand-600: #4B4BE0;
  --brand-700: #3D3DC4;
  --brand-soft: rgba(91, 91, 245, 0.09);
  --brand-grad: linear-gradient(135deg, #5B5BF5 0%, #9B5CF6 100%);
  --brand-grad-hi: linear-gradient(135deg, #6D6DF8 0%, #AD74F8 100%);
  --accent-cyan: #0891B2;
  --accent-cyan-soft: rgba(8, 145, 178, 0.1);

  --success: #059669;
  --success-soft: rgba(5, 150, 105, 0.1);
  --warning: #D97706;
  --warning-soft: rgba(217, 119, 6, 0.1);
  --error: #DC2626;
  --error-soft: rgba(220, 38, 38, 0.08);

  --shadow-sm: 0 2px 8px rgba(14, 19, 32, 0.06);
  --shadow-md: 0 8px 24px rgba(14, 19, 32, 0.1);
  --shadow-lg: 0 16px 48px rgba(14, 19, 32, 0.14);
  --glow-brand: 0 0 0 1px rgba(91, 91, 245, 0.25), 0 4px 24px rgba(91, 91, 245, 0.18);
  --ring-edge: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ---------- 全局静态令牌（两主题共享） ---------- */
:root {
  /* 字体 */
  --font-sans: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-num: "SF Mono", "Cascadia Code", Consolas, monospace;

  /* 字号阶梯（px/行高） */
  --fs-display: 44px;  --lh-display: 1.22;
  --fs-h1: 30px;       --lh-h1: 1.32;
  --fs-h2: 22px;       --lh-h2: 1.36;
  --fs-h3: 17px;       --lh-h3: 1.42;
  --fs-body: 14px;     --lh-body: 1.6;
  --fs-sm: 13px;       --lh-sm: 1.55;
  --fs-caption: 12px;  --lh-caption: 1.5;

  /* 8 点栅格间距 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* 布局宽度 */
  --w-container: 1200px;
  --w-container-wide: 1360px;

  /* z-index 层级 */
  --z-nav: 100;
  --z-pop: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ---------- 旧页面兼容别名（旧组件/未迁移页面引用，弹窗类自带暗色底） ---------- */
  --bg: #0C0F16;
  --card: #141926;
  --card2: #1C2233;
  --text: #E8ECF4;
  --text2: #9AA5BC;
  --sub: #9AA5BC;
  --dim: #6B7690;
  --line: rgba(255, 255, 255, 0.08);
  --line2: rgba(255, 255, 255, 0.14);
  --grad: linear-gradient(135deg, #6366F1 0%, #A855F7 100%);
  --accent: #7C7CFF;
  --accent2: #9B9BFF;
  --accent-c: #22D3EE;
  --ok: #34D399;
  --warn: #FBBF24;
  --err: #F87171;
}