/* ========================================================================== Public Reservation — Shared Design Tokens -------------------------------------------------------------------------- 設計の唯一の情報源。色・文字・余白・角丸・動きの「決めごと」はすべてここ。 各画面 / 各コンポーネントは、ここで定義した意味的トークンだけを参照する。 （生の #hex や px を components 側に書かないことが、統一感の担保になる） ========================================================================== */ :root { color-scheme: light dark; /* ====================================================================== 1. TYPOGRAPHY ====================================================================== */ /* SF Pro（Apple 環境）→ Hiragino Sans（日本語）の順で解決させる。 日本語と欧文で別のフォントが当たるため、和欧混植の重心が揃うよう 欧文を先に置く。 */ --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; /* タイプスケール — 9 段階のみ。これ以外のサイズは使わない。 大きい文字ほど字間を詰める（負のトラッキング）のが Apple の書体運用の核。 */ --size-display: clamp(2rem, 1.35rem + 2.7vw, 3rem); /* 32 → 48 */ --size-title-1: clamp(1.5rem, 1.25rem + 1.05vw, 1.9rem); /* 24 → 30 */ --size-title-2: 1.375rem; /* 22 */ --size-title-3: 1.125rem; /* 18 */ --size-body-lg: 1.0625rem; /* 17 — 既定の本文 */ --size-body: 1rem; /* 16 */ --size-callout: 0.9375rem; /* 15 */ --size-footnote: 0.8125rem; /* 13 */ --size-caption: 0.75rem; /* 12 */ --track-display: -0.028em; --track-title: -0.019em; --track-body: -0.008em; --track-caption: 0; --track-label: 0.06em; /* 全角小文字ラベル用 */ --leading-tight: 1.14; --leading-snug: 1.32; --leading-normal: 1.55; --leading-relaxed: 1.7; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ====================================================================== 2. SPACING — 4px ベースグリッド ====================================================================== */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ /* ====================================================================== 3. RADIUS — 4 段階のみ ====================================================================== */ --radius-xs: 6px; /* チェックボックスなど 24px 未満の部品 */ --radius-sm: 8px; /* バッジ・小タイル */ --radius-md: 12px; /* ボタン・入力・タイル */ --radius-lg: 18px; /* カード・パネル */ --radius-pill: 999px; /* ====================================================================== 4. SIZING ====================================================================== */ --control-h: 50px; /* 標準コントロール高（タッチ 44px 以上を確保） */ --control-h-sm: 38px; --control-h-lg: 56px; --touch-min: 44px; --measure: 34rem; /* 本文の可読幅 */ --page-form: 40rem; /* フォーム系ページの最大幅 */ --page-wide: 60rem; /* 広い版 */ --gutter: clamp(1.25rem, 0.75rem + 2.2vw, 2.5rem); --hairline: 1px; /* ====================================================================== 5. MOTION ====================================================================== */ --dur-fast: 140ms; --dur: 240ms; --dur-slow: 420ms; /* iOS のシート/遷移で使われる、減速が長く尾を引くカーブ。 「動きが上質に見える」ほぼ唯一の要因がこれ。 */ --ease: cubic-bezier(0.32, 0.72, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* ====================================================================== 6. COLOR — LIGHT（既定） -------------------------------------------------------------------- 原則: 面と文字はほぼ無彩色。アクセントは「選択・主行動・フォーカス」 の 3 用途のみ。画面内でアクセント色が占める面積は 5% を上限とする。 ====================================================================== */ /* — グレースケール原色 — */ --gray-0: #ffffff; --gray-50: #fbfbfd; --gray-100: #f5f5f7; --gray-150: #eeeef1; --gray-200: #e5e5ea; --gray-300: #d2d2d7; --gray-400: #aeaeb2; --gray-500: #86868b; --gray-600: #6e6e73; --gray-800: #3a3a3c; --gray-900: #1d1d1f; /* — 意味的トークン — */ --bg: var(--gray-0); --bg-sunken: var(--gray-100); /* カードの背後 */ --surface: var(--gray-0); --surface-2: var(--gray-100); /* 入力の内側・選択行 */ --surface-3: var(--gray-150); /* 3 段階すべてが「白（--surface）」と「薄グレー（--bg-sunken #F5F5F7）」の 両方の上で 4.5:1 を満たす明度に置いている。 Apple のシステム色（secondaryLabel #6E6E73 / tertiaryLabel #86868B）を そのまま使うと tertiary が 3.6:1 程度になり WCAG AA を満たさない。 予約システムは公の利用者が使うため、階調の忠実さより可読性を優先した。 実測（白 / 薄グレー）: 16.1・14.8 / 6.8・6.2 / 5.0・4.6 */ --text: var(--gray-900); /* 16.1:1 */ --text-2: #5c5c61; /* 6.8:1 — 補足・ラベル */ --text-3: #6f6f73; /* 5.0:1 — 最小の情報テキスト */ --text-on-accent: #ffffff; /* 曜日の色。土日を色分けするのは日本の予約 UI の慣習だが、 淡い青のままだと 4.5:1 を割るためテーマごとに値を持つ。 */ --weekday-sat: #2c6fc9; --weekday-sun: var(--danger); --line: rgba(0, 0, 0, 0.09); --line-strong: rgba(0, 0, 0, 0.16); /* accent : 文字・アイコン・罫線として使う紫（背景の上にのる） accent-solid: 面として塗る紫（この上に白文字がのる） ライトでは同値でよいが、ダークでは分離が必要になるため最初から 2 本持つ。 */ --accent: #6e3dff; --accent-solid: #6e3dff; --accent-hover: #5b2be8; --accent-press: #4a1fc9; --accent-tint: rgba(110, 61, 255, 0.09); --accent-tint-strong: rgba(110, 61, 255, 0.16); --success: #248a3d; --success-tint: rgba(36, 138, 61, 0.1); --danger: #d70015; --danger-tint: rgba(215, 0, 21, 0.08); --warning: #a05a00; --warning-tint: rgba(160, 90, 0, 0.09); --overlay: rgba(0, 0, 0, 0.32); --focus-ring: var(--accent); /* 影は「実際に浮いている層」だけに使う（モーダル・ポップオーバー・固定バー）。 カードや入力には一切使わない = フラットの定義。 */ --shadow-pop: 0 10px 30px -8px rgba(0, 0, 0, 0.16), 0 2px 8px -2px rgba(0, 0, 0, 0.08); --shadow-sheet: 0 24px 64px -12px rgba(0, 0, 0, 0.28), 0 8px 20px -8px rgba(0, 0, 0, 0.12); --shadow-bar: 0 -1px 0 0 var(--line); } /* ========================================================================== COLOR — DARK OS 設定に追随しつつ、[data-theme] による明示指定が常に勝つようにする。 ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #000000; --bg-sunken: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e; --surface-3: #3a3a3c; --text: #f5f5f7; --text-2: #a1a1a6; --text-3: #8e8e93; --weekday-sat: #7fb0ff; --weekday-sun: #ff7a70; --line: rgba(255, 255, 255, 0.12); --line-strong: rgba(255, 255, 255, 0.22); --accent: #a78bff; /* 暗い面の上で読める明度 */ --accent-solid: #7c4dff; /* 白文字を載せて 4.8:1 を確保する明度 */ --accent-hover: #8b5cff; --accent-press: #6e3dff; --accent-tint: rgba(139, 92, 255, 0.18); --accent-tint-strong: rgba(139, 92, 255, 0.28); --success: #30d158; --success-tint: rgba(48, 209, 88, 0.16); --danger: #ff453a; --danger-tint: rgba(255, 69, 58, 0.16); --warning: #ff9f0a; --warning-tint: rgba(255, 159, 10, 0.16); --overlay: rgba(0, 0, 0, 0.6); --shadow-pop: 0 10px 30px -8px rgba(0, 0, 0, 0.7); --shadow-sheet: 0 24px 64px -12px rgba(0, 0, 0, 0.8); } } :root[data-theme="dark"] { --bg: #000000; --bg-sunken: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e; --surface-3: #3a3a3c; --text: #f5f5f7; --text-2: #a1a1a6; --text-3: #8e8e93; --weekday-sat: #7fb0ff; --weekday-sun: #ff7a70; --line: rgba(255, 255, 255, 0.12); --line-strong: rgba(255, 255, 255, 0.22); --accent: #a78bff; --accent-solid: #7c4dff; --accent-hover: #8b5cff; --accent-press: #6e3dff; --accent-tint: rgba(139, 92, 255, 0.18); --accent-tint-strong: rgba(139, 92, 255, 0.28); --success: #30d158; --success-tint: rgba(48, 209, 88, 0.16); --danger: #ff453a; --danger-tint: rgba(255, 69, 58, 0.16); --warning: #ff9f0a; --warning-tint: rgba(255, 159, 10, 0.16); --overlay: rgba(0, 0, 0, 0.6); --shadow-pop: 0 10px 30px -8px rgba(0, 0, 0, 0.7); --shadow-sheet: 0 24px 64px -12px rgba(0, 0, 0, 0.8); }