/* ============================================================================= PMC Lab / Design Tokens v1.0 Phase 1 工程2 - 2026-09-14 ----------------------------------------------------------------------------- 設計原則（Strategy Master 準拠） 1. Mobile First x Decision First : 375px を基準に設計し、判断要素を最優先 2. Premium Through Restraint : 色数・装飾・動きを削ることで品位を出す 3. Evidence Visible : 根拠は装飾ではなく構造として見える 4. Personal Fit > Ranking : 順位ではなく「自分に合うか」を視覚化 ----------------------------------------------------------------------------- 重要な約束 - このファイルは変数の定義のみ。セレクタによる見た目の変更は一切行わない。 したがって本ファイルを読み込んでも既存記事の表示は変化しない。 - コンポーネント（pmc-base.css）はスケール値を直接使わず、 必ず下段の「セマンティックトークン」を参照する（One Source of Truth）。 ============================================================================= */ :root { /* --------------------------------------------------------------------------- 1. COLOR / 原色パレット 色は「インク（濃紺〜チャコール）」「面（白〜オフホワイト）」 「罫（クールグレー）」「アクセント1色」「意味色4色」のみ。 黒x金、グラデーション、彩度の高い原色は使用しない。 --------------------------------------------------------------------------- */ /* Ink : 濃紺寄りのチャコール。純黒(#000)は使わない */ --pmc-ink-900: #0F1722; /* 見出し・最重要テキスト */ --pmc-ink-800: #17212E; --pmc-ink-700: #1F2A37; /* 強調本文 */ --pmc-ink-600: #33414F; /* 本文 */ --pmc-ink-500: #4B5A69; --pmc-ink-400: #64748B; /* 補助テキスト（クールグレー） */ --pmc-ink-300: #8B99A9; /* 弱いテキスト・プレースホルダ */ /* Surface : 白〜オフホワイト。わずかに暖色寄りにして臨床的な印象を避ける */ --pmc-surface-0: #FFFFFF; /* 基本の紙面 */ --pmc-surface-1: #FAFAF8; /* オフホワイト（ページ地／引用ブロック） */ --pmc-surface-2: #F2F4F6; /* クールグレー面（表ヘッダ・非活性） */ --pmc-surface-3: #E8ECF0; /* 面の最も濃い段階 */ --pmc-surface-ink: #17212E; /* 反転面（ごく限定的に使用） */ /* Line : 罫線。影ではなく罫でレイヤーを表現する */ --pmc-line-soft: #EEF1F4; --pmc-line: #E2E6EB; --pmc-line-strong: #CBD5E1; --pmc-line-ink: #33414F; /* Accent : 判断・行動に関わる要素にのみ使う唯一のアクセント。 深いティール。金・赤・ピンクは使わない（美容広告色の回避） */ --pmc-accent-900: #0E3A3D; --pmc-accent-700: #12474B; --pmc-accent: #1A5E63; --pmc-accent-400: #4C8A8D; --pmc-accent-100: #DDE9E9; --pmc-accent-050: #EEF4F4; /* Semantic : いずれも彩度を落とした深色。セール感を出さない */ --pmc-positive: #2F6B4F; /* 適合・達成 */ --pmc-positive-bg: #EDF3EF; --pmc-caution: #8A6212; /* 条件つき・注意 */ --pmc-caution-bg: #F7F2E6; --pmc-critical: #93301F; /* 医療・安全上の警告 */ --pmc-critical-bg: #F7EDEA; --pmc-neutral: #64748B; /* 該当なし・情報なし */ --pmc-neutral-bg: #F2F4F6; /* --------------------------------------------------------------------------- 2. TYPOGRAPHY Webフォントは読み込まない（LCP と CLS を優先）。 明朝はロゴ的装飾ではなく「出典・引用」にのみ使う。 --------------------------------------------------------------------------- */ --pmc-font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "BIZ UDPGothic", Meiryo, sans-serif; --pmc-font-serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", "Times New Roman", serif; --pmc-font-num: "SF Mono", "Roboto Mono", "Helvetica Neue", Arial, sans-serif; /* Size : mobile(375px) 基準。768px 以上で本文のみ 1px 上げる */ --pmc-text-2xs: 0.6875rem; /* 11px ラベル・注記 */ --pmc-text-xs: 0.75rem; /* 12px */ --pmc-text-sm: 0.8125rem; /* 13px メタ情報 */ --pmc-text-md: 0.9375rem; /* 15px 補助本文 */ --pmc-text-base: 1rem; /* 16px 本文 */ --pmc-text-lg: 1.125rem; /* 18px リード */ --pmc-text-xl: 1.25rem; /* 20px h4 */ --pmc-text-2xl: 1.4375rem; /* 23px h3 */ --pmc-text-3xl: 1.625rem; /* 26px h2 */ --pmc-text-4xl: 1.875rem; /* 30px h1 */ /* Weight : 300 は使わない（日本語での可読性低下を避ける） */ --pmc-weight-normal: 400; --pmc-weight-medium: 500; --pmc-weight-bold: 700; /* Leading : 日本語本文は 1.9 を基準にする */ --pmc-leading-tight: 1.35; --pmc-leading-snug: 1.55; --pmc-leading-normal: 1.75; --pmc-leading-relaxed: 1.9; /* Tracking */ --pmc-tracking-tight: 0; --pmc-tracking-normal: 0.02em; --pmc-tracking-wide: 0.08em; /* ラベル・キッカー */ /* --------------------------------------------------------------------------- 3. SPACING 4px グリッド --------------------------------------------------------------------------- */ --pmc-space-0: 0; --pmc-space-1: 0.25rem; /* 4px */ --pmc-space-2: 0.5rem; /* 8px */ --pmc-space-3: 0.75rem; /* 12px */ --pmc-space-4: 1rem; /* 16px */ --pmc-space-5: 1.25rem; /* 20px */ --pmc-space-6: 1.5rem; /* 24px */ --pmc-space-8: 2rem; /* 32px */ --pmc-space-10: 2.5rem; /* 40px */ --pmc-space-12: 3rem; /* 48px */ --pmc-space-16: 4rem; /* 64px */ --pmc-space-20: 5rem; /* 80px */ /* 画面端の余白。Premium Through Restraint の主要な担い手 */ --pmc-gutter: var(--pmc-space-4); /* --------------------------------------------------------------------------- 4. LAYOUT --------------------------------------------------------------------------- */ --pmc-width-text: 42rem; /* 672px 本文の最大幅 */ --pmc-width-wide: 60rem; /* 960px 比較表など */ --pmc-width-full: 75rem; /* 1200px 外枠 */ /* タップ領域の最小値。Mobile First の下限として全ての操作要素が守る */ --pmc-tap-min: 48px; /* --------------------------------------------------------------------------- 5. BORDER / RADIUS 角丸は小さく保つ。丸みが強いと「アプリ的」になり編集物に見えなくなる。 --------------------------------------------------------------------------- */ --pmc-border-width: 1px; --pmc-border-width-strong: 2px; --pmc-radius-sm: 2px; --pmc-radius-md: 4px; --pmc-radius-lg: 8px; --pmc-radius-pill: 999px; /* --------------------------------------------------------------------------- 6. ELEVATION 影は原則使わない。固定要素（下部アクションバー）と スクロール時の表ヘッダにのみ、ごく弱い影を許可する。 --------------------------------------------------------------------------- */ --pmc-shadow-none: none; --pmc-shadow-sm: 0 1px 2px rgba(15, 23, 34, 0.06); --pmc-shadow-sticky: 0 -1px 0 var(--pmc-line), 0 -6px 16px rgba(15, 23, 34, 0.06); /* フォーカスリング。キーボード操作の可視性は削らない */ --pmc-focus-ring: 0 0 0 2px var(--pmc-surface-0), 0 0 0 4px var(--pmc-accent); /* --------------------------------------------------------------------------- 7. MOTION アニメーションは状態変化の説明にのみ使う。演出には使わない。 --------------------------------------------------------------------------- */ --pmc-duration-fast: 120ms; --pmc-duration: 180ms; --pmc-ease: cubic-bezier(0.2, 0, 0, 1); /* --------------------------------------------------------------------------- 8. Z-INDEX --------------------------------------------------------------------------- */ --pmc-z-base: 0; --pmc-z-sticky-head: 20; --pmc-z-actionbar: 40; --pmc-z-overlay: 60; /* --------------------------------------------------------------------------- 9. SEMANTIC TOKENS コンポーネントはここから先だけを参照する。 色を変更したい場合は、上のパレットではなくこの層を書き換える。 --------------------------------------------------------------------------- */ /* テキスト */ --pmc-text-color-heading: var(--pmc-ink-900); --pmc-text-color-body: var(--pmc-ink-600); --pmc-text-color-strong: var(--pmc-ink-800); --pmc-text-color-muted: var(--pmc-ink-400); --pmc-text-color-faint: var(--pmc-ink-300); --pmc-text-color-onink: #FFFFFF; --pmc-text-color-accent: var(--pmc-accent-700); /* 面 */ --pmc-bg-page: var(--pmc-surface-0); --pmc-bg-raised: var(--pmc-surface-0); --pmc-bg-sunken: var(--pmc-surface-1); --pmc-bg-muted: var(--pmc-surface-2); --pmc-bg-ink: var(--pmc-surface-ink); /* 罫 */ --pmc-border-color: var(--pmc-line); --pmc-border-color-soft: var(--pmc-line-soft); --pmc-border-color-strong: var(--pmc-line-strong); /* 判断（Decision） */ --pmc-decision-accent: var(--pmc-accent); --pmc-decision-bg: var(--pmc-surface-1); --pmc-decision-selected-bg: var(--pmc-accent-050); --pmc-decision-selected-border: var(--pmc-accent); /* 根拠（Evidence） */ --pmc-evidence-bg: var(--pmc-surface-1); --pmc-evidence-rule: var(--pmc-ink-700); /* 左の縦罫。根拠の可視化の核 */ --pmc-evidence-cite-color: var(--pmc-ink-400); /* 適合度（Personal Fit）。色だけに依存させず記号と語を必ず併記する */ --pmc-fit-strong: var(--pmc-positive); --pmc-fit-ok: var(--pmc-ink-700); --pmc-fit-partial: var(--pmc-caution); --pmc-fit-no: var(--pmc-ink-300); /* 行動（CTA）。ページ内で唯一「塗り」が許される要素 */ --pmc-cta-bg: var(--pmc-accent); --pmc-cta-bg-hover: var(--pmc-accent-700); --pmc-cta-text: #FFFFFF; /* 広告表記。目立たせないが、隠さない */ --pmc-disclosure-color: var(--pmc-ink-400); --pmc-disclosure-bg: var(--pmc-surface-2); } /* ----------------------------------------------------------------------------- ブレークポイントによる段階的拡大 値だけを差し替える。レイアウトの分岐はコンポーネント側で行う。 ----------------------------------------------------------------------------- */ @media (min-width: 768px) { :root { --pmc-text-base: 1.0625rem; /* 17px */ --pmc-text-lg: 1.1875rem; /* 19px */ --pmc-text-xl: 1.3125rem; /* 21px */ --pmc-text-2xl: 1.5rem; /* 24px */ --pmc-text-3xl: 1.8125rem; /* 29px */ --pmc-text-4xl: 2.1875rem; /* 35px */ --pmc-gutter: var(--pmc-space-6); } } @media (min-width: 1024px) { :root { --pmc-text-3xl: 1.9375rem; /* 31px */ --pmc-text-4xl: 2.375rem; /* 38px */ --pmc-gutter: var(--pmc-space-8); } } /* ----------------------------------------------------------------------------- アクセシビリティ：動きを減らす設定を尊重する ----------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --pmc-duration-fast: 1ms; --pmc-duration: 1ms; } }