/* ============================================================================= tokens.css — ベースデザイン（デザイントークン＝単一真実源） ----------------------------------------------------------------------------- ★ここがサイトの「ベースデザイン」です。事業ごとに変えるのは原則このファイルだけ。 色・余白・文字・角丸・影・重なり順・ブレークポイントを 1 か所にまとめています。 値を差し替えれば、サイト全体の見た目がまとめて変わります（CSS の他ファイルは触らない）。 構成は 02_conventions/css.md §1 に従い「2 段構成」です。 1) 原始トークン … パレット（色見本）と各種スケール（寸法の段階）。生の値。 2) 意味トークン … 用途で名付けたトークン（--color-primary など）。原始を参照する。 → 部品 CSS は必ずこの「意味トークン」を参照します（生の値は書かない）。 色は oklch()（知覚的に均一な現代色空間）で定義しています。 本文の文字色は背景に対して コントラスト比 4.5:1 以上 を満たします（accessibility.md §1.1）。 ダークモードにも対応（color-scheme + prefers-color-scheme）。 ============================================================================= */ @layer tokens { :root { /* === 1) 原始トークン（パレット／スケール）=============================== 事業のブランド色に合わせて、このパレットの値を差し替えてください。 */ /* --- パレット（色見本）: oklch(明度 彩度 色相) --- ★この案件の色は「決めた」のではなく「取り出した」ものです。 ココレのロゴと既存の図版 68 点から、実際に使われている色を抽出しました （根拠: workspace/design-base.md §2）。 ロゴのマーク #8A9ACE やわらかい青紫 → --color-iris-300 ロゴの文字 #717071 あたたかいグレー → --color-gray-* 見出し用SVG #5B6FB3 濃い青紫 → --color-iris-600（主役色） イラスト背景 #B5D575 黄緑 → --color-leaf-300（アクセント＝「育ち」） 青紫は「信頼（青）＋やわらかさ（紫）」＝専門的と対等を両立。 黄緑はテーマ「その時間は、この子が育つ時間」と直結します。 */ /* ブランド（青紫 iris）の濃淡。色相 270deg 前後 */ --color-iris-50: oklch(97% 0.012 270deg); --color-iris-100: oklch(93% 0.03 270deg); /* ⚠ iris-300 は「ロゴと図版の色」であって「文字の色」ではありません。 白背景でのコントラストは約 2.8:1 しかなく、文字に使うと読めません。 用途は 図版・区切り線・面 のみ（非テキスト 3:1 の対象にも使わない）。 */ --color-iris-300: oklch(69% 0.079 271deg); /* = #8A9ACE 装飾専用 */ --color-iris-600: oklch(56% 0.107 270deg); /* = #5B6FB3 主役色（白文字で 4.7:1） */ --color-iris-700: oklch(48% 0.11 270deg); /* 主役色の濃いめ（白背景に 6:1 前後） */ --color-iris-800: oklch(40% 0.10 270deg); /* アクセント（黄緑 leaf）＝「育ち」。色相 124deg */ --color-leaf-100: oklch(95% 0.04 124deg); --color-leaf-300: oklch(83% 0.129 124deg); /* = #B5D575 面として使う（上の文字は濃色） */ --color-leaf-600: oklch(52% 0.12 124deg); /* 文字として使えるまで濃くしたもの */ /* グレー（ロゴの #717071 に合わせ、ごくわずかに暖かい無彩色） */ --color-gray-0: oklch(100% 0 0deg); /* 純白 */ --color-gray-50: oklch(98.5% 0.003 300deg); --color-gray-100: oklch(96% 0.004 300deg); --color-gray-200: oklch(92% 0.004 300deg); --color-gray-300: oklch(87% 0.005 300deg); --color-gray-400: oklch(70% 0.005 300deg); --color-gray-500: oklch(55% 0.006 300deg); --color-gray-600: oklch(45% 0.006 300deg); /* 補助テキスト（白背景に 7:1 前後） */ --color-gray-700: oklch(37% 0.006 300deg); --color-gray-800: oklch(27% 0.006 300deg); /* 本文（白背景に 11:1 前後） */ --color-gray-900: oklch(20% 0.006 300deg); /* 見出し（白背景に 15:1 前後） */ --color-gray-950: oklch(16% 0.006 300deg); /* 状態色（白背景で本文として 4.5:1 以上になる明度に調整） */ --color-green-600: oklch(52% 0.13 150deg); /* 成功 */ --color-amber-700: oklch(55% 0.14 70deg); /* 注意 */ --color-red-600: oklch(53% 0.20 25deg); /* エラー／必須 */ /* --- スケール: 寸法（4px = 0.25rem を基準にした段階）--- */ --size-0: 0; --size-1: 0.25rem; /* 4px */ --size-2: 0.5rem; /* 8px */ --size-3: 0.75rem; /* 12px */ --size-4: 1rem; /* 16px */ --size-5: 1.5rem; /* 24px */ --size-6: 2rem; /* 32px */ --size-7: 3rem; /* 48px */ --size-8: 4rem; /* 64px */ --size-9: 6rem; /* 96px */ /* --- スケール: 角丸 --- */ --radius-1: 0.25rem; --radius-2: 0.5rem; --radius-3: 0.75rem; --radius-full: 9999px; /* === 2) 意味トークン（用途で名付ける）================================= 部品 CSS（base.css / components.css）はこちらだけを参照します。 */ /* --- 配色（ライトテーマの既定値）--- */ --color-bg: var(--color-gray-0); /* ページ背景 */ --color-surface: var(--color-gray-50); /* カード等の面 */ --color-surface-2: var(--color-gray-100); /* 一段沈んだ面 */ --color-border: var(--color-gray-300); /* 境界線（非テキスト 3:1 以上） */ --color-text: var(--color-gray-800); /* 本文（4.5:1 以上） */ --color-text-strong: var(--color-gray-900); /* 見出し・強調 */ --color-text-muted: var(--color-gray-600); /* 補助テキスト（4.5:1 以上） */ --color-text-on-primary: var(--color-gray-0); /* 主役色の上に乗る文字 */ --color-primary: var(--color-iris-600); /* 主役色（リンク・ボタン） */ --color-primary-strong: var(--color-iris-700); /* 主役色の濃いめ（ホバー） */ --color-primary-weak: var(--color-iris-50); /* 主役色の淡い面 */ --color-link: var(--color-iris-700); /* 本文中リンク（白背景に 4.5:1 以上） */ --color-link-hover: var(--color-iris-800); /* アクセント（「育ち」）。面＝leaf-300／文字＝leaf-600 を使い分ける。 ⚠ 主要な操作（相談ボタン）には使いません。重要な操作は主役色 1 色に統一します。 */ --color-accent: var(--color-leaf-300); /* 面・帯・図版の強調 */ --color-accent-text: var(--color-leaf-600); /* アクセント色を文字に使うとき */ --color-accent-weak: var(--color-leaf-100); /* 淡い面 */ --color-text-on-accent: var(--color-gray-900); /* アクセント面の上に乗る文字 */ /* 装飾専用（文字に使わない）。ロゴ・図版・区切りのための淡いブランド色。 */ --color-decor: var(--color-iris-300); --color-success: var(--color-green-600); --color-warning: var(--color-amber-700); --color-danger: var(--color-red-600); --color-focus: var(--color-iris-700); /* フォーカスリング（3:1 以上） */ /* --- 余白（スペーシング）--- */ --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: var(--radius-1); --radius-md: var(--radius-2); --radius-card: var(--radius-3); --radius-pill: var(--radius-full); /* --- 影（oklch + パーセント不透明度。alpha-value-notation=percentage に準拠）--- */ --shadow-1: 0 1px 2px oklch(0% 0 0deg / 8%), 0 1px 1px oklch(0% 0 0deg / 6%); --shadow-2: 0 4px 10px oklch(0% 0 0deg / 8%), 0 2px 4px oklch(0% 0 0deg / 6%); /* --- 重なり順（z-index）。場当たり的な巨大値を禁じ段階管理する --- */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 800; --z-modal: 1000; --z-toast: 1100; /* --- ブレークポイント（メディアクエリで使う基準。トークンとして明示）--- */ --bp-sm: 36rem; /* 576px 付近 */ --bp-md: 48rem; /* 768px 付近 */ --bp-lg: 64rem; /* 1024px 付近 */ /* --- レイアウト --- */ --layout-max-inline: 72rem; /* 本文コンテナの最大幅 */ --layout-gutter: var(--space-md); /* 左右の余白 */ /* --- タイポグラフィ --- */ /* 和文・欧文ともに読みやすいシステムフォント優先（外部フォント追加・追加接続なし） */ --font-sans: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif; --font-mono: ui-monospace, "SFMono-Regular", "Consolas", "Noto Sans Mono", monospace; /* 流体タイポ: clamp(最小, 推奨[vw含む], 最大)。中間幅でも連続的に変化する。 */ --text-sm: clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem); /* 本文はやや大きめ（17→18px）。読み手は疲れています——深夜、子どもが寝たあとに 読む人を想定しています（workspace/design-base.md §6）。 */ --text-base: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem); --text-md: clamp(1.125rem, 1.07rem + 0.3vw, 1.25rem); --text-lg: clamp(1.3rem, 1.2rem + 0.5vw, 1.5rem); --text-xl: clamp(1.6rem, 1.4rem + 1vw, 2rem); --text-2xl: clamp(2rem, 1.6rem + 2vw, 3rem); /* ヒーロー見出し */ --leading-tight: 1.25; --leading-normal: 1.8; /* 和文本文は行間広めが読みやすい（この案件は 1.8 に設定） */ /* --- モーション（reduced-motion で base.css が無効化する）--- */ --motion-fast: 120ms; --motion-base: 200ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* ブラウザ標準 UI（フォーム部品・スクロールバー）をライト/ダーク両対応に。 */ color-scheme: light dark; } /* === ダークテーマ ======================================================== OS / ブラウザの設定がダークのとき、意味トークンの「値だけ」を差し替える。 部品 CSS は一切変更しない（テーマ差分はここに集約）。 ダークでも本文 4.5:1 以上を満たす明度に調整済み。 */ @media (prefers-color-scheme: dark) { :root { --color-bg: var(--color-gray-950); --color-surface: oklch(21% 0.008 250deg); --color-surface-2: oklch(25% 0.008 250deg); --color-border: oklch(36% 0.008 250deg); /* 暗背景に 3:1 以上 */ --color-text: oklch(92% 0.006 250deg); /* 暗背景に 13:1 前後 */ --color-text-strong: oklch(97% 0.004 250deg); --color-text-muted: oklch(74% 0.008 250deg); /* 暗背景に 4.5:1 以上 */ --color-text-on-primary: oklch(16% 0.01 250deg); /* 暗背景では青紫が沈むため、明度を上げて 4.5:1 以上を確保する */ --color-primary: oklch(75% 0.10 270deg); --color-primary-strong: oklch(83% 0.09 270deg); --color-primary-weak: oklch(28% 0.05 270deg); --color-link: oklch(80% 0.10 270deg); --color-link-hover: oklch(88% 0.08 270deg); /* アクセント（育ち）: 暗背景では面を沈め、文字は明るい黄緑にする */ --color-accent: oklch(60% 0.13 124deg); --color-accent-text: oklch(84% 0.14 124deg); --color-accent-weak: oklch(28% 0.05 124deg); --color-text-on-accent: oklch(16% 0.01 124deg); --color-decor: oklch(60% 0.07 270deg); --color-success: oklch(74% 0.14 150deg); --color-warning: oklch(80% 0.13 70deg); --color-danger: oklch(72% 0.17 25deg); --color-focus: oklch(82% 0.10 270deg); --shadow-1: 0 1px 2px oklch(0% 0 0deg / 40%), 0 1px 1px oklch(0% 0 0deg / 30%); --shadow-2: 0 4px 10px oklch(0% 0 0deg / 45%), 0 2px 4px oklch(0% 0 0deg / 35%); } } }