/* ============================================================ tokens.css — ★このサイトの見た目の本体（採用デザイン） コイゴト 採用案:「花明かり」 ── 悩んで検索してきた読者を、明るい部屋で迎える。重さ・暗さで寄り添わない。 地は暖かい生成りと桜色、締めは深い紅梅（ローズ）、CTA だけ紅で灯す。 見出しは丸ゴシック（Zen Maru Gothic）で人の声の温度を出し、本文はゴシックで可読性を取る。 ※ 暗色の面・グラデーションのヒーロー・明朝ディスプレイは「AIっぽい既定値」かつ 喪の連想（紫の面）につながったため廃止（2026-07 ユーザーフィードバック）。 ※「ピンクのグラデーション」「クリーム地×テラコッタ」の既定値にも落とさない。 規律（CLAUDE.md / site_template_design_spec.md より）: - 色・サイズ・余白は必ずこのトークン経由。マジックナンバー禁止。 - --color-accent は CTA と最重要の強調のみ。本文リンク・装飾に使わない。 - 本文は17px下限。行間は広めに。 - 他サイトと同じ配色・フォントにしない。 ※ Web フォント（Noto Sans JP / Zen Old Mincho）は base.njk の で preconnect + 読み込む（CSS @import は使わない）。 ============================================================ */ :root { /* --- 色 --------------------------------------------------- */ --color-canvas: #f7f6f3; /* ページ地色＝中立の暖白。ピンクに寄せない（本文可読性優先） */ --color-bg: #ffffff; /* 紙。カード/CTA/目次/画像の地 */ --color-surface: #f4f2ee; /* インセット枠（key-points/th/pre）。中立の暖灰 */ --color-text: #3d312e; /* 焦茶がかった墨。白地で約13:1 */ --color-text-muted: #77655f; --color-brand: #9c4257; /* 紅梅。サイトの性格を決める主色 */ --color-brand-strong: #6f2f40; /* 深い紅梅（ワイン）。フッター/強い下線 */ --color-brand-tint: #f9e9ec; /* 桜色。目次現在地の背景など面用途のみ */ --color-accent: #c0344c; /* 紅。CTA/最重要強調のみ */ --color-accent-hover: #a02940; --color-accent-tint: #fdf2f0; /* CTAの面。強い枠より柔らかい面でCVゾーンを作る */ --color-accent-border: #f3d8d3;/* CTAの淡い枠。太い枠は「広告」の警戒感を生む */ --color-marker: #ffe3cf; /* 本文マーカー（杏）。accentは装飾に使わない */ --color-border: #e2ddd6; --color-border-strong: #c8c1b8;/* h2下線・強い区切り */ --color-warning: #995200; /* 注意喚起（法律・お金・安全の注記）。紅と混同しない琥珀 */ --color-warning-bg: #fbf3e8; /* --- タイポグラフィ（見出し=丸ゴシック / 本文=Noto Sans JP） --- */ --font-display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif; --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; --font-ui: "Noto Sans JP", system-ui, -apple-system, sans-serif; --text-xs: 0.875rem; /* 14px 注記。これ未満を使わない */ --text-sm: 0.9375rem; /* 15px 補助 */ --text-base: 1.0625rem; /* 17px 本文。20〜40代中心のため17pxを下限に */ --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 1.875rem; --text-3xl: 2.25rem; --text-4xl: 2.75rem; --leading-tight: 1.4; --leading-body: 1.95; /* 悩み読者は流し読みする。行間広めで息をつかせる */ --tracking-tight: 0.01em; /* 丸ゴシックはわずかに開けると柔らかく読める */ --tracking-wide: 0.08em; --weight-normal: 400; --weight-medium: 500; --weight-bold: 700; /* --- 余白（基準値の倍数で構成） -------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* --- 形状（柔らかさ。ただし pill 化はしない） -------------- */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --border-width: 1px; --shadow: none; /* --- 影（茶がかった淡い影。紙が机に浮く表現） -------------- */ --shadow-sm: 0 1px 2px rgb(111 47 64 / 0.05), 0 1px 4px rgb(111 47 64 / 0.06); --shadow-md: 0 2px 6px rgb(111 47 64 / 0.06), 0 8px 20px rgb(111 47 64 / 0.09); /* --- レイアウト ------------------------------------------- */ --measure: 46rem; /* 本文の最大行長（全角43文字前後。42remから拡大） */ --container: 68rem; --header-height: 3.75rem; --sidebar-width: 15rem; /* PC 追従目次カラム幅（240px） */ --col-gap: var(--space-8); --progress-height: 3px; /* --- モーション ------------------------------------------- */ --transition: 160ms ease; } /* タップ領域の下限。特に電話CTA。48px は交渉不可 */ :root { --tap-min: 48px; } @media (prefers-reduced-motion: reduce) { :root { --transition: 0ms; } }