/* UnoCSS 样式文件 */

/* ==================== Light Mode Variables ==================== */
:root {
  /* Base Colors */
  --art-color: #ffffff;
  --theme-color: var(--main-color);

  /* Theme Colors - OKLCH Format */
  --art-primary: oklch(0.7 0.23 260);
  --art-secondary: oklch(0.72 0.19 231.6);
  --art-error: oklch(0.73 0.15 25.3);
  --art-info: oklch(0.58 0.03 254.1);
  --art-success: oklch(0.78 0.17 166.1);
  --art-warning: oklch(0.78 0.14 75.5);
  --art-danger: oklch(0.68 0.22 25.3);

  /* Gray Scale - Light Mode */
  --art-gray-100: #f9fafb;
  --art-gray-200: #f2f4f5;
  --art-gray-300: #e6eaeb;
  --art-gray-400: #dbdfe1;
  --art-gray-500: #949eb7;
  --art-gray-600: #7987a1;
  --art-gray-700: #4d5875;
  --art-gray-800: #383853;
  --art-gray-900: #323251;

  /* Border Colors */
  --art-card-border: rgba(0, 0, 0, 0.08);

  --default-border: #e2e8ee;
  --default-border-dashed: #dbdfe9;

  /* Background Colors */
  --default-bg-color: #fafbfc;
  --default-box-color: #ffffff;

  /* Hover Color */
  --art-hover-color: #edeff0;

  /* Active Color */
  --art-active-color: #f2f4f5;

  /* Element Component Active Color */
  --art-el-active-color: #f2f4f5;
}

/* ==================== Dark Mode Variables ==================== */
.dark {
  /* Base Colors */
  --art-color: #000000;

  /* Gray Scale - Dark Mode */
  --art-gray-100: #110f0f;
  --art-gray-200: #17171c;
  --art-gray-300: #393946;
  --art-gray-400: #505062;
  --art-gray-500: #73738c;
  --art-gray-600: #8f8fa3;
  --art-gray-700: #ababba;
  --art-gray-800: #c7c7d1;
  --art-gray-900: #e3e3e8;

  /* Border Colors */
  --art-card-border: rgba(255, 255, 255, 0.08);

  --default-border: rgba(255, 255, 255, 0.1);
  --default-border-dashed: #363843;

  /* Background Colors */
  --default-bg-color: #070707;
  --default-box-color: #161618;

  /* Hover Color */
  --art-hover-color: #252530;

  /* Active Color */
  --art-active-color: #202226;

  /* Element Component Active Color */
  --art-el-active-color: #2e2e38;
}
