/**
 * input: 无
 * output: qlai_v4 Design Token CSS 变量全集（复刻 variables.scss）
 * pos: 所有原型底座第一顺位样式——新原型第一行引入
 *
 * 一旦 src/renderer/assets/styles/variables.scss 变化，必须同步本文件。
 * 三层材料体系: Ambient Canvas → Glass Surface → Micro Glass
 */

:root {
  /* ==== 字体系统 ==== */
  --ql-font-family: 'Inter', 'MiSans', -apple-system, BlinkMacSystemFont,
                    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI',
                    'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif;
  --ql-font-display: var(--ql-font-family);
  --ql-font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;

  /* ==== OKLCH 品牌色阶 ==== */
  --ql-primary-50:  oklch(0.975 0.015 350);
  --ql-primary-100: oklch(0.940 0.035 350);
  --ql-primary-200: oklch(0.870 0.080 350);
  --ql-primary-300: oklch(0.75 0.15 350);
  --ql-primary-400: oklch(0.68 0.18 350);
  --ql-primary-500: oklch(0.62 0.19 350);
  --ql-primary-600: oklch(0.55 0.19 350);
  --ql-primary-700: oklch(0.48 0.17 350);
  --ql-primary-800: oklch(0.40 0.14 350);
  --ql-primary-900: oklch(0.30 0.10 350);

  --ql-primary: #E84C88;
  --ql-primary-light: var(--ql-primary-400);
  --ql-primary-dark: var(--ql-primary-600);
  --ql-primary-text: var(--ql-primary-800);

  /* ==== 表面色 ==== */
  --ql-surface: #ffffff;
  --ql-surface-alt: oklch(0.985 0.001 286);
  --ql-surface-hover: oklch(0.967 0.001 286);
  --ql-bg: oklch(0.975 0.001 286);
  --ql-bg-alt: oklch(0.954 0.002 286);

  --ql-selected-bg: var(--ql-primary-50);
  --ql-primary-bg: var(--ql-primary-50);
  --ql-primary-glow: oklch(0.62 0.19 350 / 0.12);

  --ql-dark-surface: oklch(0.20 0.03 280);
  --ql-text-inverse: #FFFFFF;

  /* ==== 边框 ==== */
  --ql-border: oklch(0.894 0.003 286);
  --ql-border-light: oklch(0.942 0.002 286);

  /* ==== 文字 ==== */
  --ql-text: oklch(0.274 0.006 286);
  --ql-text-secondary: oklch(0.446 0.009 286);
  --ql-text-muted: oklch(0.552 0.011 286);
  --ql-text-primary: var(--ql-text);
  --ql-text-tertiary: oklch(0.705 0.008 286);
  --ql-text-placeholder: oklch(0.705 0.008 286);

  /* ==== 状态色 ==== */
  --ql-success: oklch(0.65 0.20 145);
  --ql-success-glow: oklch(0.65 0.20 145 / 0.25);
  --ql-warning: oklch(0.75 0.18 80);
  --ql-warning-glow: oklch(0.75 0.18 80 / 0.25);
  --ql-error: oklch(0.60 0.22 25);
  --ql-error-glow: oklch(0.60 0.22 25 / 0.25);

  --ql-success-text: oklch(0.45 0.15 155);
  --ql-warning-text: oklch(0.50 0.14 70);
  --ql-error-text: oklch(0.45 0.18 25);

  --ql-success-bg: oklch(0.97 0.03 150);
  --ql-warning-bg: oklch(0.97 0.03 85);
  --ql-warning-border: oklch(0.82 0.16 85);
  --ql-error-bg: oklch(0.97 0.03 20);

  /* ==== Interactive — Berry CTA ==== */
  --ql-action: #6B3A5D;
  --ql-action-hover: #573050;
  --ql-action-active: #4A2845;
  --ql-action-disabled-bg: var(--ql-border);
  --ql-action-disabled-text: var(--ql-text-muted);
  --ql-action-shadow: rgba(107, 58, 93, 0.30);

  /* ==== Content 语义 ==== */
  --ql-content-heading: var(--ql-text);
  --ql-content-body: var(--ql-text-secondary);
  --ql-content-caption: var(--ql-text-muted);
  --ql-content-link: var(--ql-primary-text);
  --ql-content-link-hover: var(--ql-primary);

  /* ==== Surface 语义 ==== */
  --ql-surface-page: var(--ql-bg);
  --ql-surface-card: var(--ql-surface);
  --ql-surface-interactive: var(--ql-surface-hover);
  --ql-surface-selected: var(--ql-selected-bg);

  /* ==== Feedback 语义 ==== */
  --ql-feedback-success: var(--ql-success);
  --ql-feedback-warning: var(--ql-warning);
  --ql-feedback-error: var(--ql-error);
  --ql-feedback-info: var(--ql-primary);

  /* ==== 圆角 (macOS 26 Liquid Glass) ==== */
  --ql-radius-xs: 8px;
  --ql-radius-sm: 12px;
  --ql-radius-control: 14px;
  --ql-radius-panel: 20px;
  --ql-radius-surface: 24px;
  --ql-radius-xl: 28px;
  --ql-radius-pill: 9999px;

  /* ==== Sunken Pill 选中态 ==== */
  --ql-pill-shadow:
    0 0.5px 1px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.06),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.8);
  --ql-pill-shadow-subtle:
    0 0.5px 1px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.04),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.8);

  /* ==== App 底板 ==== */
  --ql-app-bg: #EDEDF0;
  --ql-section-bg: var(--ql-surface-alt);

  /* ==== Liquid Glass 三层材料 ==== */
  --ql-glass-bg: rgba(255, 255, 255, 0.72);
  --ql-glass-bg-heavy: rgba(255, 255, 255, 0.85);
  --ql-glass-bg-light: rgba(255, 255, 255, 0.5);
  --ql-glass-blur: saturate(180%) blur(20px);
  --ql-glass-blur-light: blur(12px);
  --ql-glass-blur-control: blur(8px);
  --ql-glass-blur-overlay: blur(4px);
  --ql-glass-blur-panel: blur(16px);
  --ql-glass-blur-subtle: blur(2px);
  --ql-glass-border: rgba(255, 255, 255, 0.45);
  --ql-glass-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.45);

  /* ==== 阴影 ==== */
  --ql-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --ql-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
  --ql-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.06);
  --ql-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04);
  --ql-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.10), 0 8px 24px rgba(0, 0, 0, 0.06);
  --ql-shadow-elevated: 0 8px 16px rgba(0, 0, 0, 0.12), 0 16px 32px rgba(0, 0, 0, 0.08);
  --ql-shadow-float: 0 12px 32px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.06);
  --ql-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.06);

  /* ==== z-index 层级 ==== */
  --z-base: 1;
  --z-sticky: 10;
  --z-sidebar: 12;
  --z-chrome-pinned: 20;
  --z-toolbar: 50;
  --z-bar: 100;
  --z-dropdown: 500;
  --z-popover: 1000;
  --z-dialog: 5000;
  --z-toast: 9000;
  --z-overlay: 10000;

  /* ==== 动效 ==== */
  --ql-ease: cubic-bezier(0.2, 0, 0, 1);
  --ql-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ql-ease-glass: cubic-bezier(0.4, 0, 0.2, 1);
  --ql-motion-fast: 120ms;
  --ql-motion-base: 200ms;
  --ql-motion-lg: 300ms;
  --ql-motion-slow: 400ms;
  --ql-transition: color var(--ql-motion-base) var(--ql-ease-glass),
                   background var(--ql-motion-base) var(--ql-ease-glass),
                   background-color var(--ql-motion-base) var(--ql-ease-glass),
                   border-color var(--ql-motion-base) var(--ql-ease-glass),
                   box-shadow var(--ql-motion-base) var(--ql-ease-glass),
                   opacity var(--ql-motion-base) var(--ql-ease-glass),
                   transform var(--ql-motion-base) var(--ql-ease-glass);
  --ql-transition-fast: color var(--ql-motion-fast) var(--ql-ease),
                        background var(--ql-motion-fast) var(--ql-ease),
                        border-color var(--ql-motion-fast) var(--ql-ease),
                        box-shadow var(--ql-motion-fast) var(--ql-ease),
                        opacity var(--ql-motion-fast) var(--ql-ease),
                        transform var(--ql-motion-fast) var(--ql-ease);

  /* ==== 字号 ==== */
  --ql-font-xs: 12px;
  --ql-font-sm: 13px;
  --ql-font-base: 14px;
  --ql-font-md: 15px;
  --ql-font-lg: clamp(16px, 0.9vw + 5px, 18px);
  --ql-font-xl: clamp(18px, 1vw + 6px, 22px);
  --ql-font-2xl: clamp(20px, 1.2vw + 6px, 24px);
  --ql-font-3xl: clamp(24px, 1.5vw + 8px, 32px);

  /* ==== 行高 ==== */
  --ql-leading-tight: 1.3;
  --ql-leading-normal: 1.6;
  --ql-leading-relaxed: 1.65;

  /* ==== 间距 ==== */
  --ql-space-xs: 4px;
  --ql-space-sm: 8px;
  --ql-space-md: 12px;
  --ql-space-lg: 16px;
  --ql-space-xl: 24px;
  --ql-space-xxl: 48px;

  /* ==== 骨架屏 ==== */
  --ql-skeleton-base: #F0F0F0;
  --ql-skeleton-shine: #E8E8E8;
  --ql-muted: #94A3B8;

  /* ==== 筛选面板分区语义 · XT（星图官方）/ Ours（独家增强） ====
   * 用途：AI 选号 P0 分区底色 + 左竖条 + badge
   * 哪里用：docs/prototypes/*/ 下任何需要区分"星图官方 vs 我们增强"的原型
   */
  --ql-xt-accent: oklch(0.55 0.18 255);
  --ql-xt-accent-light: oklch(0.70 0.14 255);
  --ql-xt-text: oklch(0.45 0.18 255);
  --ql-xt-bg-subtle: oklch(0.975 0.015 255);
  --ql-xt-bg-strong: oklch(0.935 0.045 255);
  --ql-xt-border: oklch(0.85 0.08 255);
  --ql-xt-content-tint: oklch(0.988 0.005 255);
  --ql-xt-glow: oklch(0.55 0.18 255 / 0.12);

  --ql-ours-accent: var(--ql-action);
  --ql-ours-accent-light: oklch(0.62 0.09 350);
  --ql-ours-text: var(--ql-action-hover);
  --ql-ours-bg-subtle: oklch(0.975 0.012 350);
  --ql-ours-bg-strong: oklch(0.935 0.035 350);
  --ql-ours-border: oklch(0.85 0.06 350);
  --ql-ours-content-tint: oklch(0.988 0.005 350);
  --ql-ours-glow: oklch(0.48 0.10 350 / 0.12);

  /* ==== 达人头像渐变色轮（5 色） ====
   * 用途：AI 选号达人列表头像、PickClawd 品牌配色
   */
  --ql-avatar-pink-from:   oklch(0.88 0.08 350);
  --ql-avatar-pink-to:     oklch(0.65 0.19 350);
  --ql-avatar-purple-from: oklch(0.85 0.10 290);
  --ql-avatar-purple-to:   oklch(0.60 0.22 290);
  --ql-avatar-blue-from:   oklch(0.87 0.08 245);
  --ql-avatar-blue-to:     oklch(0.60 0.20 245);
  --ql-avatar-green-from:  oklch(0.87 0.12 160);
  --ql-avatar-green-to:    oklch(0.62 0.18 160);
  --ql-avatar-amber-from:  oklch(0.90 0.10 85);
  --ql-avatar-amber-to:    oklch(0.70 0.17 85);
}

/* ==== 窗口紧凑模式（DIP < 1360） ==== */
@media (max-width: 1359px) {
  :root {
    --ql-content-padding-x: 20px;
    --ql-content-padding-y: 16px;
    --ql-space-xl: 16px;
    --ql-space-lg: 12px;
    --ql-space-md: 8px;
    --ql-radius-surface: 20px;
    --ql-radius-panel: 16px;
    --ql-radius-sm: 10px;
    --ql-radius-control: 12px;
  }
}

/* ==== 全局 reset ==== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: var(--ql-font-family);
  font-variant-numeric: tabular-nums;
  background: var(--ql-app-bg);
  color: var(--ql-content-body);
  line-height: var(--ql-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

button {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

/* 滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); }