/* ============================================
   styles.css - 主层叠定义入口
   定义所有层的顺序，然后引入
============================================ */

/* 第一步：声明所有层及其顺序（从低到高） */
@layer 
  reset,        /* 最低：重置浏览器默认 */
  tokens,       /* 设计系统变量 */
  base,         /* HTML元素基础样式 */
  theme,        /* 主题样式 */
  layout,       /* 布局系统 */
  components,   /* 可复用组件 */
  utilities,    /* 工具类/原子类 */
  overrides,    /* 页面特定覆盖 */
  effects,      /* 特效类 */
  terminal,     /* 终端类 */
  third-party;  /* 第三方库（最高优先级控制） */


@import url('layers/reset.css') layer(reset);
@import url('layers/tokens.css') layer(tokens);
@import url('layers/base.css') layer(base);
@import url('layers/theme.css') layer(theme);
@import url('layers/layout.css') layer(layout);
@import url('components/') layer(components);
@import url('components/effects.css') layer(effects);
@import url('components/terminal.css') layer(terminal);
@import url('layers/utilities.css') layer(utilities);

/* 第三步：动态导入（可选） */
/* 可以根据条件动态加载某些层 */
@media (prefers-color-scheme: dark) {
  @import url('themes/dark.css') layer(theme);
}