:root {
  /* ---- Brand Colors ---- */
  --color-primary: #7B4DFF;
  --color-primary-light: #A07AFF;
  --color-primary-dark: #5E30D9;
  --color-secondary: #4F7BFF;
  --color-secondary-light: #7FA2FF;
  --color-secondary-dark: #3360E0;

  /* ---- Semantic State Colors ---- */
  --state-success: #22C55E;
  --state-warning: #F59E0B;
  --state-error: #EF4444;
  --state-info: #3B82F6;

  /* ---- Neutrals (Light mode) ---- */
  --color-ink: #20233D;
  --color-ink-secondary: #6B6F8E;
  --color-ink-tertiary: #9BA0BC;
  --color-surface: #F5F6FF;
  --color-surface-soft: #EFF1FF;
  --color-border: #E4E7FA;
  --color-card: #FFFFFF;
  --color-page-bg: #F8F8FF;
  --color-page-bg-end: #F2F5FF;

  /* ---- Radius Scale ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ---- Typography System ---- */
  --font-display: 'Inter', 'SF Pro Display', -apple-system, 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  --font-body: 'Inter', -apple-system, 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;

  /* Type Scale */
  --text-h1: 3rem;
  --text-h1-weight: 800;
  --text-h1-line-height: 1.15;
  --text-h1-letter-spacing: -0.02em;

  --text-h2: 2.25rem;
  --text-h2-weight: 700;
  --text-h2-line-height: 1.2;
  --text-h2-letter-spacing: -0.01em;

  --text-h3: 1.5rem;
  --text-h3-weight: 600;
  --text-h3-line-height: 1.3;

  --text-body: 1rem;
  --text-body-weight: 400;
  --text-body-line-height: 1.6;

  --text-body-sm: 0.875rem;
  --text-body-sm-weight: 400;
  --text-body-sm-line-height: 1.5;

  --text-caption: 0.75rem;
  --text-caption-weight: 500;
  --text-caption-line-height: 1.4;

  /* ---- Spacing ---- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* ---- Surface Depth Model ---- */
  --shadow-card: 0 1px 3px rgba(79, 95, 184, 0.04), 0 1px 2px rgba(79, 95, 184, 0.02);
  --shadow-card-hover: 0 4px 12px rgba(79, 95, 184, 0.06);
  --shadow-float: 0 12px 32px rgba(79, 95, 184, 0.08);

  /* ---- CTA Style ---- */
  --cta-bg: var(--color-primary);
  --cta-text: #FFFFFF;
  --cta-radius: var(--radius-md);
  --cta-hover-bg: var(--color-primary-dark);
}

/* ---- Dark Mode ---- */
.dark {
  --color-ink: #F4F5FF;
  --color-ink-secondary: #B8BEDA;
  --color-ink-tertiary: #7A80A0;
  --color-surface: #232742;
  --color-surface-soft: #2A2E4C;
  --color-border: #363B5D;
  --color-card: #1B1E35;
  --color-page-bg: #101225;
  --color-page-bg-end: #15182F;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.4);
}