用途：为 Rails 应用编写可维护、可扩展的现代 CSS，不依赖任何框架。核心思路是组件自持样式、用设计令牌替代魔法数字、用 @layer 控制层叠、用 color-scheme 与 light-dark() 自动支持暗色模式，工具类仅作少量微调。
主要能力：给出 app/assets/stylesheets 目录结构（_global.css 令牌、reset.css、base.css、utilities.css、components/ 各组件文件）；声明 @layer reset, base, components, utilities 并规定优先级；在 :root 定义颜色、间距、字体、圆角、过渡等令牌，颜色用 OKLCH 与 light-dark() 表达明暗两套值；组件文件按 .component、.component-sub、.component-variant、.component-state 命名；页面样式表只做布局，不覆盖组件；第三方库通过映射其变量到自有令牌并调整加载顺序集成。
使用方式：先查看现有结构与令牌，再按层编写规则，所有值引用令牌而非硬编码。暗色模式可选手动切换，通过 html[data-theme] 与 localStorage 实现，并在 head 中加脚本防止闪烁。
适用场景：新建或重组 Rails 样式结构、编写组件样式、实现暗色模式、定义令牌、排查层叠与优先级问题、从 Tailwind 迁移到原生 CSS、集成第三方 CSS。
限制：light-dark() 需 Chrome 123+、Firefox 120+、Safari 17.5+，旧浏览器需 prefers-color-scheme 回退；暗色模式下阴影效果不佳，建议改用边框；具体项目约定与更多示例见其 references/ 目录。