/* * UnderSoil デザイントークン — 単一情報源 (SSOT) * * 色は16進ではなく「スペース区切りのsRGBチャンネル」で保持している。 * これは Tailwind の プレースホルダと合成するためで、 * rgb(var(--c-brand-800) / ) * と定義することで不透明度修飾子が使える。16進のままではこれができない。 * * パレットは新ロゴの地層モチーフから導出した。ロゴ最下層＝土の下にあるもの * ＝地下水脈（帯水層）をアクセントに置き、ニュートラルもその色相へ僅かに * 寄せてある。スケールは OKLCH（知覚的に均等な明度軸）で生成し、各段の * コントラスト比を検証済み。 * * 参照元: * /tailwind.config.js … Tailwind ユーティリティの色定義（要 npm run build:css） * /css/site.css … 手書きCSSの色・モーション・影 */ :root { /* ---- Accent: 帯水層 / Aquifer (OKLCH hue 215°) ----------------------- 数値は白背景とのコントラスト比。文字に使えるのは600以降。 */ --c-accent-50: 238 249 252; /* #EEF9FC 1.07 : 淡い面・バッジ地 */ --c-accent-100: 219 242 247; /* #DBF2F7 1.16 */ --c-accent-200: 182 229 240; /* #B6E5F0 1.36 */ --c-accent-300: 131 209 228; /* #83D1E4 1.72 : グラデーション中間 */ --c-accent-400: 52 185 212; /* #34B9D4 2.32 : 装飾ドット */ --c-accent-500: 0 158 185; /* #009EB9 3.19 : ロゴ最下層・大きな面 */ --c-accent-600: 0 121 141; /* #00798D 5.10 : 文字・ボタン塗り（白・surface・surface-alt・accent-50すべてでAA） */ --c-accent-700: 0 100 117; /* #006475 6.82 : ホバー・淡い面上の文字 */ --c-accent-800: 0 79 93; /* #004F5D 9.22 */ --c-accent-900: 0 61 73; /* #003D49 11.91 */ /* ---- Danger: 入力エラー・必須マーク ----------------------------------- 状態色はこれ1段だけ。必須マーク・エラー文言・エラー時の枠線に使う。 枠線としても使うため、白地(5.62)・surface(5.40)の両方で 3:1 を超えている 必要がある（WCAG 1.4.11 非テキストコントラスト）。 */ --c-danger-600: 198 40 40; /* #C62828 5.62 : 必須マーク・エラー文言・エラー枠線 */ /* ---- Neutral: アクセントの色相へ僅かに寄せた灰 ----------------------- */ --c-brand-50: 247 251 252; /* #F7FBFC 1.04 : 面 (surface) */ --c-brand-100: 239 245 246; /* #EFF5F6 1.10 : 面 (surface-alt) */ --c-brand-200: 224 232 234; /* #E0E8EA 1.24 : 罫線・カード枠 */ --c-brand-300: 204 213 216; /* #CCD5D8 1.49 : 区切り線・装飾 */ --c-brand-400: 175 186 188; /* #AFBABC 1.99 */ --c-brand-500: 139 150 153; /* #8B9699 3.03 : プレースホルダ */ --c-brand-600: 103 113 116; /* #677174 5.01 : 補助テキスト（白・surface・surface-altすべてでAA） */ --c-brand-700: 80 91 93; /* #505B5D 7.01 : より強い補助テキスト */ --c-brand-800: 57 68 70; /* #394446 10.05 : 本文 */ --c-brand-900: 37 46 49; /* #252E31 13.87 : 見出し・フッター地 */ /* ---- Control: フォームコントロールの枠線 ------------------------------ 入力欄の輪郭を示す線。ニュートラルの段を直接指さず役割名で持つのは、 この線が「見た目の好み」ではなく WCAG 2.1 SC 1.4.11（非テキスト コントラスト）の 3:1 に縛られているためで、その制約を色スケール側の 都合と混ぜないようにしている。 測る相手は2つある。枠線は外側でカードの白に、内側で入力欄の塗り (surface) に接しており、両方で 3:1 を満たさなければ輪郭は成立しない。 当初 brand-500 を検討したが、白に対しては 3.03 で通る一方、塗りの surface に対しては 2.91 で基準を割っていた。白だけを見ていると 見落とす。 brand-500 … 白 3.03 / surface 2.91 → 不可 brand-600 … 白 5.01 / surface 4.81 → 採用 brand-600 への別名にしてあるのは、補助テキストと同じインクで引くため。 brand-600 自身は「白・surface・surface-alt・accent-50 のすべてで 4.5:1 以上」という、より厳しい制約の下で維持されているので、 そちらが守られている限りここの 3:1 も自動的に満たされる。 */ --c-control-border: var(--c-brand-600); /* ---- Typography ------------------------------------------------------ 字送りのスケール。従来、同じ「英大文字のラベル」という役割に対して 0.2em / 0.25em / 0.3em の3値が混在していた（セクションのアイブロウ、 フッターの見出し、ヒーローのキッカー）。役割が同じものは1値に統一する。 */ /* ロゴのワードマークと同じ書体。Archivo には和文グリフが無いので、 和文はフォールバック側（Noto Sans JP）が受け持つ。 */ --font-brand: "Archivo", "Noto Sans JP", sans-serif; --tracking-label: 0.25em; /* SERVICES / NAVIGATION / TECHNOLOGY FOR TOMORROW — 英数字のみのラベル専用 */ --tracking-ui: 0.05em; /* ナビゲーション・ボタンなど和欧混在のUIラベル */ /* 地の字送り（body に当てる）。 body には font-feature-settings: "palt" が掛かっており、約物（句読点・ 括弧）の前後のアキが詰まる。そこへ一律のトラッキングを足すと palt を 打ち消すことになるため、従来は 0.02em という中途半端な値で止まっていた。 palt は約物だけを詰めるものと割り切り、字面同士のアキはこの値で明示的に 作る、という分担にしてある。 */ --tracking-body: 0.04em; /* 和文見出しの行間。 Tailwind の text-* は font-size と line-height を対で持ち、text-4xl は 1.11、text-5xl / text-6xl に至っては 1.0 になる。欧文の見出しなら成立 するが、和文は仮名・漢字が字面いっぱいまで埋まるため行同士が接触する。 和文本文の行間は 1.5〜1.8 が読みやすいとされる。見出しは1行が短く、 字面も大きいのでそれより詰められるが、行同士が触れない下限として 1.4 を 採る。文字サイズが上がっても比率を変えないのは、段ごとに別の値を置くと どの段で崩れているのか追えなくなるため。 この値は /tailwind.config.js の fontSize スケール（text-2xl 〜 text-6xl）が 参照する。HTML 側に leading-* を並べる方式にしないのは、ブレークポイント 付きの text-* がメディアクエリ内に出力され、素の leading-* を後から 上書きしてしまうため（実際 lg:text-6xl が leading-tight を潰していた）。 */ --leading-heading: 1.4; /* 表示用（ディスプレイ）見出しの行間。 --leading-heading の 1.4 は「どの段でも行が接触しない下限」として全段に 一律で当てている値で、text-2xl（24px）のような小さい見出しを基準にしている。 ヒーローの h1 は lg で 60px あり、同じ 1.4 だと行間が 84px —— 字面の2倍近い空きが行と行のあいだに開いて、2行が1つの塊に見えなくなる。 文字が大きいほど必要な行間の「比率」は下がるので、ヒーロー専用に一段 詰めた値を持つ。1.25 でも 60px に対し 15px の空きが残り、仮名の払いや 「創」の点が上下の行と触れることはない。 使うのは site.css の .hero-title だけ。全段に効かせないこと。 */ --leading-display: 1.25; /* ---- Motion --------------------------------------------------------- duration は「変化の重さ」で選ぶ。Tailwind の duration-fast / -base / -slow ユーティリティもこの変数を参照するので、速度の調整はここ1箇所で効く。 */ --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 0.3s; --dur-base: 0.4s; --dur-slow: 0.7s; /* ---- Elevation ------------------------------------------------------ */ --shadow-header: 0 1px 3px rgb(0 0 0 / 0.04), 0 1px 2px rgb(0 0 0 / 0.02); --shadow-lift: 0 25px 50px rgb(var(--c-brand-800) / 0.1), 0 10px 20px rgb(var(--c-brand-800) / 0.04); --shadow-cta: 0 10px 25px rgb(var(--c-accent-600) / 0.25); }