/* ============================================================================= tokens.css — ベースデザイン（デザイントークン＝単一真実源） Hair Make & Spa Tento-（2026-10-14 CJ・旧サイト beauty_tcd054 の見た目を踏襲） ----------------------------------------------------------------------------- 根拠は workspace/design-base.md。旧サイトの実測値: ヘッダー／フッター／見出し箱 #111・反転文字 #fff・補助 #999・ボタン #333 ホバー／本文リンク #422414（焦げ茶）・見出しは明朝 500・本文はゴシック 本文コンテナ最大 1110px・角丸なし 追加は1色だけ: 黒い帯の上で使う「真鍮色」（舞台の照明＝裏テーマ「祝祭的」）。 構成は 02_conventions/css.md §1 の「2 段構成」。 1) 原始トークン … パレットと各種スケール（生の値） 2) 意味トークン … 用途で名付けたトークン。部品 CSS はこちらだけを参照する。 ダークモードは行わない（color-scheme: light）。黒と白の帯の切り替えそのものが この店の見た目なので、OS 設定で反転させない（css.md §5 は「行う場合」の規定）。 ============================================================================= */ @layer tokens { :root { /* === 1) 原始トークン ================================================== */ /* 無彩色（旧サイトは純粋な白黒グレー） */ --color-gray-0: oklch(100% 0 0deg); /* #fff */ --color-gray-50: oklch(97.5% 0 0deg); /* 面（ごく淡いグレー） */ --color-gray-100: oklch(94.5% 0 0deg); /* 旧サイトのスタッフ欄の面 */ --color-gray-200: oklch(89% 0 0deg); /* 区切り線（装飾） */ --color-gray-400: oklch(68% 0 0deg); /* #999 相当: 黒帯の補助文字（#111 に 6:1 前後） */ --color-gray-500: oklch(58% 0 0deg); /* 入力欄の枠（白に 3:1 以上） */ --color-gray-600: oklch(46% 0 0deg); /* 補助テキスト（白に 7:1 前後） */ --color-gray-800: oklch(32.1% 0 0deg); /* #333: ボタン（白文字 12:1 前後） */ --color-gray-900: oklch(21.8% 0 0deg); /* #111: 帯・見出し箱・本文（白に 18:1 前後） */ --color-gray-950: oklch(16% 0 0deg); /* 帯の一段沈んだ面 */ /* 焦げ茶（旧サイトのホバー色・本文リンク #422414） */ --color-brown-50: oklch(96% 0.012 55deg); --color-brown-700: oklch(30.5% 0.055 50deg); /* #422414（白に 14:1 前後） */ --color-brown-800: oklch(24% 0.045 50deg); /* 真鍮（追加色。黒帯の上だけで文字・線に使う。白地では装飾の線のみ） */ --color-brass-300: oklch(80% 0.085 80deg); /* #111 に 9:1 前後 */ --color-brass-500: oklch(66% 0.1 75deg); /* 白地の装飾線（文字には使わない） */ /* 状態色（白地で 4.5:1 以上） */ --color-green-700: oklch(48% 0.12 150deg); --color-amber-800: oklch(48% 0.11 65deg); --color-red-700: oklch(50% 0.19 27deg); /* 寸法（4px 基準） */ --size-0: 0; --size-1: 0.25rem; --size-2: 0.5rem; --size-3: 0.75rem; --size-4: 1rem; --size-5: 1.5rem; --size-6: 2rem; --size-7: 3rem; --size-8: 4rem; --size-9: 6rem; --size-10: 8.125rem; /* 130px: 旧サイトの見出し箱の一辺 */ /* === 2) 意味トークン ================================================== */ /* --- 配色（白地の本文エリア）--- */ --color-bg: var(--color-gray-0); --color-surface: var(--color-gray-50); --color-surface-2: var(--color-gray-100); --color-border: var(--color-gray-500); /* 入力欄など操作部品の枠（3:1 以上） */ --color-divider: var(--color-gray-200); /* 装飾の区切り線 */ --color-text: var(--color-gray-900); --color-text-strong: var(--color-gray-900); --color-text-muted: var(--color-gray-600); --color-text-on-primary: var(--color-gray-0); --color-primary: var(--color-gray-800); /* ボタン #333（旧サイトの予約ボタン） */ --color-primary-strong: var(--color-brown-700); /* ホバーで焦げ茶（旧サイトと同じ動き） */ --color-primary-weak: var(--color-brown-50); --color-link: var(--color-brown-700); --color-link-hover: var(--color-brown-800); --color-success: var(--color-green-700); --color-warning: var(--color-amber-800); --color-danger: var(--color-red-700); --color-focus: var(--color-brown-700); /* --- 配色（黒い帯: ヘッダー・フッター・見出し箱・ヒーロー）--- */ --color-band-bg: var(--color-gray-900); --color-band-surface: var(--color-gray-950); --color-band-text: var(--color-gray-0); --color-band-muted: var(--color-gray-400); --color-band-accent: var(--color-brass-300); /* 祝祭の光（細い線・小見出し・数字） */ --color-band-focus: var(--color-brass-300); /* 黒帯の上のフォーカスリング */ --color-band-line: var(--color-gray-800); /* 黒帯の中の区切り線 */ --color-accent-line: var(--color-brass-500); /* 白地の装飾線 */ /* --- 余白 --- */ --space-3xs: var(--size-1); --space-2xs: var(--size-2); --space-xs: var(--size-3); --space-sm: var(--size-4); --space-md: var(--size-5); --space-lg: var(--size-6); --space-xl: var(--size-7); --space-2xl: var(--size-8); --space-3xl: var(--size-9); /* --- 角丸（旧サイトは角丸なし。四角い箱が店の顔）--- */ --radius-sm: 0; --radius-md: 0; --radius-card: 0; --radius-pill: 0; /* --- 影（ほぼ使わない。浮かせる部品だけ）--- */ --shadow-1: 0 1px 2px oklch(0% 0 0deg / 10%); --shadow-2: 0 0 10px oklch(0% 0 0deg / 20%); /* 旧サイトの浮きバナーと同じ */ /* --- 重なり順 --- */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 800; --z-modal: 1000; --z-toast: 1100; /* --- ブレークポイント --- */ --bp-sm: 36rem; --bp-md: 48rem; /* 旧サイトのスマホ切替 767px 付近 */ --bp-lg: 62rem; /* 旧サイトのメニュー折りたたみ 991px 付近 */ /* --- レイアウト --- */ --layout-max-inline: 69.375rem; /* 1110px（旧サイトと同じ） */ --layout-gutter: var(--space-md); --heading-box-size: var(--size-10); /* 見出し箱 130px */ --header-offset: 8.5rem; /* 上に留まるヘッダーの高さ（ページ内リンクが隠れないように） */ --bottom-bar-offset: 0rem; /* 狭い画面で画面下に固定する2つのボタンの高さ */ /* --- タイポグラフィ（外部フォントは読み込まない＝表示が速い）--- */ /* 本文: 旧サイトと同じゴシック系。Windows で細く見えないよう Medium を先に置く */ --font-sans: "Segoe UI", "Yu Gothic Medium", "游ゴシック Medium", yugothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", meiryo, sans-serif; /* 見出し・ロゴ・メニュー: 旧サイトと同じ明朝系（太さ 500） */ --font-serif: "Times New Roman", "Yu Mincho", "游明朝", yumincho, "Hiragino Mincho ProN", "Noto Serif JP", serif; --font-mono: ui-monospace, "SFMono-Regular", "Consolas", "Noto Sans Mono", monospace; --font-weight-heading: 500; /* 文字サイズ（流体: clamp(最小, 推奨, 最大)） */ --text-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem); /* 見出し箱の和文（旧 12px） */ --text-sm: clamp(0.8125rem, 0.79rem + 0.15vw, 0.875rem); --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --text-md: clamp(1.125rem, 1.07rem + 0.3vw, 1.25rem); --text-lg: clamp(1.3rem, 1.2rem + 0.5vw, 1.625rem); /* ロゴ（旧 26px） */ --text-xl: clamp(1.75rem, 1.5rem + 1vw, 2.125rem); /* 見出し箱の英字（旧 34px） */ --text-2xl: clamp(1.375rem, 1rem + 2.6vw, 3.25rem); /* ヒーローのコピー */ --leading-tight: 1.3; --leading-normal: 1.9; /* 和文の本文は行間を広めに */ --tracking-heading: 0.04em; /* --- モーション（reduced-motion で base.css が無効化する）--- */ --motion-fast: 120ms; --motion-base: 300ms; /* 旧サイトのホバーと同じ 0.3 秒 */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); color-scheme: light; } /* 狭い画面: ヘッダーは黒帯1段、画面下に2つのボタンが固定される */ @media (width <= 767px) { :root { --header-offset: 4.5rem; --bottom-bar-offset: 3.5rem; } } }