/* ============================================================================ tokens.css — フォト活の色・余白・字の共通定義（2026-09-23） ★なぜ必要か★ 2026-09-23 時点で、アプリ内の色指定は 477 種類ありました。 同じ白でも #fff（191箇所）と #ffffff（90箇所）が混在し、 「主役の色」も3系統に分かれています。 #ff7454（珊瑚色）… Information / privacy_policy / site_info など紹介ページ #4a86e8（青） … 送信メール / パスワード再設定 / users/index / お問い合わせ #1d1d1d（黒） … 上部バー（7つの style ファイルに別々に書かれている） 結果として「紹介ページ」と「ログイン後の画面」が別サービスに見えます。 ★このファイルの値は、いま実際に使われている色そのままです★ 読み込んでも見た目は変わりません。まず変数を用意し、 各CSSの生の色を var(--pk-…) に置き換えていく足場です。 ★使い方★ 各ページの で、他のCSSより先に読み込む。 ★色を変えるときはこのファイルだけを直すこと★ 個別のCSSに生の #rrggbb を新しく書かない。 ============================================================================ */ :root { /* --- ブランド --------------------------------------------------------- 主役は珊瑚色に寄せる。青(#4a86e8)はメール等に残っているため、 当面は --pk-accent-alt として残し、置き換えは段階的に行う。 */ --pk-brand: #ff7454; --pk-brand-light: #ff8a6b; /* Information.php のグラデーション上側 */ --pk-brand-contrast: #ffffff; /* ブランド色の上に乗せる文字 */ --pk-accent-alt: #4a86e8; /* 旧・青系。新規利用は避ける */ /* --- 下地と面 --------------------------------------------------------- */ --pk-bg: #ffffff; /* ページの地 */ --pk-surface: #ffffff; /* カード・ナビの面 */ --pk-surface-sunken: #f0f0f0; /* 一段沈んだ面（141箇所で使用中） */ --pk-surface-muted: #f8f9fa; /* --- 文字 ------------------------------------------------------------- #333 → 本文 / #666 → 補助 / #8c8b8b → さらに弱い（100箇所） */ --pk-text: #333333; --pk-text-muted: #666666; --pk-text-subtle: #8c8b8b; --pk-text-on-dark: #ffffff; /* --- 罫線 ------------------------------------------------------------- */ --pk-border: #dddddd; --pk-border-strong: #cccccc; --pk-border-subtle: #eeeeee; /* --- 上部バー --------------------------------------------------------- */ --pk-topbar-bg: #1d1d1d; --pk-topbar-text: #ffffff; /* --- 下部ナビの現在地バー（既存の start-1〜5 の色） ------------------- */ --pk-nav-1: #ffc0cb; /* マイプロフィール */ --pk-nav-2: #c3e8ff; /* プロフィール一覧 */ --pk-nav-3: #eee8aa; /* みんなの投稿 */ --pk-nav-4: #c3ebc3; /* エモい＆映えスポット */ --pk-nav-5: #f7e9fd; /* 5つめ（戻る等） */ --pk-nav-link: #778899; /* --- 状態 ------------------------------------------------------------- */ --pk-danger: #d93025; --pk-success: #1e8e3e; --pk-warning: #f9ab00; /* --- 影 --------------------------------------------------------------- rgba(0,0,0,0.1) が 76箇所、0.2 が 32、0.3 が 30 で使われている。 */ --pk-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.10); --pk-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15); --pk-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.30); /* --- 角丸 ------------------------------------------------------------- */ --pk-radius-sm: 5px; --pk-radius-md: 8px; --pk-radius-lg: 12px; --pk-radius-pill: 999px; /* --- 余白（4pxきざみ） ------------------------------------------------ */ --pk-space-1: 4px; --pk-space-2: 8px; --pk-space-3: 12px; --pk-space-4: 16px; --pk-space-5: 24px; --pk-space-6: 32px; /* --- 文字サイズ ------------------------------------------------------- */ --pk-font-xs: 11px; --pk-font-sm: 13px; --pk-font-base: 15px; --pk-font-lg: 18px; --pk-font-xl: 24px; --pk-font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif; /* --- 下部ナビの高さ --------------------------------------------------- 固定フッターに隠れないよう、本文の下余白に使う。 */ --pk-bottomnav-height: 50px; /* --- 重なり順 --------------------------------------------------------- ★ばらばらの z-index を新しく書かないこと★ 下部ナビは 1000 と 1001 の2種類が混在していた（2026-09-23）。 */ --pk-z-bottomnav: 1000; --pk-z-overlay: 1100; --pk-z-modal: 1200; } /* 固定フッターに最後の要素が隠れるのを防ぐ共通クラス */ .pk-has-bottomnav { padding-bottom: calc(var(--pk-bottomnav-height) + env(safe-area-inset-bottom, 0px)); }