/* ============================================================================= tokens.css — ベースデザイン（デザイントークン＝単一真実源） ----------------------------------------------------------------------------- ★ここがサイトの「ベースデザイン」です。事業ごとに変えるのは原則このファイルだけ。 色・余白・文字・角丸・影・重なり順・ブレークポイントを 1 か所にまとめています。 値を差し替えれば、サイト全体の見た目がまとめて変わります（他のCSSは触らない）。 トンマナ: C案「希望・生命力」＋「確か（信頼・実績）」（workspace/design-base.md） ブランド: ティール〜明るいグリーン（ロゴ #009F87 由来）＋ 若葉グリーン(アクセント)。 構成は 02_conventions/css.md §1 の「2 段構成」。 1) 原始トークン … パレット（色見本）と各種スケール。生の値。 2) 意味トークン … 用途で名付けたトークン（--color-primary 等）。部品CSSはこれだけ参照。 色は oklch()（知覚的に均一な現代色空間）。本文文字色は背景に 4.5:1 以上。 コントラスト設計: 明るい緑(500)は面・図版・差し色に使い、白文字を乗せるCTA・ 緑の文字/リンクには濃い緑(700/800)を使って 4.5:1 を確保する。 ダークモード対応（color-scheme + prefers-color-scheme）。 ============================================================================= */ @layer tokens { :root { /* === 1) 原始トークン（パレット／スケール）=============================== */ /* --- パレット: oklch(明度 彩度 色相) --- */ /* ブランドグリーン（ティール〜明るい緑）の濃淡 */ --color-green-50: oklch(97.5% 0.015 168deg); --color-green-100: oklch(96% 0.03 167deg); /* 淡い緑の面・区切り (#EAF7F2 相当) */ --color-green-200: oklch(92% 0.05 166deg); --color-green-300: oklch(85% 0.09 165deg); --color-green-400: oklch(78% 0.12 166deg); --color-green-500: oklch(70% 0.14 168deg); /* 基調の明るい緑 (#12B890 相当・面/図版/差し色) */ --color-green-600: oklch(60% 0.13 170deg); /* ブランド緑 (#009F87 相当) */ --color-green-700: oklch(51% 0.115 172deg); /* 白文字が乗る緑（CTA背景・緑テキスト。白に 4.5:1） */ --color-green-800: oklch(43% 0.10 173deg); /* ホバー・濃い緑 */ --color-green-900: oklch(35% 0.08 174deg); /* 若葉グリーン（アクセント＝生命力・成長） */ --color-leaf-100: oklch(96% 0.04 125deg); --color-leaf-500: oklch(74% 0.15 128deg); /* #7DC24B 相当（差し色） */ --color-leaf-600: oklch(58% 0.14 130deg); /* 若葉の濃いめ（白文字が乗る） */ /* グレー（わずかに緑を含む無彩色） */ --color-gray-0: oklch(100% 0 0deg); /* 純白 */ --color-gray-50: oklch(98.5% 0.004 165deg); --color-gray-100: oklch(96.5% 0.006 165deg); --color-gray-200: oklch(92% 0.008 165deg); --color-gray-300: oklch(87% 0.01 165deg); /* 境界線（非テキスト 3:1 以上） */ --color-gray-400: oklch(70% 0.012 166deg); --color-gray-500: oklch(55% 0.012 167deg); --color-gray-600: oklch(48% 0.012 168deg); /* 補助テキスト（白背景に 7:1 前後） */ --color-gray-700: oklch(38% 0.012 169deg); --color-gray-800: oklch(30% 0.012 170deg); /* 本文（白背景に 11:1 前後） */ --color-gray-900: oklch(23% 0.012 171deg); /* 見出し（白背景に 15:1 前後） */ --color-gray-950: oklch(18% 0.01 172deg); /* 状態色（白背景で本文として 4.5:1 以上） */ --color-green-success: oklch(52% 0.13 155deg); --color-amber-700: oklch(58% 0.13 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 */ /* --- スケール: 角丸（C案＝大きめ）--- */ --radius-1: 0.375rem; /* 6px */ --radius-2: 0.75rem; /* 12px */ --radius-3: 1.25rem; /* 20px（カード） */ --radius-4: 1.75rem; /* 28px */ --radius-full: 9999px; /* === 2) 意味トークン（用途で名付ける）================================= */ /* --- 配色（ライトテーマ既定）--- */ --color-bg: var(--color-gray-0); /* ページ背景 */ --color-bg-alt: var(--color-green-100); /* セクション区切りの淡い緑帯 */ --color-surface: var(--color-gray-0); /* カード面 */ --color-surface-2: var(--color-gray-100); /* 一段沈んだ面 */ --color-border: var(--color-gray-300); /* 境界線 */ --color-text: var(--color-gray-800); /* 本文 */ --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-green-600); /* ブランド緑（アイコン・塗り・図版） */ --color-primary-strong: var(--color-green-700); --color-primary-ink: var(--color-green-700);/* 白背景に乗る緑の文字・リンク（4.5:1） */ --color-primary-weak: var(--color-green-100); --color-accent: var(--color-leaf-500); /* 若葉の差し色 */ --color-accent-strong: var(--color-leaf-600); /* CTA（個別相談＝主CV）。背景は濃い緑で白文字のコントラストを確保 */ --color-cta-bg: var(--color-green-700); --color-cta-bg-hover: var(--color-green-800); --color-cta-text: var(--color-gray-0); --color-link: var(--color-green-700); --color-link-hover: var(--color-green-800); --color-success: var(--color-green-success); --color-warning: var(--color-amber-700); --color-danger: var(--color-red-600); --color-focus: var(--color-green-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); --space-section: clamp(2.5rem, 1.5rem + 5vw, 5rem); /* セクション上下 */ /* --- 角丸 --- */ --radius-sm: var(--radius-1); --radius-md: var(--radius-2); --radius-card: var(--radius-3); --radius-lg: var(--radius-4); --radius-pill: var(--radius-full); /* --- 影（やわらかく）--- */ --shadow-1: 0 1px 2px oklch(30% 0.02 170deg / 8%), 0 1px 1px oklch(30% 0.02 170deg / 6%); --shadow-2: 0 4px 12px oklch(30% 0.02 170deg / 10%), 0 2px 4px oklch(30% 0.02 170deg / 7%); --shadow-3: 0 12px 32px oklch(30% 0.02 170deg / 14%); /* --- 重なり順（z-index）--- */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; /* 固定ヘッダー */ --z-overlay: 800; --z-modal: 1000; --z-toast: 1100; /* --- ブレークポイント --- */ --bp-sm: 36rem; --bp-md: 48rem; --bp-lg: 64rem; --bp-xl: 80rem; /* --- レイアウト --- */ --layout-max-inline: 72rem; /* コンテナ最大幅 */ --layout-max-narrow: 46rem; /* 記事幅 */ --layout-gutter: clamp(1rem, 0.5rem + 3vw, 2rem); /* --- タイポグラフィ --- */ --font-sans: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "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); --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.25rem, 1.7rem + 2.6vw, 3.5rem); /* ヒーロー見出し */ --leading-tight: 1.25; --leading-heading: 1.4; --leading-normal: 1.8; /* 和文本文は行間広め */ --weight-normal: 400; --weight-medium: 500; --weight-bold: 700; /* --- モーション（reduced-motion で base.css が無効化）--- */ --motion-fast: 120ms; --motion-base: 220ms; --ease-standard: cubic-bezier(0.22, 1, 0.36, 1); /* アイコン（着色済みSVGデータURI。list-check 等の背景に使用） */ --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230C8168'%3E%3Cpath d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/%3E%3C/svg%3E"); /* ブラウザ標準UI（フォーム部品・スクロールバー）をライト/ダーク両対応に */ color-scheme: light dark; } /* === ダークテーマ ======================================================== OS/ブラウザがダークのとき、意味トークンの「値だけ」を差し替える。 部品CSSは変更しない。ダークでも本文 4.5:1 以上。 */ @media (prefers-color-scheme: dark) { :root { --color-bg: var(--color-gray-950); --color-bg-alt: oklch(24% 0.02 172deg); --color-surface: oklch(22% 0.012 172deg); --color-surface-2: oklch(26% 0.012 172deg); --color-border: oklch(38% 0.012 170deg); --color-text: oklch(92% 0.008 165deg); --color-text-strong: oklch(97% 0.006 165deg); --color-text-muted: oklch(75% 0.012 166deg); --color-text-on-primary: oklch(16% 0.02 172deg); /* 暗背景では緑を明るめにして 4.5:1 以上を確保 */ --color-primary: oklch(72% 0.14 168deg); --color-primary-strong: oklch(80% 0.13 168deg); --color-primary-ink: oklch(80% 0.13 168deg); --color-primary-weak: oklch(30% 0.06 170deg); --color-accent: oklch(80% 0.15 128deg); --color-accent-strong: oklch(72% 0.15 128deg); --color-cta-bg: oklch(66% 0.14 168deg); --color-cta-bg-hover: oklch(74% 0.13 168deg); --color-cta-text: oklch(16% 0.02 172deg); --color-link: oklch(80% 0.13 168deg); --color-link-hover: oklch(87% 0.11 168deg); --color-success: oklch(74% 0.14 155deg); --color-warning: oklch(80% 0.13 70deg); --color-danger: oklch(72% 0.17 25deg); --color-focus: oklch(82% 0.12 168deg); --shadow-1: 0 1px 2px oklch(0% 0 0deg / 40%), 0 1px 1px oklch(0% 0 0deg / 30%); --shadow-2: 0 4px 12px oklch(0% 0 0deg / 45%), 0 2px 4px oklch(0% 0 0deg / 35%); --shadow-3: 0 12px 32px oklch(0% 0 0deg / 50%); } } }