/* tokens.css — DTZ Schreiben Coach デザイントークン（全画面共通） * 出典: docs/APP_ARCHITECTURE.md / CLAUDE.md（B2アプリ由来のトークン） * 役割: 色・タイポ・余白・角丸・影・Phase別アクセントを CSS 変数で一元管理。 * 各 HTML はこの 1 ファイルだけを読めば外観が揃う。 */ :root { /* --- 背景: cream 系 --- */ --cream: #FBF8F3; --cream2: #F3EEE6; --cream3: #EAE3D8; /* --- 文字: ink 階調 --- * ink3 は補助テキスト用。WCAG AA (4.5:1) を cream/cream2 上で満たす値（T7.5 実測調整）。 */ --ink: #1E1A14; --ink2: #5A5248; --ink3: #726B65; /* --- Phase アクセント（5段の階段） --- * B2由来の色相を維持しつつ、白文字ボタンで 4.5:1 を満たす明度に調整（T7.5）。 */ --p1: #BF5434; /* Phase1 Redemittel 橙 */ --p2: #34855C; /* Phase2 模範比較 緑 */ --p3: #A16B15; /* Phase3 採点眼ドリル 金 */ --p4: #387AB6; /* Phase4 誘導作文 青 */ --p5: #7B5EA7; /* Phase5 本番＋AI 紫 */ /* --- フィードバック信号色（緑=OK / 黄=改善 / 赤=危険） --- * 各 *-bg の上で文字色が 4.5:1 を満たすよう調整（T7.5）。 */ --ok: #307A55; --ok-bg: #E6F2EB; --warn: #936113; --warn-bg:#F6ECD6; --danger: #B73C2C; --danger-bg:#F6E2DE; /* --- 罫線・面 --- */ --line: #E0D8CB; --surface:#FFFFFF; --shadow: 0 1px 2px rgba(30,26,20,.05), 0 4px 16px rgba(30,26,20,.06); --shadow-lift: 0 2px 6px rgba(30,26,20,.08), 0 10px 30px rgba(30,26,20,.10); /* --- フォント --- */ --font-head: "Fraunces", Georgia, "Times New Roman", serif; /* 見出し */ --font-body: "Noto Sans JP", system-ui, -apple-system, sans-serif; /* 本文（日本語含む） */ --font-de: "Georgia", "Times New Roman", serif; /* 独文 */ /* --- タイポスケール --- */ --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 19px; --fs-xl: 24px; --fs-2xl: 32px; --lh: 1.7; /* --- 余白スケール（8pxベース） --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* --- 角丸 --- */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px; /* --- レイアウト --- */ --maxw: 720px; /* モバイル優先の本文最大幅 */ --tap: 44px; /* タップ最小高 */ } /* ===== リセット（最小） ===== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh); color: var(--ink); background: var(--cream); } h1, h2, h3 { font-family: var(--font-head); font-weight: 600; line-height: 1.25; color: var(--ink); } h1 { font-size: var(--fs-2xl); margin: 0 0 var(--sp-4); } h2 { font-size: var(--fs-xl); margin: 0 0 var(--sp-3); } h3 { font-size: var(--fs-lg); margin: 0 0 var(--sp-2); } p { margin: 0 0 var(--sp-3); } a { color: inherit; } button { font-family: inherit; } /* 独文は Georgia で表示（学習対象を視覚的に区別） */ .de, [lang="de"] { font-family: var(--font-de); } /* ===== 共通ユーティリティ ===== */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: var(--sp-4); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: var(--sp-5); } /* 信号バッジ */ .badge { display: inline-block; padding: 2px var(--sp-2); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; } .badge--ok { background: var(--ok-bg); color: var(--ok); } .badge--warn { background: var(--warn-bg); color: var(--warn); } .badge--danger { background: var(--danger-bg); color: var(--danger); } /* タップ可能要素は最小 44px */ button, .btn { min-height: var(--tap); } /* スクリーンリーダー専用 */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* キーボードフォーカスを明示（アクセシビリティ） */ :focus-visible { outline: 3px solid var(--p4); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ===== RTL（アラビア語など right-to-left 言語）対応 ===== * 各画面の