/* ============================================================= ZZZEEENNN — design tokens ------------------------------------------------------------- 和の落ち着いた色（墨・炭・生成り・紙・石・木）。差し色は朱(橙)を控えめに。 - 背景は真っ白/真っ黒にしない。暗所(バス車内など)で眩しくないトーン。 - 文字は温かい白 / 墨色。 テーマ: - 既定(DARK)を :root に置く。 - 端末が light で、かつ手動指定が無い時だけ自動で明色（:not([data-theme])）。 - 手動切替は 。:root[data-theme] は メディアクエリより詳細度が高いので必ず勝つ。 色トークンだけがテーマで変わる。フォント・余白・モーションは共通。 ============================================================= */ :root { /* --- typography（共通） --------------------------------------- */ --font-sans: "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", "Menlo", "Roboto Mono", "Noto Sans Mono", monospace; /* --- rhythm（共通） ------------------------------------------- */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6.5rem; --space-7: 10rem; /* --- layout（共通） ------------------------------------------- */ --measure: 72rem; --gutter: clamp(1.25rem, 5vw, 4rem); /* --- motion（共通：静かに・ゆっくり） ------------------------- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --slow: 1.2s; /* --- DARK（既定）: 墨・炭。暗所で眩しくない温かい暗色。紋=温かい白 --- */ color-scheme: dark; --bg: #17150f; --bg-raised: #1f1c15; --bg-sunken: #121009; --fg: #ece4d3; --fg-dim: #c0b6a2; --muted: #8c8270; --faint: #5f574a; --ghost: #38332a; --line: rgba(236, 228, 211, 0.12); --line-strong: rgba(236, 228, 211, 0.22); --accent: #e2602b; --accent-dim: rgba(226, 96, 43, 0.16); --logo-ink: var(--fg); } /* 端末が light、かつ手動指定なしのときだけ自動で明色 */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg: #e7e1d3; --bg-raised: #ded7c6; --bg-sunken: #efe9dc; --fg: #2a251d; --fg-dim: #4d463a; --muted: #726a5b; --faint: #9b927f; --ghost: #c3bba9; --line: rgba(42, 37, 29, 0.16); --line-strong: rgba(42, 37, 29, 0.30); --accent: #c24a18; --accent-dim: rgba(194, 74, 24, 0.12); --logo-ink: var(--fg); } } /* 手動 LIGHT（メディアクエリより詳細度が高く必ず勝つ） */ :root[data-theme="light"] { color-scheme: light; --bg: #e7e1d3; --bg-raised: #ded7c6; --bg-sunken: #efe9dc; --fg: #2a251d; --fg-dim: #4d463a; --muted: #726a5b; --faint: #9b927f; --ghost: #c3bba9; --line: rgba(42, 37, 29, 0.16); --line-strong: rgba(42, 37, 29, 0.30); --accent: #c24a18; --accent-dim: rgba(194, 74, 24, 0.12); --logo-ink: var(--fg); } /* 手動 DARK（明OS端末で dark を選んだ場合に既定dark値を確実に適用） */ :root[data-theme="dark"] { color-scheme: dark; --bg: #17150f; --bg-raised: #1f1c15; --bg-sunken: #121009; --fg: #ece4d3; --fg-dim: #c0b6a2; --muted: #8c8270; --faint: #5f574a; --ghost: #38332a; --line: rgba(236, 228, 211, 0.12); --line-strong: rgba(236, 228, 211, 0.22); --accent: #e2602b; --accent-dim: rgba(226, 96, 43, 0.16); --logo-ink: var(--fg); }