/* ============================================================================= tokens.css — ベースデザイン（デザイントークン＝単一真実源） ----------------------------------------------------------------------------- ★ここがサイトの「ベースデザイン」です。事業ごとに変えるのは原則このファイルだけ。 色・余白・文字・角丸・影・重なり順・ブレークポイントを 1 か所にまとめています。 値を差し替えれば、サイト全体の見た目がまとめて変わります（CSS の他ファイルは触らない）。 lecaldo.com のベースデザイン（workspace/design-base.md 2026-07-07）: - 主役色: ロゴの深い青緑（ティール）#036962 ≈ oklch(47% 0.081 187deg) - 印象: 誠実／端正／成長感。装飾は控えめ、余白と事実で語る - 見出し: システム明朝（--font-heading）／本文: システムゴシック 構成は 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) 原始トークン（パレット／スケール）=============================== ブランド色 = 旧サイトロゴの深い青緑（hue 187deg）。 */ /* --- パレット（色見本）: oklch(明度 彩度 色相) --- */ /* ブランド（青緑・ティール系）の濃淡 */ --color-teal-50: oklch(97.5% 0.012 187deg); --color-teal-100: oklch(93% 0.03 187deg); --color-teal-600: oklch(47% 0.081 187deg); /* 主役色 ≈ #036962（白文字で 7:1 前後） */ --color-teal-700: oklch(41% 0.075 187deg); /* 主役色の濃いめ（ホバー等） */ --color-teal-800: oklch(35% 0.065 187deg); /* グレー（青緑がかった無彩色）の濃淡 */ --color-gray-0: oklch(100% 0 0deg); /* 純白 */ --color-gray-50: oklch(98.5% 0.003 200deg); /* 旧サイト #f4f8fa の系譜 */ --color-gray-100: oklch(96% 0.004 200deg); --color-gray-200: oklch(92% 0.005 200deg); --color-gray-300: oklch(87% 0.006 200deg); --color-gray-400: oklch(70% 0.008 200deg); --color-gray-500: oklch(55% 0.01 200deg); --color-gray-600: oklch(45% 0.01 200deg); /* 補助テキスト（白背景に 7:1 前後） */ --color-gray-700: oklch(37% 0.01 200deg); --color-gray-800: oklch(27% 0.01 200deg); /* 本文（白背景に 11:1 前後） */ --color-gray-900: oklch(20% 0.01 200deg); /* 見出し（白背景に 15:1 前後） */ --color-gray-950: oklch(16% 0.01 200deg); /* 状態色（白背景で本文として 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-teal-600); /* 主役色（リンク・ボタン） */ --color-primary-strong: var(--color-teal-700); /* 主役色の濃いめ（ホバー） */ --color-primary-weak: var(--color-teal-50); /* 主役色の淡い面 */ --color-link: var(--color-teal-700); /* 本文中リンク（白背景に 4.5:1 以上） */ --color-link-hover: var(--color-teal-800); --color-success: var(--color-green-600); --color-warning: var(--color-amber-700); --color-danger: var(--color-red-600); --color-focus: var(--color-teal-700); /* フォーカスリング（3:1 以上） */ /* 反転面（暗色フッター等）。ライト/ダーク共通の深い青緑 */ --color-bg-inverse: oklch(24% 0.05 187deg); --color-bg-inverse-2: oklch(30% 0.05 187deg); /* 反転面上のホバー */ --color-text-inverse: oklch(94% 0.01 187deg); /* 反転面上の本文（10:1 以上） */ --color-link-inverse: oklch(82% 0.06 187deg); /* 反転面上のリンク（7: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; /* 見出し: システム明朝（誠実・端正の要）。ゴシックに戻す場合はこの1行を --font-sans と同値に */ --font-heading: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "Noto Serif JP", "BIZ UDMincho", 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); --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.5rem); --text-xl: clamp(1.6rem, 1.4rem + 1vw, 2rem); --text-2xl: clamp(2rem, 1.6rem + 2vw, 3rem); /* 大見出し */ --text-3xl: clamp(2.4rem, 1.7rem + 3.4vw, 4.2rem); /* ディスプレイ（ヒーローの主張） */ --leading-tight: 1.25; --leading-normal: 1.7; /* 和文本文は行間広めが読みやすい */ /* --- モーション（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.01 200deg); --color-surface-2: oklch(25% 0.01 200deg); --color-border: oklch(36% 0.01 200deg); /* 暗背景に 3:1 以上 */ --color-text: oklch(92% 0.008 200deg); /* 暗背景に 13:1 前後 */ --color-text-strong: oklch(97% 0.005 200deg); --color-text-muted: oklch(74% 0.01 200deg); /* 暗背景に 4.5:1 以上 */ --color-text-on-primary: oklch(16% 0.02 187deg); /* 暗背景では主役色を明るめにして 4.5:1 以上を確保 */ --color-primary: oklch(72% 0.09 187deg); --color-primary-strong: oklch(80% 0.08 187deg); --color-primary-weak: oklch(28% 0.04 187deg); --color-link: oklch(78% 0.08 187deg); --color-link-hover: oklch(86% 0.07 187deg); --color-success: oklch(74% 0.14 150deg); --color-warning: oklch(80% 0.13 70deg); --color-danger: oklch(72% 0.17 25deg); --color-focus: oklch(80% 0.08 187deg); --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%); } } }