:root {
  --surface-a: #ffffff;
  --surface-b: #f3f5f6;
  --surface-c: #ebf2ff;
  --surface-d: #e5e7eb;
  --surface-e: #ffffff;
  --surface-f: #ffffff;
  --text-color: #4b5563;
  --text-color-secondary: #6b7280;
  --primary-color: #885de9;
  --primary-color-text: #885de9;
  --surface-0: #ffffff;
  --surface-50: #f9fafb;
  --surface-100: #f3f4f6;
  --surface-200: #e5e7eb;
  --surface-300: #d1d5db;
  --surface-400: #9ca3af;
  --surface-500: #6b7280;
  --surface-600: #4b5563;
  --surface-700: #374151;
  --surface-800: #1f2937;
  --surface-900: #111827;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --content-padding: 1.25rem;
  --inline-spacing: 0.5rem;
  --border-radius: 6px;
  --surface-ground: #f9fafb;
  --surface-section: #ffffff;
  --surface-card: #ffffff;
  --surface-overlay: #ffffff;
  --surface-border: #dfe7ef;
  --surface-hover: #f6f9fc;
  --focus-ring: 0 0 0 0.2rem #ddd6fe;
  --maskbg: rgba(0, 0, 0, 0.4);
  --highlight-bg: #e8e5f9;
  --highlight-text-color: #6d28d9;
  color-scheme: light;

  --primary-theme: #885de9;
  --primary-theme-text: #fff;
  --primary-menu-boder: #ac90ef;
  --primary-head-btn: #946eeb;
  --primary-head-btn-text: #fff;
}

:root {
  --primary-50: #f4f6fb;
  --primary-100: #e8e5f9;
  --primary-200: #dcd4f7;
  --primary-300: #d0c3f5;
  --primary-400: #c4b2f3;
  --primary-500: #b8a1f1;
  --primary-600: #ac90ef;
  --primary-700: #a07fed;
  --primary-800: #946eeb;
  --primary-900: #885de9;
}