/* * tokens.css — Design Token（指示書 §16）。 * * ここが色・余白・角丸・フォントの唯一の定義場所。ほかの CSS はこの変数だけを参照する。 * 色は theme.json の settings.color.palette と同じ値にしてある。 * 片方だけ変更すると、エディターとフロントで色がずれるので必ず両方直すこと。 * * 命名: --picico-<カテゴリ>-<役割> */ :root { /* ---- 色: ブランド（D-004 改訂案・水色基準） ---- */ /* * 主役はシアン。ただし STORK19 の #3bbad3 は白地に対して約 1.9:1 しかなく、 * 文字色・リンク色には使えない。STORK19 自身も「塗りの背景色」としてしか * 使っていなかったので、同じ設計にする。 * - 文字・リンク・白文字を載せる塗り → --picico-color-primary（濃いシアン） * - 見出し帯・タイトル背景など「濃い文字を載せる塗り」→ --picico-color-primary-fill */ --picico-color-primary: #0d6d80; /* 白と 5.97:1。文字・リンク・塗りボタン */ --picico-color-primary-dark: #0a5666; /* 白と 8.28:1。hover・チップの文字 */ --picico-color-primary-light: #3bbad3; /* STORK19 のシアンそのもの。線・帯・アイコンの地 */ --picico-color-primary-pale: #e0f0f5; /* 淡いシアンの面 */ /* * 暖色の差し色（STORK19 のヘッダーメニュー #e55420 / ヒーローボタン #f48275 の系統）。 * ブランド橙 #e8703a に白を載せると 3.08:1 で AA に届かない。 * 白文字を載せる面は accent-strong、文字色に使うときは accent-dark を使う。 */ --picico-color-accent: #e8703a; /* 濃い文字なら載せてよい（ink と 5.06:1） */ --picico-color-accent-dark: #c2551f; /* 白と 4.55:1。文字色・hover */ --picico-color-accent-strong: #bd5117; /* 白と 4.82:1。塗りボタン・バッジ */ --picico-color-accent-light: #f48275; /* STORK19 のコーラル。線・帯・淡い塗り */ --picico-color-accent-pale: #fdeee9; /* 淡いコーラルの面 */ /* * 補助色（信頼・落ち着き）。Phase 4 までのブランド緑 #2b7a5e を深いティールに寄せて残す。 * シアンと同系の色相でつながるので、色数を増やさずに階調だけ増える。 */ --picico-color-support: #1f6b58; /* 白と 6.36:1 */ --picico-color-support-dark: #154c3f; --picico-color-support-pale: #e4f0eb; /* ---- 色: ニュートラル（わずかに寒色へ振ってシアンとなじませる） ---- */ --picico-color-ink: #1c2529; --picico-color-ink-muted: #4f5d61; --picico-color-line: #c9dce2; --picico-color-surface: #fff; --picico-color-surface-alt: #eef5f7; --picico-color-surface-warm: #fff6f2; --picico-color-attention: #c0392b; /* ---- 色: 用途別エイリアス ---- */ --picico-color-text: var(--picico-color-ink); --picico-color-text-muted: var(--picico-color-ink-muted); --picico-color-background: var(--picico-color-surface); --picico-color-link: var(--picico-color-primary); --picico-color-link-hover: var(--picico-color-primary-dark); --picico-color-border: var(--picico-color-line); --picico-color-focus: var(--picico-color-accent-dark); --picico-color-on-primary: var(--picico-color-surface); --picico-color-on-accent: var(--picico-color-surface); /* 白文字を載せてよい橙。accent 塗りの面はこれを使う（Phase 4）。 */ --picico-color-accent-fill: var(--picico-color-accent-strong); /* * 明るいシアンの塗り（サイドバーのタイトル帯など）。白文字は載せない。 * 載せる文字は必ず --picico-color-on-primary-fill（= ink、6.80:1）を使う。 */ --picico-color-primary-fill: var(--picico-color-primary-light); --picico-color-on-primary-fill: var(--picico-color-ink); /* ドロワーの背景を覆う幕。rgb() の相対指定は使わず実値で持つ。 */ --picico-color-overlay: rgb(28 37 41 / 55%); /* * ---- 色: Legacy（D-004）---- * STORK19 時代の色。旧記事のクラス（has-mainttlbg-color など）を * assets/css/legacy.css で描画するときだけ使う。新規 UI では使わない。 */ --picico-legacy-stork-cyan: #3bbad3; --picico-legacy-stork-orange: #e55420; /* ---- 幅 ---- */ --picico-content-width: 760px; --picico-wide-width: 1200px; --picico-sidebar-width: 336px; --picico-gutter: 1rem; /* ---- 高さ・当たり判定 ---- */ --picico-header-height: 3.5rem; /* SP 56px（ブリーフ §3.1） */ --picico-header-height-pc: 4.5rem; /* PC 72px */ --picico-drawer-width: min(20rem, 88vw); --picico-tap-size: 2.75rem; /* 44px。指で押す要素の最小サイズ */ /* * 行の中に並ぶチップ・タグ・パンくずの最小の高さ（Phase 4）。 * 44px にすると行が分厚くなって読みづらいので、 * WCAG 2.5.8（AA, 24px）に余裕を持たせた 32px を下限にする。 */ --picico-tap-size-inline: 2rem; /* 32px */ /* * SP 固定 CTA フッター（D-019）の高さ。safe-area は含めない。 * body の下余白もこの値を基準にするので、増減はここだけで済ませる。 * レイアウト専用の値なのでエディター（theme.json）には持たせない。 */ --picico-mobile-cta-height: 3.75rem; /* 60px */ /* ---- 余白（theme.json の spacingSizes と対応） ---- */ --picico-space-xs: 0.5rem; --picico-space-sm: 1rem; --picico-space-md: 1.5rem; --picico-space-lg: 2rem; --picico-space-xl: 3rem; --picico-space-xxl: 4rem; --picico-space-3xl: 5rem; /* ---- 線 ---- */ --picico-border-width: 1px; --picico-border-width-accent: 4px; /* ---- アイコン（assets/svg/ は 24px グリッド・stroke 1.75） ---- */ --picico-icon-size: 1.5rem; /* ---- 角丸 ---- */ --picico-radius-sm: 6px; --picico-radius-md: 12px; --picico-radius-pill: 999px; /* ---- 影（theme.json の shadow presets と対応） ---- */ --picico-shadow-sm: 0 1px 2px rgb(28 37 41 / 10%); --picico-shadow-md: 0 2px 4px rgb(28 37 41 / 6%), 0 6px 16px rgb(28 37 41 / 12%); --picico-shadow-lg: 0 4px 10px rgb(28 37 41 / 8%), 0 14px 36px rgb(28 37 41 / 18%); /* ---- フォント（D-003: システムフォント。theme.json の fontFamilies と同じ値） ---- */ --picico-font-body: -apple-system, blinkmacsystemfont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "BIZ UDPGothic", meiryo, "Noto Sans JP", sans-serif; --picico-font-heading: var(--picico-font-body); --picico-font-mono: ui-monospace, sfmono-regular, consolas, "Liberation Mono", menlo, monospace; /* * 表示用（ヒーロー・セクション見出し・フッター見出し・サイト名）。 * D-009: 既定はゴシック。明朝は「選択可能なオプション」で、切替は * この CSS 変数の差し替えだけで済ませる（下の .pc-display-serif）。 * 記事本文の見出し（--picico-font-heading）は常にゴシックのまま。 */ --picico-font-display: var(--picico-font-body); /* * 明朝スタック（theme.json の fontFamilies「picico-display」と同じ値）。 * Windows は BIZ UDPMincho（10 1809 以降に同梱）を先に当てる。Yu Mincho の * 合成ボールドが痩せて見えるため。 */ --picico-font-display-serif: "Hiragino Mincho ProN", "BIZ UDPMincho", "Yu Mincho", yumincho, "Noto Serif JP", serif; /* ---- 文字サイズ（theme.json の fontSizes と同じ clamp 値） ---- */ /* * Phase 4 で xs・sm の下限を 1px ずつ上げた（320px で 12→13px / 14→15px）。 * 主な読み手が中高年で、パンくず・チップ・カード抜粋・サイドバーが * スマートフォンで読みにくかったため（指示書 §18）。 * 本文 md は 320px で 16px のまま。 */ --picico-font-size-xs: clamp(0.8125rem, 0.8rem + 0.06vw, 0.875rem); --picico-font-size-sm: clamp(0.9375rem, 0.91rem + 0.13vw, 1rem); --picico-font-size-md: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --picico-font-size-lg: clamp(1.125rem, 1.05rem + 0.38vw, 1.3125rem); --picico-font-size-xl: clamp(1.3125rem, 1.2rem + 0.63vw, 1.625rem); --picico-font-size-xxl: clamp(1.5rem, 1.3rem + 1vw, 2rem); --picico-font-size-display: clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem); /* ---- 行間・字間 ---- */ --picico-line-height-body: 1.9; --picico-line-height-heading: 1.4; --picico-line-height-tight: 1.25; --picico-letter-spacing-body: 0.02em; --picico-letter-spacing-heading: 0.01em; /* ---- ウェイト ---- */ --picico-font-weight-normal: 400; --picico-font-weight-bold: 700; /* ---- モーション ---- */ --picico-duration-fast: 120ms; --picico-duration-base: 200ms; --picico-easing: cubic-bezier(0.2, 0, 0.2, 1); /* ---- レイヤー ---- */ --picico-z-totop: 90; --picico-z-header: 100; --picico-z-nav: 110; --picico-z-overlay: 120; --picico-z-drawer: 130; --picico-z-skiplink: 200; } /* * D-009: カスタマイザー「見出しの書体」で明朝を選んだときだけ body に付くクラス。 * 表示用の変数を明朝スタックに差し替えるだけなので、使う側の CSS は変えなくてよい。 */ .pc-display-serif { --picico-font-display: var(--picico-font-display-serif); }