/* ============================================================================= * ECport デザインシステム — トークン層 (v1) * ----------------------------------------------------------------------------- * 目的: 「一流のショップページ」品質の土台となるセマンティックトークンを定義し、 * 3つのカラーテーマ (modern / natural / luxury) を変数セットで切り替える。 * AI整形(フェーズ3)が寄せる"お手本"の実体でもある。 * * 読み込み順: styles.css の後（本ファイルで既存 ecomus グローバル変数を上書きする）。 * テーマ切替: で変数セットが差し替わる。 * 未指定時は modern を既定とする。 * * 設計: 既存 ecomus の :root(--primary/--main/--text/--line/--bg-*) へブリッジし、 * まずは配色を全体波及させる。タイポ/余白の実寸トークン化と、セクション blade の * トークンフォールバックは F1 で段階適用（本ファイルは定義＋配色ブリッジまで）。 * ========================================================================== */ /* ----------------------------------------------------------------------------- * 1. 基盤トークン（テーマ非依存の構造） * --------------------------------------------------------------------------- */ :root { /* タイポ: モジュラースケール 1.25。display/h1 はレスポンシブ縮小 */ --ecp-font-heading: var(--ecp-font-body); --ecp-font-body: "Noto Sans JP", "Inter", system-ui, -apple-system, sans-serif; --ecp-fs-display: clamp(2.5rem, 5vw + 1rem, 4rem); /* 40–64px */ --ecp-fs-h1: clamp(2rem, 3vw + 0.5rem, 2.4375rem); /* 32–39px */ --ecp-fs-h2: 1.9375rem; /* 31 */ --ecp-fs-h3: 1.5625rem; /* 25 */ --ecp-fs-body-lg: 1.25rem; /* 20 */ --ecp-fs-body: 1rem; /* 16 */ --ecp-fs-caption: 0.8125rem; /* 13 */ --ecp-lh-tight: 1.2; --ecp-lh-normal: 1.6; --ecp-tracking-wide: 0.02em; /* スペーシング: 8px ベース */ --ecp-space-1: 0.25rem; /* 4 */ --ecp-space-2: 0.5rem; /* 8 */ --ecp-space-3: 0.75rem; /* 12 */ --ecp-space-4: 1rem; /* 16 */ --ecp-space-5: 1.5rem; /* 24 */ --ecp-space-6: 2rem; /* 32 */ --ecp-space-7: 3rem; /* 48 */ --ecp-space-8: 4rem; /* 64 */ --ecp-space-9: 6rem; /* 96 */ --ecp-space-10: 8rem; /* 128 */ /* セクション上下余白は 48/64/96 に制約（ガタつき防止） */ --ecp-section-pad-sm: var(--ecp-space-7); --ecp-section-pad-md: var(--ecp-space-8); --ecp-section-pad-lg: var(--ecp-space-9); /* コンテンツ幅・ガター */ --ecp-container-wide: 1200px; --ecp-container-reading: 800px; --ecp-gutter: var(--ecp-space-5); /* 形状（角丸は各テーマで既定を上書き） */ --ecp-radius-none: 0; --ecp-radius-sm: 4px; --ecp-radius-md: 8px; --ecp-radius-lg: 16px; --ecp-radius-pill: 999px; --ecp-border-w: 1px; /* エレベーション */ --ecp-shadow-none: none; --ecp-shadow-e1: 0 1px 2px rgba(0, 0, 0, 0.05); --ecp-shadow-e2: 0 4px 16px rgba(0, 0, 0, 0.08); --ecp-shadow-e3: 0 12px 40px rgba(0, 0, 0, 0.16); } /* ----------------------------------------------------------------------------- * 2. カラーテーマ（変数セット） * セマンティックトークン: bg / surface / text / accent 系 * modern を既定（:root）とし、natural / luxury は属性セレクタで差し替える。 * --------------------------------------------------------------------------- */ /* テーマA: modern（ミニマル/万能・既定。data-ecp-theme 付与サイトのみ適用のオプトイン） */ [data-ecp-theme="modern"] { --ecp-bg: #ffffff; --ecp-surface: #f7f7f5; --ecp-surface-2: #efefec; --ecp-text-strong: #1a1a1a; --ecp-text: #333333; --ecp-text-muted: #6b6b6b; --ecp-border: #e5e5e3; --ecp-accent: #111111; --ecp-accent-hover: #000000; --ecp-on-accent: #ffffff; --ecp-success: #2f855a; --ecp-danger: #c0392b; --ecp-font-heading: "Inter", "Noto Sans JP", system-ui, sans-serif; --ecp-radius-default: var(--ecp-radius-md); } /* テーマB: natural（ナチュラル/クラフト・食品/雑貨/作家もの） */ [data-ecp-theme="natural"] { --ecp-bg: #faf7f0; --ecp-surface: #f0eadd; --ecp-surface-2: #e7dfce; --ecp-text-strong: #33302a; --ecp-text: #4a463d; --ecp-text-muted: #7a7266; --ecp-border: #ded6c6; --ecp-accent: #6b7a5a; /* オリーブ */ --ecp-accent-hover: #566249; --ecp-on-accent: #ffffff; --ecp-success: #4f7a4a; --ecp-danger: #b1503b; --ecp-font-heading: "Shippori Mincho", "Noto Serif JP", serif; --ecp-radius-default: var(--ecp-radius-lg); } /* テーマC: luxury（ラグジュアリー/プレミアム・高単価/ギフト） */ [data-ecp-theme="luxury"] { --ecp-bg: #111114; --ecp-surface: #1c1c22; --ecp-surface-2: #26262e; --ecp-text-strong: #f2f0ec; --ecp-text: #d9d6d0; --ecp-text-muted: #a8a5a0; --ecp-border: #2e2e36; --ecp-accent: #c6a567; /* シャンパンゴールド */ --ecp-accent-hover: #b3925a; --ecp-on-accent: #111114; --ecp-success: #6fae8b; --ecp-danger: #d47a6a; --ecp-font-heading: "Shippori Mincho", "Noto Serif JP", serif; --ecp-radius-default: var(--ecp-radius-sm); /* 高級感: 影を抑え、境界線で構造を出す */ --ecp-shadow-e2: 0 2px 8px rgba(0, 0, 0, 0.4); --ecp-shadow-e3: 0 8px 32px rgba(0, 0, 0, 0.55); } /* ----------------------------------------------------------------------------- * 3. 既存 ecomus グローバル変数へのブリッジ（styles.css :root を上書き） * これにより body の配色がテーマトークン基準で全体波及する。 * ※ セクションの背景色/余白は layout_json 生値のインライン style が優先されるため、 * 未指定時にトークンへフォールバックする改修は F1 で別途行う。 * ※ data-ecp-theme を持つ要素(body)配下のみ上書き＝既存サイトは無影響のオプトイン。 * --------------------------------------------------------------------------- */ [data-ecp-theme] { --primary: var(--ecp-accent); --main: var(--ecp-text-strong); --text: var(--ecp-text); --text-2: var(--ecp-text-muted); --text-3: var(--ecp-text-muted); --line: var(--ecp-border); --line-2: var(--ecp-border); --bg-1: var(--ecp-surface); --bg-2: var(--ecp-surface-2); } /* テーマC(luxury)ではページ地色が暗色になるため body 背景/文字もトークンへ寄せる */ body[data-ecp-theme="luxury"] { background-color: var(--ecp-bg); color: var(--ecp-text); }