デザイントークン

カラー

Aa Aa
--page-bg ページ背景
Aa Aa
--card-bg カード背景
Aa Aa
--hover-bg ホバー時の背景
Aa あア亜
--text-normal 通常テキスト
Aa あア亜
--text-passive 淡色テキスト（補足など）
Aa あア亜
--primary メインカラー
Aa あア亜
--text1 セマンティック1
Aa あア亜
--text2 セマンティック2
Aa あア亜
--text3 セマンティック3
Aa あア亜
--text4 セマンティック4

ボタン

.outline

.group

:empty

ボーダー

--radius-small コンパクトな要素
--radius-large カード・パネル

スカラー変数

変数説明
--radius-small 小さい角丸
--radius-large 大きい角丸（カード等）
--page-width ページ最大幅
--swup-time ページ遷移フェード時間
--dir グラデーション方向（ライト:1 / ダーク:-1）
--text-modifier フォントスケール係数（モバイルで縮小）
--text-lightness テキスト OKLCH 明度
--text-chroma テキスト OKLCH 彩度