/* ================================================================ SAKUOLIA Design Tokens v1.2 叡智が月影に宿るとき — When Wisdom Dwells in Moonlight すべてのサイト（corporate / PHOTOGRAPH / FinScope / HIZUKE）が 参照する単一情報源（Single Source of Truth）です。 同梱の tokens.json は同じ値を W3C Design Tokens 形式で提供します。 v1.2 での例外: フォーカスリング色（(g)）のみ、明面の解決値を 金（--getsurin）から鋼青（--hagane）へアクセシビリティ是正 （WCAG 1.4.11）のため変更しました。それ以外の値の変更・削除は 行っておらず、追加・参照化・再構成のみで拡張しています。 ================================================================ */ /* ---------------------------------------------------------------- (a) ブランドパレット — 夜と月光の8色 名称は v1.0（brand-guideline.html）から継承。値の改変は不可。 ---------------------------------------------------------------- */ :root { --saku-night: #0B1220; /* 朔の夜 — 基調色。全サイト theme-color */ --shinya: #131C30; /* 深夜 — 夜面上の面・カード背景 */ --tsukikage: #3A4160; /* 月影 — セカンダリ・図版 */ --moon-silver: #C9D2E3; /* 月光の銀 — 罫線・弱いテキスト（夜面） */ --gekko: #F5F7FB; /* 月光 — ライト背景 */ --getsurin: #C7A96B; /* 月暈の金 — アクセント（面積5%未満） */ --hagane: #46608C; /* 鋼青 — リンク・操作要素 */ --yakikomi: #D96A20; /* 焼込みの橙 — プロダクト専用（HIZUKE系）。基幹UIでは不使用 */ /* -------------------------------------------------------------- (a2) 支色 — セマンティック層を支える6色（v1.2 で命名・昇格） いずれも v1.1 では (b)/(h) に無名の値として存在していたものを 固有の名を与えて独立トークン化した。値そのものは不変。 -------------------------------------------------------------- */ --yoizumi: #1B2233; /* 宵墨 — 明面テキスト */ --hakubo: #5A6478; /* 薄暮 — 明面弱テキスト */ --tangetsu: #DDE3EE; /* 淡月 — 明面罫線 */ --geppaku: #E8ECF5; /* 月白 — 夜面テキスト */ --usuzuki: #9AA5BD; /* 薄月 — 夜面弱テキスト */ --yoiyami: #26314B; /* 宵闇 — 夜面罫線 */ /* -------------------------------------------------------------- (b) セマンティックトークン — 明面（light）既定値 明面／夜面のどちらで解決されるかはテーマブロックが決める。 -------------------------------------------------------------- */ --bg: var(--gekko); --surface: #FFFFFF; --text: var(--yoizumi); --text-muted: var(--hakubo); --line: var(--tangetsu); --link: var(--hagane); --accent: var(--getsurin); /* -------------------------------------------------------------- (c) タイポグラフィ — 書体・字間・行間・スケール -------------------------------------------------------------- */ --font-display: "Zen Old Mincho", "Noto Serif JP", "Yu Mincho", serif; --font-body: "Zen Kaku Gothic New", "Noto Sans JP", "Yu Gothic", sans-serif; --font-data: "IBM Plex Mono", "Consolas", monospace; --font-logotype: "Zen Kurenaido", "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; /* SAKUOLIA ワードマーク専用。本文・見出しには使用しない */ --tracking-brand: 0.22em; /* ブランドシグネチャ・eyebrowラベル */ --tracking-wide: 0.10em; /* ボタン・タグ等の広めの字間 */ --tracking-display: 0.06em; /* Display見出しの字間 */ --leading-body: 1.9; /* 和文本文の呼吸 */ --leading-tight: 1.35; /* 見出し行間 */ /* タイプスケール（1.25 モジュラースケール） */ --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.25rem; --fs-xl: 1.563rem; --fs-2xl: 1.953rem; --fs-3xl: 2.441rem; --fs-4xl: 3.052rem; --fs-display: clamp(2rem, 5vw, 3.4rem); /* 流動的なヒーロー見出し */ /* -------------------------------------------------------------- (d) スペース — 8pxグリッド（4pxは例外的最小単位） -------------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px; --container: 1040px; /* -------------------------------------------------------------- (e) 形状・エレベーション -------------------------------------------------------------- */ --radius: 2px; /* 静かな直線基調。角丸はほぼ使わない */ --radius-lg: 6px; --radius-pill: 999px; /* 丸型CTA・ピルタグ・言語トグル用 */ --hairline: 1px solid var(--line); --shadow-moon: 0 8px 32px rgba(11, 18, 32, 0.10); --shadow-night: 0 8px 32px rgba(0, 0, 0, 0.45); /* -------------------------------------------------------------- (f) モーション — 月の満ち欠けのように控えめに -------------------------------------------------------------- */ --ease: cubic-bezier(.22, .6, .2, 1); --dur-fast: 160ms; --dur: 320ms; --dur-slow: 560ms; /* -------------------------------------------------------------- (g) フォーカスリング — キーボード操作の可視化 使用例: outline: var(--focus-ring); outline-offset: 3px; 色は明面／夜面で解決値が変わる（非テキストコントラスト WCAG 1.4.11 の 3:1 基準を満たす色を面ごとに選定）。 明面 = 鋼青（--hagane）。金（--getsurin）は明面で2.1:1と 基準未達のため採用しない。夜面 = 月暈の金（--getsurin、8.31:1）。 -------------------------------------------------------------- */ --focus-ring-color: var(--hagane); /* 明面 — 鋼青（非テキスト3:1基準を満たす。金は明面で2.1:1のため不可） */ --focus-ring: 2px solid var(--focus-ring-color); } /* ------------------------------------------------------------------ (h) 夜面テーマ — ヒーロー・フッター・強調面で使用 `[data-theme="night"]`（属性指定）と `.theme-night`（クラス指定）の 両方をサポートし、既存実装（brand-guideline.html 等）との互換を保つ。 ------------------------------------------------------------------ */ [data-theme="night"], .theme-night { --bg: var(--saku-night); --surface: var(--shinya); --text: var(--geppaku); --text-muted: var(--usuzuki); --line: var(--yoiyami); --link: var(--moon-silver); --focus-ring-color: var(--getsurin); /* 夜面 — 月暈の金（8.31:1） */ } /* ------------------------------------------------------------------ (i) プロダクトアクセント — サイトごとの --accent 上書き `data-product` 属性を持つ祖先要素配下でアクセント色が切り替わる。 ------------------------------------------------------------------ */ [data-product="corporate"] { --accent: var(--getsurin); } /* コーポレート＝月暈の金 */ [data-product="photograph"] { --accent: var(--moon-silver); } /* PHOTOGRAPH＝月光の銀 */ [data-product="finscope"] { --accent: var(--hagane); } /* FinScope＝鋼青 */ [data-product="hizuke"] { --accent: var(--yakikomi); } /* HIZUKE＝焼込みの橙 */ /* ------------------------------------------------------------------ (j) ブレークポイント（参考値・コメントのみ） CSS変数はメディアクエリの条件式には使用できないため、実装側では 下記の値をそのまま @media (min-width / max-width) に記述すること。 480px … 携帯（縦）／ギャラリー1列 720px … タブレット／ヘッダー折返し・ギャラリー2列 1040px … コンテナ最大幅（--container と一致） ------------------------------------------------------------------ */