/* ============================================================ * lab-tokens.css — AI TRUST Lab 共通デザイントークン * 全ツール／WordPress で共有する。分岐は data-tool 属性だけ。 * 値の根拠は design_system/PLAN.md §4.3（LP案の実測値）。 * ============================================================ */ :root{ color-scheme: dark; /* ── 面 ──────────────────────────────────────────── カード地は不透明で塗らない。背後のオーブを透かすため半透明にする。 backdrop-filter が効かない環境では --lab-surface-solid に落とす。 */ --lab-bg: #020617; /* slate-950 */ --lab-surface: rgba(15,23,42,.70); /* slate-900 70% */ --lab-surface-solid: #0f172a; --lab-surface-2: rgba(30,41,59,.60); /* slate-800 60%。一段持ち上げる面 */ --lab-border: #1e293b; /* slate-800 */ --lab-border-soft: rgba(30,41,59,.55); /* ── 文字 ─────────────────────────────────────────── */ --lab-text: #f8fafc; --lab-text-muted: #94a3b8; --lab-text-dim: #64748b; /* ── ブランド ─────────────────────────────────────── */ --lab-accent: #22d3ee; /* cyan-400 */ --lab-accent-2: #60a5fa; /* blue-400 */ --lab-accent-ink: #020617; /* アクセント地の上に置く文字 */ --lab-grad: linear-gradient(90deg,#22d3ee,#67e8f9,#60a5fa); /* ── 意味色 ─────────────────────────────────────── ツール間で絶対に反転させない。シグネチャ色をここに使わない。 up/down は値の増減ではなく意味で決める（上がるほど警戒＝赤）。 */ --lab-up: #f0645b; --lab-down: #3fb950; --lab-ok: #22c55e; --lab-warn: #f59e0b; --lab-danger: #ef4444; /* ── シグネチャ色（data-tool で上書き。外装にだけ塗る） ── */ --lab-sig: #22d3ee; /* 用語解説のある語に引く点線。枠線と同じ色だと暗くて見つけられないので、 白を薄くかけて「押せる・乗せられる」ことを見えるようにする。 */ --lab-term-line: rgba(255,255,255,.55); /* ── 光彩レイヤー ───────────────────────────────── 方針: 1区画に光源は1つ。局所的な玉ではなく、区画全体に及ぶ広い勾配にする。 光の色は、その光が届く範囲にある文字・数値の色と揃える。 いろいろな色が混ざる区画では色を付けず、白い光にする。 */ --lab-glass-blur: 12px; --lab-ambient-tint: color-mix(in oklab, var(--lab-sig) 13%, transparent); --lab-ambient-neutral: rgba(255,255,255,.055); --lab-dot-gap: 32px; --lab-dot-op: .03; --lab-shadow: 0 25px 50px -12px rgba(0,0,0,.25); --lab-glow: 0 8px 24px -8px color-mix(in oklab, var(--lab-sig) 35%, transparent); /* ── 形 ───────────────────────────────────────────── */ --lab-r-sm:8px; --lab-r:12px; --lab-r-lg:16px; --lab-r-xl:24px; --lab-r-pill:999px; /* ── 間隔 ─────────────────────────────────────────── */ --lab-gap:12px; --lab-pad:16px; --lab-section:48px; /* ── 字 ─────────────────────────────────────────── LP案は Plus Jakarta Sans / Noto Sans JP / JetBrains Mono を読み込んでいるが、 CSS で当てておらず、実際には system-ui のまま描画されている（実測で確認）。 つまり LP案の字面 = macOS の SF Pro ＋ Hiragino Sans。 現行ツールが指定している Noto Sans JP はこれより丸く重く、字面の差が最も大きい。 LP案の見え方に合わせるため system-ui を先頭に置き、Hiragino が無い環境だけ Noto Sans JP に落とす。ウェブフォントの読み込みは不要になる。 */ --lab-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Noto Sans JP', sans-serif; --lab-mono: ui-monospace, SFMono-Regular, Menlo, 'JetBrains Mono', Consolas, monospace; /* ── 文字サイズの段階 ───────────────────────────── px で持つ。rem 指定は各ツールの body 側の値でずれるため、絶対値で固定する。 ★ px と pt は別の単位。1pt = 1/72インチ、CSS の 1px = 1/96インチなので **12pt = 16px、逆に 12px = 9pt** にあたる。 Word で 12pt に見える大きさは CSS では 16px であって 12px ではない。 この対応を取り違えると、指定した数字のわりに小さい画面になる。 下の表には pt 換算を併記してある。 ★ --lab-fs-xs (15px = 11.3pt) が最小。これより小さい文字は使わない。 font-size を px や rem で直書きしないこと。必ずこの段階から選ぶ。 参考にした LP案は 10 / 11 / 12px（7.5〜9pt）を多用しているが、 和文の読みやすさを優先して大きく取ってある。 */ --lab-fs-xs: 15px; /* 11.3pt 最小。等幅の記号ラベル、グラフの軸、注記 */ --lab-fs-sm: 16px; /* 12.0pt 補助情報。表の値、キャプション。Word の12ptと同じ */ --lab-fs-md: 17px; /* 12.8pt 小見出し、ラベル、表の本文 */ --lab-fs-base: 18px; /* 13.5pt 本文 */ --lab-fs-lg: 21px; /* 15.8pt リード文、パネル見出し */ --lab-fs-xl: 25px; /* 18.8pt 小さな数値、強調 */ --lab-fs-2xl: 30px; /* 22.5pt セクション見出し、カードの主数値 */ --lab-fs-3xl: 37px; /* 27.8pt 大きな数値 */ --lab-fs-4xl: 46px; /* 34.5pt ページ見出し */ /* 行間。和文は欧文より広めに取る。 */ --lab-lh-tight: 1.35; --lab-lh: 1.75; /* ★ 色の下限もここで決めておく。 --lab-fs-sm 以下の文字に --lab-text-dim を使わないこと。 小さい文字は --lab-text-muted 以上の明るさにする。 LP案が 10px の文字を読ませられているのは、色が明るいから。 */ } /* ── シグネチャ色（6色）────────────────────────────── 12ツールに12色を割り当てると、一覧に並べたとき色が散らかって収拾がつかない。 6色に絞り、「米国株・日本株テーマ」と「マクロ・データ診断」の2群それぞれに 同じ6色を配る。群をまたいだ色の重複は許容する（同時に並ぶのは12枚だが、 同じ色の2枚は必ず離れた位置に来る）。 セクション見出しはこの6色を使わず、水色（--lab-accent）と白で統一する。 6色が出るのは、カードのアイコン・分類名・バッジ・光といった従属要素だけ。 */ :root{ --lab-c1:#38bdf8; /* sky */ --lab-c2:#a78bfa; /* violet */ --lab-c3:#2dd4bf; /* teal */ --lab-c4:#e879f9; /* fuchsia */ --lab-c5:#818cf8; /* indigo */ --lab-c6:#fbbf24; /* amber */ } /* 群1: 米国株・日本株テーマ */ [data-tool="risk_factors_202609"] { --lab-sig:var(--lab-c1); } [data-tool="target_gap_202608"] { --lab-sig:var(--lab-c2); } [data-tool="ai_trend_202607"] { --lab-sig:var(--lab-c3); } [data-tool="ai_trend_jp_202607"] { --lab-sig:var(--lab-c4); } [data-tool="magnificent_seven_202603"] { --lab-sig:var(--lab-c5); } [data-tool="us_equity_rotation_202604"]{ --lab-sig:var(--lab-c6); } /* 群2: マクロ・データ診断 */ [data-tool="risk_regime_202603"] { --lab-sig:var(--lab-c1); } /* 202609 は 202603 の作り直し。完成後に 202603 を撤収するので同じ色を引き継ぐ。 */ [data-tool="risk_regime_202609"] { --lab-sig:var(--lab-c1); } [data-tool="us_fiscal_risk_202603"] { --lab-sig:var(--lab-c2); } [data-tool="us_liquidity_202604"] { --lab-sig:var(--lab-c3); } [data-tool="private_credit_202603"] { --lab-sig:var(--lab-c4); } [data-tool="crude_oil_202604"] { --lab-sig:var(--lab-c5); } [data-tool="gold_macro_flow_202605"] { --lab-sig:var(--lab-c6); } /* ダッシュボードは統合ハブなので、6色ではなくブランドの水色をそのまま使う。 */ [data-tool="dashboard"] { --lab-sig:var(--lab-accent); } /* ── フォールバック ─────────────────────────────────── 透明度を減らす設定、および backdrop-filter 非対応環境では カードを不透明に落とす。光彩は消えるが情報は必ず読める。 */ @media (prefers-reduced-transparency:reduce){ :root{ --lab-surface:#0f172a; --lab-surface-2:#1e293b; --lab-glass-blur:0px; } } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ :root{ --lab-surface:#0f172a; --lab-surface-2:#1e293b; } }