/* デザイントークン(色・文字・余白などの共通ルール) 詳しい説明は同じフォルダの design.md を参照。 使い方: このファイルをツールのプロジェクトにコピーして、 HTMLの で読み込む。 例: 数値は直接書かず、必ず var(--変数名) の形で使うこと。 */ :root { /* ==== 色(ライトモード) ==== */ --color-bg: #F5F5F7; --color-surface: #FFFFFF; --color-text-primary: #1D1D1F; --color-text-secondary: #6E6E73; --color-accent: #0071E3; --color-accent-hover: #0077ED; --color-success: #34C759; --color-warning: #FF9F0A; --color-danger: #FF3B30; --color-border: #D2D2D7; /* 薄い背景色(バッジ・タグ用) */ --color-success-tint: #E7F8EC; --color-warning-tint: #FFF3E0; --color-danger-tint: #FFEBEA; --color-accent-tint: #E8F1FC; /* ==== フォント ==== */ --font-family-base: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; --font-size-title: 28px; --font-size-heading: 20px; --font-size-body: 15px; --font-size-caption: 13px; --font-weight-bold: 700; --font-weight-semibold: 600; --font-weight-normal: 400; --line-height-base: 1.5; /* ==== 余白(8pxグリッド) ==== */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; /* ==== 角丸 ==== */ --radius-small: 8px; --radius-medium: 12px; --radius-large: 20px; /* ==== 影 ==== */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-modal: 0 8px 30px rgba(0, 0, 0, 0.15); /* ==== 動き ==== */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* ==== ダークモード(対応は任意。使う場合はそのまま読み込むだけでOK) ==== */ @media (prefers-color-scheme: dark) { :root { --color-bg: #1D1D1F; --color-surface: #2C2C2E; --color-text-primary: #F5F5F7; --color-text-secondary: #98989D; --color-accent: #0A84FF; --color-accent-hover: #409CFF; --color-border: #3A3A3C; --color-success-tint: rgba(52, 199, 89, 0.15); --color-warning-tint: rgba(255, 159, 10, 0.15); --color-danger-tint: rgba(255, 69, 58, 0.15); --color-accent-tint: rgba(10, 132, 255, 0.15); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-modal: 0 8px 30px rgba(0, 0, 0, 0.4); } } /* ==== ごく基本のリセット ==== */ body { background: var(--color-bg); color: var(--color-text-primary); font-family: var(--font-family-base); font-size: var(--font-size-body); line-height: var(--line-height-base); margin: 0; }