/* ============================================================
 * Meetinfluencer Design System — Tokens (Fusion Theme)
 * 版本：v2026-04-23
 * 设计原则：主体浅色（HypeAuditor 数据工具感）+ 暗色英雄区（保留游戏 DNA）
 * 所有页面统一 import 本文件；禁止再在页面内复制 :root。
 * ============================================================ */

:root {
  /* ---------- Brand Palette ---------- */
  --mi-brand-purple-50:  #f4f0ff;
  --mi-brand-purple-100: #e6dcff;
  --mi-brand-purple-300: #b099ff;
  --mi-brand-purple-500: #7c3aed;   /* 主品牌紫（延续 V1） */
  --mi-brand-purple-600: #6d28d9;
  --mi-brand-purple-700: #5b21b6;
  --mi-brand-purple-900: #2e1065;

  --mi-brand-coral-50:   #fff4ee;
  --mi-brand-coral-100:  #ffe3d1;
  --mi-brand-coral-300:  #ffb58a;
  --mi-brand-coral-500:  #ff7a45;   /* 新引入的转化橙（HypeAuditor 风） */
  --mi-brand-coral-600:  #e85e2b;
  --mi-brand-coral-700:  #b9431a;

  --mi-neon-pink:   #ec4899;
  --mi-neon-cyan:   #06b6d4;
  --mi-neon-violet: #a855f7;

  /* ---------- Semantic ---------- */
  --mi-success: #10b981;
  --mi-warning: #f59e0b;
  --mi-danger:  #ef4444;
  --mi-info:    #3b82f6;

  /* ---------- Neutral — Light surface stack ---------- */
  --mi-bg:          #fff8f3;        /* 整站浅色背景（暖米） */
  --mi-bg-subtle:   #fdf1e6;        /* Why-choose / 对比区块 */
  --mi-surface:     #ffffff;        /* 卡片/面板 */
  --mi-surface-2:   #faf5ef;        /* hover 轻底 */
  --mi-border:      #f0e5d8;        /* 暖色描边 */
  --mi-border-strong: #e4d4bf;
  --mi-divider:     #f5ece0;

  /* ---------- Neutral — Dark hero stack ---------- */
  --mi-dark-bg:       #0a0512;      /* hero / footer 最深底 */
  --mi-dark-bg-2:     #1a0b2e;      /* 渐变起点 */
  --mi-dark-surface:  rgba(30, 16, 58, 0.6);
  --mi-dark-border:   rgba(255, 255, 255, 0.12);
  --mi-dark-glass:    rgba(255, 255, 255, 0.05);

  /* ---------- Typography colors ---------- */
  --mi-text-strong:  #1a1530;       /* 正文高亮标题（浅底） */
  --mi-text:         #2a2540;
  --mi-text-muted:   #6b6980;
  --mi-text-subtle:  #9c99b0;
  --mi-text-on-dark: #f8fafc;
  --mi-text-on-dark-muted: #b8b4c8;

  /* ---------- Gradients ---------- */
  --mi-gradient-hero:
    radial-gradient(ellipse at 20% 20%, rgba(168, 85, 247, 0.35), transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(236, 72, 153, 0.25), transparent 55%),
    linear-gradient(160deg, #1a0b2e 0%, #0a0512 100%);
  --mi-gradient-brand:  linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #ec4899 100%);
  --mi-gradient-warm:   linear-gradient(135deg, #ff7a45 0%, #ec4899 100%);
  --mi-gradient-glow:   linear-gradient(135deg, rgba(124,58,237,0.15), rgba(236,72,153,0.12));
  --mi-gradient-mesh:   radial-gradient(at 12% 15%, rgba(124,58,237,0.08) 0, transparent 50%),
                        radial-gradient(at 88% 85%, rgba(255,122,69,0.10) 0, transparent 45%);

  /* ---------- Typography ---------- */
  --mi-font-display: 'Space Grotesk', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --mi-font-body:    'DM Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --mi-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --mi-fs-xs:   0.75rem;   /* 12 */
  --mi-fs-sm:   0.875rem;  /* 14 */
  --mi-fs-md:   1rem;      /* 16 */
  --mi-fs-lg:   1.125rem;  /* 18 */
  --mi-fs-xl:   1.25rem;   /* 20 */
  --mi-fs-2xl:  1.5rem;    /* 24 */
  --mi-fs-3xl:  2rem;      /* 32 */
  --mi-fs-4xl:  2.5rem;    /* 40 */
  --mi-fs-5xl:  3.25rem;   /* 52 */
  --mi-fs-6xl:  4rem;      /* 64 — hero 标题 */

  --mi-lh-tight: 1.1;
  --mi-lh-snug:  1.3;
  --mi-lh-base:  1.55;
  --mi-lh-loose: 1.75;

  --mi-fw-regular:  400;
  --mi-fw-medium:   500;
  --mi-fw-semibold: 600;
  --mi-fw-bold:     700;

  /* ---------- Spacing (4px base) ---------- */
  --mi-space-1:  0.25rem;  /*  4 */
  --mi-space-2:  0.5rem;   /*  8 */
  --mi-space-3:  0.75rem;  /* 12 */
  --mi-space-4:  1rem;     /* 16 */
  --mi-space-5:  1.25rem;  /* 20 */
  --mi-space-6:  1.5rem;   /* 24 */
  --mi-space-8:  2rem;     /* 32 */
  --mi-space-10: 2.5rem;   /* 40 */
  --mi-space-12: 3rem;     /* 48 */
  --mi-space-16: 4rem;     /* 64 */
  --mi-space-20: 5rem;     /* 80 */
  --mi-space-24: 6rem;     /* 96 */
  --mi-space-32: 8rem;     /* 128 */

  /* ---------- Radius ---------- */
  --mi-radius-xs:  4px;
  --mi-radius-sm:  8px;
  --mi-radius-md:  12px;
  --mi-radius-lg:  16px;
  --mi-radius-xl:  24px;
  --mi-radius-2xl: 32px;
  --mi-radius-pill: 999px;

  /* ---------- Border width ---------- */
  --mi-border-1: 1px;
  --mi-border-2: 2px;

  /* ---------- Shadow (elevation) ---------- */
  --mi-shadow-xs: 0 1px 2px rgba(20, 14, 50, 0.04);
  --mi-shadow-sm: 0 2px 4px rgba(20, 14, 50, 0.06), 0 1px 2px rgba(20, 14, 50, 0.04);
  --mi-shadow-md: 0 8px 16px -4px rgba(20, 14, 50, 0.08), 0 4px 8px -2px rgba(20, 14, 50, 0.04);
  --mi-shadow-lg: 0 20px 40px -12px rgba(20, 14, 50, 0.15), 0 8px 16px -4px rgba(20, 14, 50, 0.08);
  --mi-shadow-xl: 0 40px 80px -20px rgba(20, 14, 50, 0.22);

  /* Dark-hero specific shadows */
  --mi-shadow-glow-purple: 0 0 40px rgba(124, 58, 237, 0.45);
  --mi-shadow-glow-coral:  0 0 32px rgba(255, 122, 69, 0.35);

  /* ---------- Motion ---------- */
  --mi-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --mi-ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --mi-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --mi-dur-fast:  150ms;
  --mi-dur-base:  250ms;
  --mi-dur-slow:  400ms;
  --mi-dur-slower: 700ms;

  /* ---------- Z-index ---------- */
  --mi-z-dropdown: 1000;
  --mi-z-sticky:   1020;
  --mi-z-drawer:   1040;
  --mi-z-modal:    1050;
  --mi-z-toast:    1080;

  /* ---------- Layout ---------- */
  --mi-container:      1200px;
  --mi-container-wide: 1360px;
  --mi-sidebar-w:      260px;
  --mi-navbar-h:       72px;
}

/* ==============================================
 * 可选深色子作用域：任何容器加 .mi-on-dark 即可
 * 切换为 hero/footer 等暗色区的文本配色。
 * ============================================== */
.mi-on-dark {
  --mi-text-strong: var(--mi-text-on-dark);
  --mi-text:        var(--mi-text-on-dark);
  --mi-text-muted:  var(--mi-text-on-dark-muted);
  --mi-bg:          var(--mi-dark-bg);
  --mi-surface:     var(--mi-dark-surface);
  --mi-border:      var(--mi-dark-border);
}