/* ============================================================================= tokens.css — ベースデザイン（デザイントークン＝単一真実源） ----------------------------------------------------------------------------- ★ここがサイトの「ベースデザイン」です。事業ごとに変えるのは原則このファイルだけ。 色・余白・文字・角丸・影・重なり順・ブレークポイントを 1 か所にまとめています。 値を差し替えれば、サイト全体の見た目がまとめて変わります（CSS の他ファイルは触らない）。 構成は 02_conventions/css.md §1 に従い「2 段構成」です。 1) 原始トークン … パレット（色見本）と各種スケール（寸法の段階）。生の値。 2) 意味トークン … 用途で名付けたトークン（--color-primary など）。原始を参照する。 → 部品 CSS は必ずこの「意味トークン」を参照します（生の値は書かない）。 案件: 退院支援AI センパイナース（株式会社Le-caldo） 方針: workspace/design-base.md（2026-07-26）に対応。白基調＋濃いティール。 ⚠ ブランドのティール #2eb6aa（ロゴ・既存SVG図版の実測値）は白背景で 2.50:1 しかなく、 文字には使えません（基準 4.5:1／3:1）。そこで役割を分けています。 文字・操作 … --color-primary（#00655f 相当・6.94:1。ロゴと同じ色相 187deg） 面・図版 … --color-brand （#2eb6aa 相当・装飾専用。文字色・境界線に使わない） ※旧サイトのテーマ設定にあった #03ad80 は色相 166deg でロゴとずれていたため採用しません。 色は oklch()（知覚的に均一な現代色空間）で定義しています。 本文の文字色は背景に対して コントラスト比 4.5:1 以上 を満たします（accessibility.md §1.1）。 ダークモードにも対応（color-scheme + prefers-color-scheme）。 ============================================================================= */ @layer tokens { :root { /* === 1) 原始トークン（パレット／スケール）=============================== 事業のブランド色に合わせて、このパレットの値を差し替えてください。 */ /* --- パレット（色見本）: oklch(明度 彩度 色相) --- */ /* ブランド＝ティール。色相 186〜188deg はロゴ #2eb6aa の実測値に合わせている */ --color-teal-50: oklch(96.9% 0.012 187deg); /* 淡い面（セクションの帯） */ --color-teal-100: oklch(94.2% 0.02 187deg); /* 一段濃い淡面 */ --color-teal-400: oklch(61.6% 0.04 187deg); /* 境界線（白背景に 3.6:1） */ --color-teal-500: oklch(70.4% 0.113 186deg); /* ロゴ色 #2eb6aa …面・図版専用（2.5:1） */ --color-teal-600: oklch(51.9% 0.091 187deg); /* 白背景に 5.3:1 */ --color-teal-700: oklch(45.7% 0.079 188deg); /* 文字・ボタン（白背景に 6.9:1） */ --color-teal-800: oklch(39.5% 0.069 188deg); /* ホバー（白背景に 9.1:1） */ /* 第2の構造色＝ネイビー（既存SVG図版 #4765a9 系と揃う） */ --color-navy-600: oklch(51.6% 0.114 265deg); /* 白背景に 5.7:1 */ --color-navy-700: oklch(45.5% 0.103 265deg); /* 白背景に 7.4:1 */ /* グレー（わずかに青緑寄り。ティールと並べても濁らない） */ --color-gray-0: oklch(100% 0 0deg); /* 純白 */ --color-gray-50: oklch(98.5% 0.003 190deg); --color-gray-100: oklch(96% 0.004 190deg); --color-gray-200: oklch(92% 0.005 190deg); --color-gray-300: oklch(87% 0.006 190deg); --color-gray-400: oklch(70% 0.008 190deg); --color-gray-500: oklch(61% 0.012 192deg); --color-gray-600: oklch(52.8% 0.019 192deg); /* 補助テキスト（白背景に 5.3:1） */ --color-gray-700: oklch(37% 0.018 200deg); --color-gray-800: oklch(27% 0.02 230deg); --color-gray-900: oklch(19.1% 0.028 250deg); /* インク＝本文（白背景に 18.4:1） */ --color-gray-950: oklch(14% 0.026 250deg); /* 状態色（白背景で本文として 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 */ /* --- スケール: 角丸（FCサイトとの区別のため小さめに保つ）--- */ --radius-1: 0.125rem; --radius-2: 0.25rem; --radius-3: 0.375rem; --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-teal-50); /* セクションの帯（淡いミント） */ --color-surface-3: var(--color-teal-100); /* 一段濃い面 */ --color-border: var(--color-gray-300); /* 装飾的な区切り線 */ --color-border-strong: var(--color-teal-400); /* 識別に必要な線（3:1 以上） */ --color-text: var(--color-gray-900); /* 本文（18.4:1） */ --color-text-strong: var(--color-gray-900); /* 見出し・強調 */ --color-text-muted: var(--color-gray-600); /* 補助テキスト・出典（5.3:1） */ --color-text-on-primary: var(--color-gray-0); /* 主役色の上に乗る文字 */ --color-primary: var(--color-teal-700); /* 主役色（リンク・ボタン・強調） */ --color-primary-strong: var(--color-teal-800); /* 主役色の濃いめ（ホバー） */ --color-primary-weak: var(--color-teal-50); /* 主役色の淡い面 */ /* ブランド色。★面・図版・帯の装飾専用。文字色・境界線に使わないこと（2.50:1） */ --color-brand: var(--color-teal-500); --color-accent: var(--color-navy-700); /* 第2の構造色（罫線・数値ブロック） */ --color-accent-weak: var(--color-navy-600); --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-800); /* フォーカスリング（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-measure: 38em; /* 本文1行の最大長（和文で約38文字） */ --layout-gutter: var(--space-md); /* 左右の余白 */ /* --- タイポグラフィ --- */ /* 端末標準フォント優先（外部フォントの読み込み・追加接続なし＝表示が速い）。 関連サイト lecaldo-fc.com は Noto Sans JP を読み込むため、書体でも区別がつく。 */ --font-sans: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif; --font-mono: ui-monospace, "SFMono-Regular", "Consolas", "Noto Sans Mono", monospace; /* 流体タイポ: clamp(最小, 推奨[vw含む], 最大)。中間幅でも連続的に変化する。 本文は 17px から。読み手に50代以上の管理職が多く、小さい文字は読まれない。 */ --text-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem); /* 注記・出典 */ --text-base: clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem); /* 本文 17→18px */ --text-md: clamp(1.1875rem, 1.13rem + 0.3vw, 1.3125rem); --text-lg: clamp(1.375rem, 1.25rem + 0.55vw, 1.625rem); --text-xl: clamp(1.6875rem, 1.45rem + 1.1vw, 2.125rem); --text-2xl: clamp(2.125rem, 1.7rem + 2.1vw, 3.25rem); /* ヒーロー見出し */ /* 数値を大きく見せるための段（データ主役型レイアウトの要） */ --text-figure: clamp(2.25rem, 1.6rem + 3vw, 4rem); --leading-tight: 1.25; --leading-normal: 1.8; /* 和文本文は行間を広めに取らないと詰まって見える */ --weight-body: 400; --weight-bold: 700; --weight-heading: 800; /* 見出しは太く。数値と並べたときに芯が通る */ --tracking-tight: -0.02em; /* 見出しの字間をやや詰める */ --tracking-normal: 0; /* --- モーション（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(20% 0.022 250deg); --color-surface-2: oklch(23% 0.026 220deg); --color-surface-3: oklch(27% 0.028 210deg); --color-border: oklch(34% 0.016 200deg); /* 暗背景に 3:1 以上 */ --color-border-strong: oklch(52% 0.03 185deg); --color-text: oklch(93% 0.008 190deg); /* 暗背景に 14:1 前後 */ --color-text-strong: oklch(97% 0.005 190deg); --color-text-muted: oklch(75% 0.012 190deg); /* 暗背景に 4.5:1 以上 */ --color-text-on-primary: oklch(14% 0.026 250deg); /* 暗背景では主役色を明るめにして 4.5:1 以上を確保 */ --color-primary: oklch(76% 0.12 187deg); --color-primary-strong: oklch(84% 0.10 187deg); --color-primary-weak: oklch(26% 0.05 187deg); --color-brand: oklch(72% 0.14 186deg); --color-accent: oklch(78% 0.09 258deg); --color-accent-weak: oklch(68% 0.10 258deg); --color-link: oklch(78% 0.11 187deg); --color-link-hover: oklch(86% 0.09 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(84% 0.10 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%); } } }