/* =================================================================
   NetAnim Phase 1 — styles.css
   グローバルレイアウト、モード切替ボタン、追加カラートークン
   ================================================================= */

/* --- 追加カラートークン (DESIGN.md 仕様) --- */
:root {
  --ok:         oklch(0.78 0.15 155);
  --ok-soft:    oklch(0.78 0.15 155 / .22);
  --info:       oklch(0.78 0.13 230);
  --info-soft:  oklch(0.78 0.13 230 / .22);
}

/* ライトモードでも同じ値を継承 (tokens.css が :root.light を上書きするため再宣言) */
:root.light {
  --ok:         oklch(0.62 0.17 155);
  --ok-soft:    oklch(0.62 0.17 155 / .22);
  --info:       oklch(0.58 0.16 230);
  --info-soft:  oklch(0.58 0.16 230 / .22);
}

/* --- リセット --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- ページ全体 --- */
html {
  height: 100%;
}

body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.25s, color 0.25s;
}

/* net-anim はページ全体を占有 */
net-anim {
  display: block;
  width: 100vw;
  height: 100vh;
}

/* モード切替ボタンは廃止。
   NetAnim は iframe 埋め込み専用で、親ブログ側のテーマトグルに従う。
   storage event で localStorage('chirarin.mode') の変化を受け取って同期する。 */