/* * オゴオリザクラの謎を追え！ デザイントークン * 正: docs/ogorizakura_nazooe_design_system.md * * 【暫定採用 v0.1（2026-09-21）】今後、更新の可能性あり。値の変更はここを直す。 * 更新のルールは上の文書を参照。 * * - 値を直接書かず、必ずこの変数を使う（素材・配色は差し替え前提） * - 外部フォント・外部CDNは使わない（仕様書2章） * - モードは （小学生以下・みのり）／ "b"（中学生以上・遥）で切り替える * - 屋外・日中の利用が前提のため、ダークモードは用意しない【提案】 */ :root { /* ---- 色: 紙（日記のページ）---- */ --oz-paper: #FBF6EC; /* 画面の背景 */ --oz-paper-sunken: #F3EBDA; /* 一段くぼんだ面（入力欄の下地・区切り） */ --oz-surface: #FFFDF8; /* カード・シートの面 */ --oz-line: #D9CDB6; /* 装飾の罫線（意味を持たせない線） */ --oz-line-strong: #8A7C66; /* 入力欄など操作部品の枠（3:1以上） */ /* ---- 色: 墨（文字）---- */ --oz-ink: #2B2622; /* 本文 */ --oz-ink-2: #5B5148; /* 補足文 */ /* ---- 色: 桜（主役・操作）---- */ --oz-sakura-100: #F8E1E7; --oz-sakura-300: #E8A3B6; --oz-sakura-600: #B4496A; /* 主ボタンの地（白文字5.1:1） */ --oz-sakura-700: #953956; /* 押下・リンク文字（白文字7.0:1） */ /* ---- 色: 鉄（宝箱・枠・副ボタン）---- */ --oz-iron-100: #E3E8EB; --oz-iron-500: #5F6E79; --oz-iron-700: #3A4650; /* ---- 色: 若葉（風・解答済み・成功）---- */ --oz-leaf-100: #E1EEE4; --oz-leaf-600: #4E7F5E; --oz-leaf-700: #2F5F41; /* ---- 色: 金（断片・クリア証）---- */ --oz-gold-100: #F7ECD0; --oz-gold-400: #D4A445; --oz-gold-700: #7A5510; /* ---- 色: 警告・エラー ---- */ --oz-danger-100: #F8E0E0; --oz-danger-600: #A93232; /* ---- 色: 九十九（シルエット専用。他では使わない）---- */ --oz-shadow-figure: #24202B; /* ---- 意味の割り当て（部品はこちらを参照する）---- */ --oz-bg: var(--oz-paper); --oz-text: var(--oz-ink); --oz-text-sub: var(--oz-ink-2); --oz-accent: var(--oz-sakura-600); --oz-accent-strong: var(--oz-sakura-700); --oz-accent-tint: var(--oz-sakura-100); --oz-focus: var(--oz-iron-700); /* スポット状態: 未解放 → 解放済み → 解答済み（仕様書4.1.1） */ --oz-state-locked-bg: var(--oz-paper-sunken); --oz-state-locked-fg: var(--oz-ink-2); --oz-state-open-bg: var(--oz-sakura-100); --oz-state-open-fg: var(--oz-sakura-700); --oz-state-solved-bg: var(--oz-leaf-100); --oz-state-solved-fg: var(--oz-leaf-700); /* ---- 書体（システムフォントのみ）---- */ --oz-font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Yu Gothic", "Noto Sans JP", "Noto Sans CJK JP", Meiryo, sans-serif; --oz-font-story: "Hiragino Mincho ProN", "Yu Mincho", "BIZ UDPMincho", "Noto Serif JP", "Noto Serif CJK JP", serif; /* 物語・日記 */ --oz-font-code: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Noto Sans Mono CJK JP", monospace; /* 再開コード・引換コード・時刻 */ /* ---- 文字サイズ（モードで基準が変わる）---- */ --oz-fs-base: 1rem; --oz-fs-sm: 0.875rem; --oz-fs-lg: 1.25rem; --oz-fs-xl: 1.625rem; --oz-fs-2xl: 2rem; --oz-lh-body: 1.8; /* 日本語は行間を広めに */ --oz-lh-tight: 1.4; --oz-rt-size: 0.55em; /* ルビの大きさ（親の文字に対する割合）。モードAのみ表示 */ --oz-rt-min: 11px; /* ルビがこれより小さくならないようにする */ /* ---- 余白（4pxグリッド）---- */ --oz-space-1: 0.25rem; --oz-space-2: 0.5rem; --oz-space-3: 0.75rem; --oz-space-4: 1rem; --oz-space-5: 1.5rem; --oz-space-6: 2rem; --oz-space-7: 3rem; --oz-gutter: 1rem; /* ---- 角・影・枠 ---- */ --oz-radius-sm: 6px; --oz-radius-md: 12px; --oz-radius-lg: 20px; --oz-radius-pill: 999px; --oz-border: 1px solid var(--oz-line); --oz-shadow-1: 0 1px 2px rgb(43 38 34 / 0.08), 0 2px 8px rgb(43 38 34 / 0.06); --oz-shadow-2: 0 4px 16px rgb(43 38 34 / 0.14); --oz-scrim: rgb(43 38 34 / 0.45); /* シートの背後を暗くする幕（v0.1.1で追加） */ /* ---- 操作 ---- */ --oz-tap-min: 48px; /* 押せる部品の最小サイズ（WCAG推奨44px以上） */ --oz-content-max: 30rem; /* 画面の最大幅。PCで開いても中央の細い列に収める */ --oz-focus-ring: 3px solid var(--oz-focus); --oz-focus-offset: 2px; /* ---- 動き（音を使わないので、視覚の反応で伝える）---- */ --oz-dur-fast: 120ms; --oz-dur: 240ms; --oz-ease: cubic-bezier(0.2, 0.7, 0.3, 1); /* ---- 重なり順 ---- */ --oz-z-hint: 50; /* おごりんのヒント層 */ --oz-z-sheet: 80; --oz-z-map: 90; /* 拠点画面から開く全面の地図 */ --oz-z-block: 100; /* アプリ内ブラウザ案内などの全画面ブロック */ --oz-z-toast: 120; /* トースト（v0.1.1で追加。何より前に出る） */ } /* ---- モードA：小学生以下（みのり）。大きく・丸く・やさしく ---- */ :root[data-mode="a"] { --oz-fs-base: 1.125rem; --oz-fs-sm: 1rem; --oz-fs-lg: 1.5rem; --oz-fs-xl: 1.875rem; --oz-fs-2xl: 2.25rem; --oz-lh-body: 2; /* 総ルビのため、行間を広げてルビの分を確保 */ --oz-lh-tight: 1.75; /* 見出し・ボタンもルビが重ならないように */ --oz-radius-sm: 10px; --oz-radius-md: 18px; --oz-radius-lg: 28px; --oz-tap-min: 56px; --oz-gutter: 1.25rem; --oz-accent-tint: var(--oz-sakura-100); } /* ---- モードB：中学生以上（遥）。締まった紙と墨の落ち着き ---- */ :root[data-mode="b"] { --oz-radius-sm: 4px; --oz-radius-md: 8px; --oz-radius-lg: 14px; --oz-accent: var(--oz-sakura-700); --oz-accent-strong: #7A2D45; } @media (prefers-reduced-motion: reduce) { :root { --oz-dur-fast: 0ms; --oz-dur: 0ms; } }