/* ========================================================================== W Eiji design system — tokens.css カスタムプロパティのみ。値の出典と使用ルールは docs/design_system.md。 命名: --{層}-{名前}-{段階} 原色 --blue-*, --red-* ← 部品からは直接参照しない 人物 --a-* (渡辺英司), --s-* (渡辺英治) ← data-eiji-a で入れ替え可能 意味役割 --color-* ← 部品はこの層と --a-* / --s-* だけを使う 色の出典: files/poster.jpg（Adobe RGB）を sRGB に変換して計測（2026-09-07） 青 #048CC8 (Adobe RGB 生値 #4F8BC5) = カタログ CMYK C80 M30 Y0 朱赤 #EB6B55 (Adobe RGB 生値 #D06B57) = カタログ CMYK C0 M85 Y80 緑 #2CA660 カタログ CMYK C85 M0 Y90。Ghostscript の描画色相（153°）に、 青・赤の平均の明度と彩度を与えて算出（v0.2、2026-09-07） 割り当て（カタログで確定）: 英司＝青、英治＝朱赤、共通（寄稿・イベント・進行）＝緑 段階の意味（WCAG 2.x のコントラスト比で定義） 100–300 地色用の淡色。--ink の文字で 9:1 以上 400 中間色。装飾のみ（文字には使わない） 500 ポスターの色。地色と線画。白文字は 24px 以上（青 3.76、朱赤 3.10） 600 白地の色文字（本文サイズ可、4.5 以上）。白文字を載せる地色にも可 700 7:1 以上（AAA）。淡色地の上の文字にも使う 800 10:1 以上。強調と極小文字 ========================================================================== */ :root { /* ---- primitives: blue ------------------------------------------------ */ --blue-100: #DEF2FF; --blue-200: #BBE1FA; --blue-300: #93CCF2; --blue-400: #54ABDF; --blue-500: #048CC8; --blue-600: #067EB5; --blue-700: #015F89; --blue-800: #004668; /* ---- primitives: red (朱赤) ------------------------------------------ */ --red-100: #FEE9E5; --red-200: #FECEC4; --red-300: #FDAD9D; --red-400: #FE9783; --red-500: #EB6B55; --red-600: #CA4D39; --red-700: #A62B18; --red-800: #861000; /* ---- primitives: green (共通。カタログ中央部分の色) ------------------------- */ --green-100: #DFF5E4; --green-200: #BEE7C9; --green-300: #97D5A9; --green-400: #66C385; --green-500: #2CA660; --green-600: #038848; --green-700: #006735; --green-800: #014D26; /* ---- neutrals ---------------------------------------------------------- */ --ink: #1A1A1A; /* 本文。白地で 17.4:1 */ --ink-2: #4A4A4A; /* 補助。8.9:1 */ --ink-3: #6B6B6B; /* キャプション、ラベル。5.3:1 */ --paper: #FFFFFF; --paper-2: #F4F4F4; /* 区切り面 */ --line: #D9D9D9; /* 罫線 */ /* ---- typography -------------------------------------------------------- */ /* 欧文を先頭に置き、仮名・漢字は和文書体へフォールバックさせる */ --font-sans: "DM Sans", "DM Sans Fallback", "Zen Kaku Gothic New", "Zen Kaku Gothic New Fallback", "Hiragino Sans", "Noto Sans JP", sans-serif; --font-serif: "EB Garamond", "Times New Roman", serif; /* 雲形ロゴ専用 */ /* 縦組み専用。Web フォントは vert 機能（句読点・長音の回転）を欠くことがあるので端末の書体を先に */ --font-vertical: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; /* 流動スケール（本文 16px 基準。コメントは最小–最大 px） */ --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); /* 12–13 */ --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem); /* 13–14 */ --text-md: 1rem; /* 16 */ --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); /* 18–20 */ --text-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); /* 20–24 */ --text-2xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); /* 24–32 */ --text-3xl: clamp(1.875rem, 1.3rem + 2.6vw, 2.75rem); /* 30–44 */ --text-4xl: clamp(2.25rem, 1.2rem + 4.8vw, 4rem); /* 36–64 */ --tracking-display: 0.18em; /* ポスターの表示文字 */ --tracking-wide: 0.08em; /* 見出し、ラベル */ --tracking-jp: 0.04em; /* 和文本文 */ --leading-jp: 1.9; --leading-en: 1.6; --leading-tight: 1.3; --measure-jp: 38em; /* 和文の行長 */ --measure-en: 65ch; /* 英文の行長 */ /* ---- spacing ----------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 160px; --space-12: 192px; /* ---- layout ------------------------------------------------------------ */ --gutter: clamp(16px, 4vw, 40px); --container: 72rem; /* 1152px */ --container-narrow: 44rem; /* 704px 読み物用 */ --radius: 0; /* 角丸は使わない（印刷物に倣う） */ --radius-card: 8px; /* 唯一の例外: カタログの Q&A カード */ --hairline: 1px; --rule: 1px; /* セクション色の細罫 */ --stroke: 1.5px; /* 線画 SVG の線幅 */ --transition: 160ms ease; /* ブレークポイント（参照用。@media では数値を直書きする） sm 40em = 640px / md 48em = 768px / lg 64em = 1024px / xl 80em = 1280px */ /* ---- semantic: neutral roles ------------------------------------------ */ --color-text: var(--ink); --color-text-2: var(--ink-2); --color-text-3: var(--ink-3); --color-bg: var(--paper); --color-bg-2: var(--paper-2); --color-line: var(--line); --color-link: var(--ink); /* リンクは下線で区別し、人物色は使わない */ --color-focus: var(--ink); /* フォーカスリングは無彩色 */ } /* ========================================================================== 人物エイリアス 既定: 英司（A）= 青、英治（S）= 朱赤。カタログ（2026-06）で確定 入れ替えは だけで済む（共通の緑は入れ替わらない） ========================================================================== */ :root, html[data-eiji-a="blue"] { --a-100: var(--blue-100); --a-200: var(--blue-200); --a-300: var(--blue-300); --a-400: var(--blue-400); --a-500: var(--blue-500); --a-600: var(--blue-600); --a-700: var(--blue-700); --a-800: var(--blue-800); --s-100: var(--red-100); --s-200: var(--red-200); --s-300: var(--red-300); --s-400: var(--red-400); --s-500: var(--red-500); --s-600: var(--red-600); --s-700: var(--red-700); --s-800: var(--red-800); } html[data-eiji-a="red"] { --a-100: var(--red-100); --a-200: var(--red-200); --a-300: var(--red-300); --a-400: var(--red-400); --a-500: var(--red-500); --a-600: var(--red-600); --a-700: var(--red-700); --a-800: var(--red-800); --s-100: var(--blue-100); --s-200: var(--blue-200); --s-300: var(--blue-300); --s-400: var(--blue-400); --s-500: var(--blue-500); --s-600: var(--blue-600); --s-700: var(--blue-700); --s-800: var(--blue-800); } /* ========================================================================== 人物の意味役割（部品はこちらを優先して使う） ========================================================================== */ :root { --color-a: var(--a-500); /* 地色、線画、ヘアライン */ --color-a-text: var(--a-600); /* 白地の色文字 */ --color-a-strong: var(--a-700); /* 淡色地の文字、強調 */ --color-a-tint: var(--a-100); /* 淡い地色 */ --color-a-tint-2: var(--a-200); --color-on-a: var(--paper); /* 500 地色の上の表示文字（24px 以上） */ --color-s: var(--s-500); --color-s-text: var(--s-600); --color-s-strong: var(--s-700); --color-s-tint: var(--s-100); --color-s-tint-2: var(--s-200); --color-on-s: var(--paper); /* 線画の色: ポスターでは青地に朱赤の線、朱赤地に白の線 */ --color-shape-on-a: var(--s-500); --color-shape-on-s: var(--paper); } /* ========================================================================== 共通エイリアス（M = 中央・仲介）: 寄稿、イベント、クレジット、対談の進行 data-eiji-a の入れ替えの影響を受けない ========================================================================== */ :root { --m-100: var(--green-100); --m-200: var(--green-200); --m-300: var(--green-300); --m-400: var(--green-400); --m-500: var(--green-500); --m-600: var(--green-600); --m-700: var(--green-700); --m-800: var(--green-800); --color-common: var(--m-500); /* 罫、印、24px 以上の表示文字 */ --color-common-text: var(--m-600); /* 白地の色文字 */ --color-common-strong: var(--m-700); /* 淡色地の文字、強調 */ --color-common-tint: var(--m-100); --color-common-tint-2: var(--m-200); --color-on-common: var(--paper); } /* ========================================================================== 声（voice）: 祖先の data-voice="a|s|m" で、見出し・ラベル・番号・罫の色が決まる 本文の色は変えない（本文は墨という決定）。既定（data-voice なし）は墨 部品は --voice / --voice-text / --voice-strong / --voice-tint を参照する ========================================================================== */ :root, [data-voice="ink"] { --voice: var(--color-line); /* 罫や印。無彩色 */ --voice-text: var(--ink-2); /* 小さな色文字の代わり */ --voice-strong: var(--ink); /* 見出し、ラベル */ --voice-tint: var(--paper-2); --voice-on: var(--paper); } [data-voice="a"] { --voice: var(--a-500); --voice-text: var(--a-600); --voice-strong: var(--a-700); --voice-tint: var(--a-100); --voice-on: var(--paper); } [data-voice="s"] { --voice: var(--s-500); --voice-text: var(--s-600); --voice-strong: var(--s-700); --voice-tint: var(--s-100); --voice-on: var(--paper); } [data-voice="m"] { --voice: var(--m-500); --voice-text: var(--m-600); --voice-strong: var(--m-700); --voice-tint: var(--m-100); --voice-on: var(--paper); }