/* ============================================================ tokens.css — ★このサイトの見た目の本体（採用デザイン） nemurihint.com 採用案:「月夜の藍 × 行灯のあかり」 ── 深夜0〜2時、布団の中でスマホを見ている読者が基準。 昼は夜明け前の空のような淡い藍グレー、夜はまぶしくない深藍の紙面。 CTA/最重要の強調だけ、行灯のような温かい琥珀色で立てる。 角丸は大きめに取り、寝具のような柔らかい手触りにする。 規律（CLAUDE.md / site_template_design_spec.md / サイト設計書より）: - 色・サイズ・余白は必ずこのトークン経由。マジックナンバー禁止。 - --color-accent は CTA と最重要の強調のみ。本文リンク・装飾に使わない。 - ダークモードは装飾ではなく機能（深夜のベッドで白背景は目に刺さる）。 prefers-color-scheme で自動切替。**削除不可**。 - 本文17px以上・行間1.8以上（横になった姿勢で読むため）。 - 姉妹サイト（sumaisetsubi 等）と同じ配色・フォントにしない。 ※ Web フォント（Zen Maru Gothic / Noto Sans JP）は base.njk の で preconnect + 読み込む（CSS @import は使わない）。 ============================================================ */ :root { /* --- 色（ライト＝夜明け前の空の色調） ---------------------- */ --color-canvas: #eef1f6; /* ページ地色＝「空」。紙(bg)をこの上に浮かせる */ --color-bg: #ffffff; /* 紙。カード/CTA/目次の地 */ --color-surface: #f3f5fa; /* インセット枠（key-points/th/pre） */ --color-text: #1c2433; /* 藍墨。canvas上で約13:1 */ --color-text-muted: #52607a; --color-brand: #3c4f76; /* 月夜の藍。サイトの性格を決める主色 */ --color-brand-strong: #232c45; /* 濃藍。フッター/強い下線 */ --color-brand-tint: #e8ecf5; /* 淡藍。目次現在地の背景など面用途のみ */ --color-accent: #a15c00; /* 行灯の琥珀。CTA/最重要強調のみ */ --color-accent-hover: #7f4800; --color-accent-tint: #fbf5ec; /* CTAの面。強い枠より柔らかい面でCVゾーンを作る */ --color-accent-border: #eeddc4;/* CTAの淡い枠。太い枠は「広告」の警戒感を生む */ --color-marker: #fbeec9; /* 本文マーカー（月あかり色）。accentは装飾に使わない */ --color-border: #d7dde8; --color-border-strong: #b9c2d2;/* h2下線・強い区切り */ --color-warning: #a33a2a; /* 安全上の注意（電気毛布・暖房器具等） */ --color-warning-bg: #faf0ee; /* --- タイポグラフィ（見出し=丸ゴシックで夜の柔らかさ、本文=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 本文。横になった姿勢で読むための下限 */ --text-lg: 1.25rem; --text-xl: 1.4375rem; --text-2xl: 1.75rem; --text-3xl: 2.125rem; --text-4xl: 2.625rem; --leading-tight: 1.4; --leading-body: 1.9; /* 行間1.8以上（設計書の必須要件） */ --tracking-tight: -0.01em; --tracking-wide: 0.1em; --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; /* --- 形状（寝具のような柔らかさ。角を立てない） ----------- */ --radius-sm: 6px; /* チップ・小要素 */ --radius: 10px; --radius-lg: 16px; --border-width: 1px; --shadow: none; /* --- 影（紙が空に浮く。藍色の淡い影） ---------------------- */ --shadow-sm: 0 1px 2px rgb(35 44 69 / 0.05), 0 1px 3px rgb(35 44 69 / 0.07); --shadow-md: 0 2px 6px rgb(35 44 69 / 0.06), 0 6px 18px rgb(35 44 69 / 0.09); /* --- レイアウト ------------------------------------------- */ --measure: 42rem; /* 本文の最大行長（全角40〜45文字相当） */ --container: 68rem; --header-height: 3.75rem; --sidebar-width: 15rem; /* PC 追従目次カラム幅（240px） */ --col-gap: var(--space-8); --progress-height: 3px; /* --- モーション ------------------------------------------- */ --transition: 160ms ease; } /* タップ領域の下限。48px は交渉不可 */ :root { --tap-min: 48px; } /* ============================================================ ダークモード（深夜の紙面）— このサイトでは装飾ではなく機能。 純黒・純白を避け、まぶしさを抑えた深藍の紙面にする。 色トークンの上書きだけで切り替える（構造は共有）。 ============================================================ */ @media (prefers-color-scheme: dark) { :root { --color-canvas: #12161f; --color-bg: #1a2029; --color-surface: #222a36; --color-text: #d7dce6; /* 純白を避けて眩しさを抑える。bg比 約11:1 */ --color-text-muted: #98a2b5; --color-brand: #93a7cf; /* 見出しマーカー・アイコン用の淡藍 */ --color-brand-strong: #0d111a; --color-brand-tint: #242e42; --color-accent: #b3762a; /* 行灯の琥珀（夜用に少し灯す） */ --color-accent-hover: #c98a3f; --color-accent-tint: #241f15; --color-accent-border: #3f3524; --color-marker: #3d3416; --color-border: #2a3242; --color-border-strong: #3a4457; --color-warning: #d0705a; --color-warning-bg: #2e1f1b; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35), 0 1px 3px rgb(0 0 0 / 0.3); --shadow-md: 0 2px 6px rgb(0 0 0 / 0.35), 0 6px 18px rgb(0 0 0 / 0.4); } } @media (prefers-reduced-motion: reduce) { :root { --transition: 0ms; } }