/* 波の道具 / Wave Tools — shared tokens and parts (v1, 2026-10-16, Polly, T-20261015-32) - 外部フォント・外部画像なし。システムフォントのみ。 - 道具ごとに変えるのは themes.css の4つの変数だけ（--wv-accent / --wv-on-accent / --wv-accent-strong / --wv-accent-soft）。 - 接頭辞 wv- 。本社の hv-（HIVE）とは混ぜない。名前に「HIVE」を出さない（Mitsu 2026-10-15）。 - 土台：本社 design-system/project/tokens.json の ink（#14171C は本社の ground #0E1014 に近い黒）と、 「光らせる所を絞る」「記号か言葉を必ず添える」「数字は等幅」の考え方。色は昼向けの明るい面に作り直した。 */ /* ───────── 1. tokens ───────── */ :root { /* 面と線（全部の道具で共通） */ --wv-ground: #F3F5F8; /* ページの背景 */ --wv-panel: #FFFFFF; /* カード、入力欄の面 */ --wv-panel-raised: #E9EDF2; /* 一段くぼんだ面（空のゲージ、ファイルの拡張子札） */ --wv-line: #D3D9E2; /* 区切り線（飾り。これだけで押せる物を示さない） */ --wv-line-strong: #6B7586; /* 押せる物・入力欄の枠。panelの上で4.5:1 */ --wv-ink: #14171C; /* 見出し・本文・枠・押す物の影 */ --wv-ink-muted: #4A5362; /* 補足。ground/panel/raised/accent-softの上で4.5:1以上。accentの上には置かない */ --wv-focus: var(--wv-ink); /* キーボードの目印（3pxの輪 + 白い隙間） */ /* 状態（必ず言葉と記号を添える） */ --wv-ok: #0B6B45; --wv-ok-soft: #E1F4EA; --wv-err: #A8231B; --wv-err-soft: #FCEBE9; --wv-info: #1F4E8C; --wv-info-soft: #E6EEF9; /* 差し色：道具ごとに themes.css で差し替える。ここは既定値（ハロウィン） */ --wv-accent: #FF7A1A; /* 塗り。上の文字は必ず on-accent（ink）。ink-mutedは置かない */ --wv-on-accent: #14171C; --wv-accent-strong: #A63F00; /* 明るい面の上の文字・線・ゲージ。ground/panel/soft/raised上で4.5:1以上 */ --wv-accent-soft: #FFE8D6; /* 淡い下地（選択中、キャラの吹き出し）。上の文字はink */ /* 文字 */ --wv-font: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", "Noto Sans CJK JP", sans-serif; /* 余白 */ --wv-space-1: 4px; --wv-space-2: 8px; --wv-space-3: 12px; --wv-space-4: 16px; --wv-space-5: 20px; --wv-space-6: 24px; --wv-space-7: 32px; --wv-space-8: 48px; /* 角 */ --wv-radius-s: 8px; --wv-radius-m: 12px; --wv-radius-l: 20px; /* 押す物の影（硬い影。ぼかさない） */ --wv-press: 0 3px 0 var(--wv-ink); } /* ───────── 2. base ───────── */ .wv, .wv *, .wv *::before, .wv *::after { box-sizing: border-box; } .wv { margin: 0; min-height: 100vh; min-height: 100dvh; font-family: var(--wv-font); font-size: 16px; line-height: 26px; font-weight: 400; color: var(--wv-ink); background: var(--wv-ground); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; display: flex; flex-direction: column; } .wv :lang(ja) { line-break: strict; word-break: auto-phrase; } .wv :where(h1, h2, h3, p, ul, ol, figure) { margin: 0; } .wv h1, .wv h2, .wv h3 { text-wrap: balance; overflow-wrap: anywhere; } .wv p { text-wrap: pretty; overflow-wrap: anywhere; } .wv a { color: inherit; } /* 部品の初期値（強さ0）。`.wv button` と書くと、あとの `.wv-btn{font-weight:800}` より強くなって