/* ============================================================ ChocotSystem — Design Tokens このファイルが色・タイポ・余白の唯一の情報源（Single Source of Truth）。 Web サイト・管理画面・納品物の画面設計はすべてここを読み込んで使う。 使い方: .btn { background: var(--cs-color-brand); color: var(--cs-color-on-brand); } ============================================================ */ :root { /* -------------------------------------------------------- 0. 配色スキームの宣言 このブランドはクリーム地＋焦げ茶の「明るい紙」が前提。 ⚠️ これを書かないと、端末をダークモードにしている訪問者には ブラウザ（Chrome for Android など）が勝手に色を反転させる 「自動ダークモード」が働き、意図しない見た目で表示される。 `only light` が対応ブラウザでの明示的な拒否。1行目は非対応環境の保険。 -------------------------------------------------------- */ color-scheme: light; color-scheme: only light; /* -------------------------------------------------------- 1. カラープリミティブ（生の色。直接使わず、下の Semantic 経由で使う） -------------------------------------------------------- */ /* Chocot Brown — 社名の由来。ロゴ主色・見出し・本文の基準色 */ --cs-brown-900: #241A14; --cs-brown-800: #3E2B22; /* ★ブランド主色 */ --cs-brown-600: #5A4132; --cs-brown-400: #8A6A54; /* Apricot — ショコラの毛色。ブランドの識別色 */ --cs-apricot-700: #96601F; /* テキスト可（白背景 5.3:1） */ --cs-apricot-600: #C98B4E; /* ★サブ主色（面・図版向け） */ --cs-apricot-500: #E0A76A; /* ★シグネチャー（ロゴのカール） */ --cs-apricot-300: #F2C99A; --cs-apricot-100: #FAEBD9; /* Cream — 背景。紙のような温かい下地 */ --cs-cream-100: #FDFAF6; --cs-cream-200: #F8F1E7; /* ★基本背景 */ --cs-cream-300: #EFE5D6; /* Sky — ショコラの服の水色。"技術" 側のアクセント */ --cs-sky-700: #1F7A8C; /* テキスト・リンク可（白背景 5.0:1） */ --cs-sky-500: #6FC3D6; /* 面・図版向け */ --cs-sky-200: #CDEBF3; /* Neutral */ --cs-gray-900: #241A14; --cs-gray-700: #4A4340; --cs-gray-600: #6E6663; /* 補助テキスト（白背景 5.6:1） */ --cs-gray-500: #8C8481; /* ⚠️ 大きい文字・アイコン・罫線のみ（白 3.7:1）。本文に使わない */ --cs-gray-550: #736B68; /* 控えめな本文（白 5.2:1／クリーム 4.6:1）＝12px でも AA 合格 */ --cs-gray-300: #D7D0C9; --cs-gray-200: #E8E2DB; --cs-gray-100: #F3EFEA; --cs-white: #FFFFFF; /* Status */ --cs-success: #3F8A5F; --cs-warning: #C4841A; --cs-error: #B34734; --cs-info: var(--cs-sky-700); /* -------------------------------------------------------- 2. セマンティックカラー（実装ではこちらを使う） -------------------------------------------------------- */ --cs-color-brand: var(--cs-brown-800); --cs-color-on-brand: var(--cs-cream-200); --cs-color-accent: var(--cs-apricot-500); --cs-color-on-accent: var(--cs-brown-900); --cs-color-bg: var(--cs-cream-200); --cs-color-bg-raised: var(--cs-white); --cs-color-bg-sunken: var(--cs-cream-300); --cs-color-bg-inverse: var(--cs-brown-800); --cs-color-text: var(--cs-brown-800); --cs-color-text-muted: var(--cs-gray-600); /* ⚠️ gray-500 だと 12px の「目安」ラベル等が 3.7:1 で AA に届かない（2026-09-15 に実測）。 このトークンは style.css で 12〜14px の本文に8箇所使われているので gray-550 を指す。 */ --cs-color-text-subtle: var(--cs-gray-550); --cs-color-text-inverse: var(--cs-cream-200); --cs-color-link: var(--cs-sky-700); --cs-color-link-hover: var(--cs-brown-800); --cs-color-border: var(--cs-gray-300); --cs-color-border-strong:var(--cs-brown-400); --cs-color-focus: var(--cs-sky-700); /* -------------------------------------------------------- 3. タイポグラフィ 欧文・ロゴタイプ : Poppins (Google Fonts / OFL) 和文 : Noto Sans JP (Google Fonts / OFL) 数字・コード : JetBrains Mono (OFL) ※すべて商用利用可・埋め込み可 -------------------------------------------------------- */ --cs-font-sans: "Noto Sans JP", "Yu Gothic UI", "Hiragino Sans", "Meiryo", sans-serif; --cs-font-display: "Poppins", "Century Gothic", Futura, var(--cs-font-sans); --cs-font-mono: "JetBrains Mono", "Consolas", "SFMono-Regular", monospace; /* 1.250 (Major Third) スケール / 基準 16px */ --cs-text-xs: 0.75rem; /* 12px 注記・キャプション */ --cs-text-sm: 0.875rem; /* 14px 補助 */ --cs-text-base: 1rem; /* 16px 本文 */ --cs-text-lg: 1.25rem; /* 20px リード文 */ --cs-text-xl: 1.5625rem; /* 25px h3 */ --cs-text-2xl: 1.953rem; /* 31px h2 */ --cs-text-3xl: 2.441rem; /* 39px h1 */ --cs-text-4xl: 3.052rem; /* 49px ヒーロー */ --cs-leading-tight: 1.25; /* 見出し */ --cs-leading-snug: 1.5; --cs-leading-normal: 1.8; /* 和文本文は 1.8 が読みやすい */ --cs-tracking-tight: -0.02em; /* 大きい見出し */ --cs-tracking-normal: 0; --cs-tracking-wide: 0.08em; /* 小さいラベル・英字 */ --cs-weight-normal: 400; --cs-weight-medium: 500; --cs-weight-bold: 700; /* -------------------------------------------------------- 4. スペーシング（4px グリッド） -------------------------------------------------------- */ --cs-space-1: 0.25rem; /* 4px */ --cs-space-2: 0.5rem; /* 8px */ --cs-space-3: 0.75rem; /* 12px */ --cs-space-4: 1rem; /* 16px */ --cs-space-6: 1.5rem; /* 24px */ --cs-space-8: 2rem; /* 32px */ --cs-space-12: 3rem; /* 48px */ --cs-space-16: 4rem; /* 64px */ --cs-space-24: 6rem; /* 96px */ /* -------------------------------------------------------- 5. 角丸・影・その他 ロゴのカールに合わせ、角丸は「大きめ」に寄せるのがブランドらしさ -------------------------------------------------------- */ --cs-radius-sm: 6px; --cs-radius-md: 12px; --cs-radius-lg: 20px; --cs-radius-xl: 28px; --cs-radius-full: 9999px; --cs-shadow-sm: 0 1px 2px rgba(62, 43, 34, .08); --cs-shadow-md: 0 4px 12px rgba(62, 43, 34, .10); --cs-shadow-lg: 0 12px 32px rgba(62, 43, 34, .12); --cs-container: 1120px; /* コンテンツ最大幅 */ --cs-ease: cubic-bezier(.22, .61, .36, 1); } /* ------------------------------------------------------------ ダークモード ⛔ OS の設定に自動で追従させない（2026-09-15 確定）。 以前は `@media (prefers-color-scheme: dark)` でここを自動適用していたが、 スマホをダークモードにしている訪問者のサイトが実際に壊れていた。 理由: 下の色は Semantic トークンだけを塗り替えるのに対し、 site/assets/css/style.css と business/ の書式は `--cs-cream-300`（面）や `--cs-brown-800`（文字）といった プリミティブを直に使っている箇所が多い。プリミティブはダークでも 変わらないため、**半分だけ反転した状態**になる。実際に起きたこと: ・「納品後の保守サポート」の見出し → クリーム地に淡い文字色で消える ・保守プランの「1万円／3万円」 → 濃茶の面に濃茶の文字で読めない さらにロゴのワードマークは焦げ茶の PNG なので、濃色地では沈む （濃色地用は logo-wordmark-light.png と別ファイルになっている）。 ⭐ 対応するなら、トークンを足すだけでは足りない。 style.css のプリミティブ直書きを Semantic に寄せ、ロゴ画像も 切り替えたうえで、下のブロックを @media に戻すこと。 いまは明示的な opt-in（）でだけ効く。 サイトにテーマ切り替え UI は無いので、事実上どこからも発火しない。 ------------------------------------------------------------ */ :root[data-theme="dark"] { --cs-color-bg: #1C1512; --cs-color-bg-raised: #261D18; --cs-color-bg-sunken: #150F0D; --cs-color-text: #F2E9DE; --cs-color-text-muted: #B8ABA1; --cs-color-text-subtle: #8C8481; --cs-color-text-inverse: #241A14; --cs-color-brand: var(--cs-apricot-500); --cs-color-on-brand: #241A14; --cs-color-link: var(--cs-sky-500); --cs-color-border: #3B2C25; }