/* ================================================================= * _tokens.css — 共有デザイントークン（基底レイヤー） * * 検証段階。functions.php からは未 enqueue（本番未反映）。 * 設計: docs/cv-naming-tokens-plan-2026-06.md（二層構成） * * 役割（shared layer）: * - 汎用基底トークンを --cv-* で定義（色 / 余白 / 角丸 / 影 / 状態色 / Hero / nav）。 * - light = :root（既定） / dark = [data-theme="dark"]（ハーネス）と * [data-theme="spnc_dark"]（live 親テーマ Newscrunch）の併記。テーマ切替はこの層で担う。 * - ツール別アクセントは --c-*（例 --c-home）で持つ。 * ページ側（page layer, 例 cv-components.css 内の --hs-* 定義）は --hs-* を残し、 * その値を var(--cv-*) / var(--c-*) 参照に差し替える（ページ隔離＝調整の逃げ道を確保）。 * * 命名規約（確定・docs/token-open-decisions-2026-06.md）: * --cv-* = 汎用基底トークン * --c-* = ツール別アクセント色の正本 * * 注意: * - [data-theme] はサンプルではに付く。 * localStorage 保存・切替 JS は本 PR では実装しない（トークン設計のみ）。 * - 値は移送元（旧 verification/page-home-server.css＝現 cv-components.css の --hs-*）と完全一致させ、見た目を変えない。 * PR #52 の AA 値（dark text-subtle #8B92A0 / hero-sub #CDD2DA）も維持。 * ================================================================= */ /* ---- Light（既定） ---- */ :root { /* surfaces */ --cv-bg: #FAFAF7; --cv-bg-soft: #F5F2EC; --cv-surface: #FFFFFF; /* text */ --cv-text: #1A1A1A; --cv-text-muted: #4B5563; --cv-text-subtle: #6B7280; /* lines / elevation */ --cv-border: #E5E7EB; --cv-shadow: 0 2px 8px rgba(26, 26, 26, 0.08); --cv-shadow-hover: 0 6px 18px rgba(26, 26, 26, 0.12); /* note panel（状態色: 注記/観察メモ） */ --cv-note-bg: #FFFBEB; --cv-note-border: #D97706; --cv-note-text: #78350F; /* nav（導線） */ --cv-nav-bg: #F5F2EC; --cv-nav-link: #1A1A1A; /* hero */ --cv-hero-from: #2A2F44; --cv-hero-to: #455066; --cv-hero-text: #F5F5F0; --cv-hero-sub: #CDD2DA; /* PR #52: グラデ明端 5.3:1（AA） */ /* tool accent（ツール別・--c-* が正本） */ /* Home Server は赤を正本に確定（docs/token-open-decisions-2026-06.md）。 */ --c-home: #B91C1C; --c-home-soft: #FEF2F2; } /* ---- Dark ---- * ガードは 2 系統を併記（8-7b' / Fix-1）: * [data-theme="dark"] = 検証ハーネス（verification/sample-home-server.html のトグル） * [data-theme="spnc_dark"] = live の親テーマ Newscrunch のダークモード（に付与） * live は spnc_dark でしか発動しないため、これが無いと cv の dark token が * 本番で一度も有効にならない（8-7c の前提条件）。値は両系統で同一。 */ [data-theme="dark"], [data-theme="spnc_dark"] { /* surfaces */ --cv-bg: #0F1115; --cv-bg-soft: #181B22; --cv-surface: #1A1D24; /* text */ --cv-text: #E5E7EB; --cv-text-muted: #9CA3AF; --cv-text-subtle: #8B92A0; /* PR #52: card #1A1D24 上で 5.39:1（AA） */ /* lines / elevation */ --cv-border: #2A2F38; --cv-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); --cv-shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.55); /* note panel */ --cv-note-bg: #261C0E; --cv-note-border: #D97706; --cv-note-text: #FCD34D; /* nav */ --cv-nav-bg: #181B22; --cv-nav-link: #E5E7EB; /* hero */ --cv-hero-from: #15182A; --cv-hero-to: #2A3340; --cv-hero-text: #E5E7EB; --cv-hero-sub: #9CA3AF; /* tool accent */ --c-home: #F87171; --c-home-soft: #2A1A1A; }