/* ===================================================================== tokens.css — KIRIHA デザイントークン --------------------------------------------------------------------- 案件流用時に差し替えるのは「このファイル + config.js」の 2 つだけ。 他の CSS / JS には生の色コードを書かない（canvas も getComputedStyle 経由でここの値を読む）。ライトテーマは :root[data-theme="light"] の トークン再定義のみで実現している。 ===================================================================== */ :root{ /* 色（ダーク基調が既定） */ --c-bg: #07080b; --c-surface: #0e1016; --c-surface-2: #151822; --c-ink: #f2f4f8; /* 本文。--c-bg に対し 4.5:1 以上 */ --c-ink-muted: #9aa3b2; /* 補助テキスト。4.5:1 以上 */ --c-line: rgba(255,255,255,.10); --c-accent: #9d7bff; /* 深いバイオレット（発光の主役） */ /* ベタ面ボタン用 ＋ 暗背景に載る文字用。--c-accent（#9d7bff）は --c-bg 上で 3.1:1 しか出ず小さい文字が AA 未達になるため、一段明るい版を持つ （#b193ff × #07080b = 約 8.1:1）。粒子の発光色は --c-accent のまま */ --c-accent-strong: #b193ff; --c-accent-2: #ffb35c; /* アンバー（光の温度差） */ /* 派生色（スクリム・グロー等。色はすべてこのファイルに集約する） */ --c-scrim: rgba(7,8,11,.66); /* 動く背景上のテキスト保護（弱） */ --c-scrim-strong: rgba(7,8,11,.88); /* 同（強）。セクション面に使用 */ --c-header-bg: rgba(7,8,11,.72); --c-accent-glow: rgba(157,123,255,.35); --c-accent-soft: rgba(157,123,255,.14); --c-amber-soft: rgba(255,179,92,.12); /* グラデーション終端用の 0 アルファ色。`transparent` キーワードは環境に よって白へ補間されるため、必ず同色 0 アルファへ補間する */ --c-scrim-0: rgba(7,8,11,0); --c-accent-0: rgba(157,123,255,0); --c-accent-2-0: rgba(255,179,92,0); --grad-fallback: radial-gradient(60% 50% at 30% 30%, var(--c-accent-soft), var(--c-accent-0) 70%), radial-gradient(50% 45% at 72% 62%, var(--c-amber-soft), var(--c-accent-2-0) 70%); /* タイポ（clamp によるフルード） */ --ff-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif; /* 等幅ラベルは webfont を先頭に置く（OS 既定の等幅が露出するのを防ぐ） */ --ff-mono: "Roboto Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Noto Sans Mono", monospace; --fs-display: clamp(2.75rem, 9vw, 8rem); --fs-h1: clamp(2rem, 5.5vw, 4rem); --fs-h2: clamp(1.75rem, 4.4vw, 3.5rem); /* display 8rem との中間段 */ --fs-h2-sub: clamp(1.25rem, 2.2vw, 1.75rem); --fs-h3: clamp(1.125rem, 1.8vw, 1.5rem); --fs-body: clamp(0.95rem, 1.05vw, 1.0625rem); --fs-small: clamp(0.8125rem, 0.9vw, 0.9375rem); /* --lh-tight / --tr-tight は欧文専用。和文見出しに当てると行が接触する */ --lh-tight: 1.02; --lh-heading: 1.2; --lh-body: 1.8; --lh-tight-ja: 1.18; --tr-tight: -0.03em; --tr-tight-ja: -0.005em; --tr-wide: 0.16em; /* 余白（8px グリッド） */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-16:64px; --sp-24:96px; --sp-32:128px; --container: 1280px; --gutter: clamp(20px, 5vw, 64px); /* モーション */ --ease-out-expo: cubic-bezier(.16,1,.3,1); --ease-in-out: cubic-bezier(.65,0,.35,1); --dur-fast:.2s; --dur-base:.5s; --dur-slow:.9s; --dur-reveal:1.1s; --radius: 2px; --z-header: 100; } /* ライトテーマ（ を付けるだけで切替。 engine は色を getComputedStyle で読むため、切替後は engine.refreshColors() を呼ぶかリロードする（README 参照）） */ :root[data-theme="light"]{ --c-bg: #f5f3ee; --c-surface: #ffffff; --c-surface-2: #ece9e0; --c-ink: #191622; --c-ink-muted: #5c5768; --c-line: rgba(20,16,32,.14); --c-accent: #5a35c8; --c-accent-strong: #4a2ba8; --c-accent-2: #a35c00; --c-scrim: rgba(245,243,238,.68); --c-scrim-strong: rgba(245,243,238,.90); --c-header-bg: rgba(245,243,238,.80); --c-accent-glow: rgba(90,53,200,.25); --c-accent-soft: rgba(90,53,200,.10); --c-amber-soft: rgba(163,92,0,.10); --c-scrim-0: rgba(245,243,238,0); --c-accent-0: rgba(90,53,200,0); --c-accent-2-0: rgba(163,92,0,0); }