/* ===================================================================== tokens.css — デザイントークン（STRATA / 建築設計事務所） --------------------------------------------------------------------- 案件流用時に差し替えるのは「このファイル」と「assets/js/config.js」だけ。 生の色コード（#xxxxxx / rgb()）を書いてよいのは vault 全体でこのファイルのみ。 base.css / sections.css は必ず var(--*) か color-mix() で色を参照する。 注意: - --c-ink / --c-ink-muted は --c-bg に対してコントラスト比 4.5:1 以上を維持すること - ライトテーマは :root[data-theme="light"] のトークン再定義のみで実現している - index.html の は --c-bg と手動で同期させること ===================================================================== */ :root{ color-scheme: dark; /* ---- 色（ダーク基調が既定） ---- */ --c-bg: #0b0a09; /* ページ背景（温かみのある黒） */ --c-surface: #141210; /* カード・帯 */ --c-surface-2: #1c1916; /* 一段浮いた面 */ --c-ink: #f4f1ec; /* 本文。--c-bg に対し約 17:1 */ --c-ink-muted: #a9a196; /* 補助テキスト。--c-bg に対し約 7.6:1 */ --c-line: rgba(244,241,236,.10); /* 罫線（弱） */ --c-line-strong: rgba(244,241,236,.22); /* 罫線（強） */ --c-accent: #c98e5f; /* テラコッタ。--c-bg に対し約 6.9:1 */ --c-accent-2: #e3cba9; /* 砂色 */ --c-scrim: rgba(11,10,9,.66); /* 動く背景上のテキスト保護 */ /* ---- タイポ（clamp によるフルード） ---- */ --ff-sans: "Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif; --ff-serif: "Hiragino Mincho ProN","Yu Mincho","BIZ UDMincho","Noto Serif JP", Georgia, serif; /* 見出し用（エディトリアルなトーン） */ --ff-mono: "SFMono-Regular", Menlo, Consolas, "Osaka-Mono", monospace; /* アイブロウ／ラベル役はここに一本化する（p / span / dt で書体が割れるのを防ぐ）。 等幅は OS 依存なので、和欧が揃うセリフ体を小サイズ・広トラッキングで使う */ --ff-eyebrow: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif; --fs-display: clamp(2.4rem, 9vw, 8rem); /* 下限 2.4rem: 320px 幅での折り返し対策 */ --fs-h1: clamp(2rem, 5.5vw, 4rem); --fs-h2: clamp(1.5rem, 3.2vw, 2.5rem); --fs-h3: clamp(1.125rem, 1.8vw, 1.5rem); --fs-body: clamp(0.95rem, 1.05vw, 1.0625rem); --fs-small: 0.8125rem; /* --lh-tight / --tr-tight は欧文ロゴタイプ専用。和文見出しに使うと 全角グリフの上下が接触し字面が食い込むため、和文用を別に持つ */ --lh-tight: 1.02; --lh-heading: 1.2; --lh-body: 1.8; --lh-tight-ja: 1.22; --tr-tight: -0.03em; --tr-tight-ja: -0.005em; --tr-wide: 0.16em; /* ---- 余白（8px グリッド） ---- */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-16:64px; --sp-24:96px; --sp-32:128px; --container: 1280px; --gutter: clamp(20px, 5vw, 64px); /* ---- モーション ---- */ --ease-out-expo: cubic-bezier(.16,1,.3,1); --ease-in-out: cubic-bezier(.65,0,.35,1); --dur-fast:.2s; --dur-base:.5s; --dur-slow:.9s; --dur-reveal:1.1s; --radius: 2px; --z-header: 100; } /* ===================================================================== ライトテーマ（トークン再定義のみ。セクション CSS は触らない） 使い方: を付けるだけ ===================================================================== */ :root[data-theme="light"]{ color-scheme: light; --c-bg: #f2ede4; --c-surface: #faf7f1; --c-surface-2: #e7e0d3; --c-ink: #26211b; /* 約 12:1 */ --c-ink-muted: #675f53; /* 約 4.7:1 */ --c-line: rgba(38,33,27,.14); --c-line-strong: rgba(38,33,27,.30); --c-accent: #96491f; /* 約 4.8:1（テキスト使用可） */ --c-accent-2: #7d6a4f; --c-scrim: rgba(242,237,228,.72); }