/* === RevAI デザイントークン ====================================== **色とフォントサイズの値は、このファイルでしか定義しない。** 出典はデザイン仕様「RevAI カラーパレット」。主色は緑 `#1f8a6d`。 トークン名・値は仕様書のとおりに保つ（勝手に足したり丸めたりしない）。 `style.css`（ライト）と `editor.css` は別ファイルで、エディタ画面は `style.css` を読み込まない。エディタは**常時ダーク**なので、 `editor.html` の `` に `data-theme="dark"` を付けて下の ダーク定義を効かせる。両方が同じセマンティック名を使い、値だけが入れ替わる。 **OS 設定への自動追従はしない。** ライト画面が勝手に暗くなると、 PDF のプレビューや検出のハイライトの見え方が変わってしまう。 使い分けで間違えやすい点（仕様書 §1・§10 より）: - `#1f8a6d`（brand-500）は白地で 4.27:1 しかない。**14〜18px の文字と ボタンの塗りには使わない**。ロゴ・アイコン・大見出し専用 - 文字・塗りは `--rv-action-bg` / `--rv-brand-text` を使う - フォーム部品の枠は `--rv-line-field`。`--rv-line-1〜4` は 意味を持たない仕切り専用（白地で 1.2〜1.4:1 しかない） ================================================================ */ :root { /* ---- タイポグラフィスケール（7 段階） ---- */ --fs-hero: 1.6rem; /* 25.6px ブランド見出し（ログイン画面） */ --fs-page: 1.3rem; /* 20.8px ページ見出し h1 */ --fs-card: 1.1rem; /* 17.6px カード / モーダル見出し */ --fs-lg: 1rem; /* 16.0px 強調（表示名・セクション見出し） */ --fs-base: 0.9rem; /* 14.4px 本文（既定） */ --fs-sm: 0.8rem; /* 12.8px 補助・ラベル・ボタン */ --fs-xs: 0.72rem; /* 11.5px バッジ・ファイル名などの最小 */ /* ---- Brand scale (Green) ---- */ --rv-brand-25: #f7fcfa; --rv-brand-50: #f3faf6; --rv-brand-100: #e7f4ef; --rv-brand-150: #d6ebe3; --rv-brand-200: #c4e3d8; --rv-brand-250: #a2d6c3; --rv-brand-300: #7fc9ae; --rv-brand-400: #54a98d; --rv-brand-500: #1f8a6d; /* 主色。ロゴ・アイコン・大見出し（非テキスト用途） */ --rv-brand-550: #19866a; /* AA 調整済。塗り・文字はこちら */ --rv-brand-600: #167259; --rv-brand-700: #0e5a45; --rv-brand-800: #0b4435; --rv-brand-900: #072f25; --rv-brand-950: #051f18; --rv-brand: var(--rv-brand-500); --rv-brand-text: #0e5a45; /* リンク・トーナル文字。ダークで自動反転 */ --rv-brand-on-dark: #5fd6a9; --rv-brand-on-dark-2: #7fc9ae; --rv-brand-safe: #2f9e7c; --rv-brand-cool: #157a6e; /* ---- Ink ---- */ --rv-ink-1: #0c1f1a; --rv-ink-2: #1b3129; --rv-ink-3: #3b564c; --rv-ink-4: #5e7a70; --rv-ink-5: #8ca69c; /* 非文字用途のみ（白地 2.61:1） */ --rv-ink-inverse: #f3faf6; --rv-ink-inverse-2: #b6d6c8; /* ---- Surface ---- */ --rv-surface-0: #f7fcfa; --rv-surface-1: #ffffff; --rv-surface-2: #f3faf6; --rv-surface-3: #e7f4ef; --rv-surface-raised: #ffffff; --rv-surface-inverse: #072f25; --rv-scrim: rgba(7, 47, 37, 0.55); /* ---- Line ---- */ --rv-line-1: #d9ece4; --rv-line-2: #eaf5f0; --rv-line-3: #c4e3d8; --rv-line-4: #1b5c48; --rv-line-field: #5e7a70; /* フォーム枠。WCAG 1.4.11 適合（4.67:1） */ /* ---- Semantic ---- */ --rv-success-fg: #0e5a45; --rv-success-solid: #168568; --rv-success-tint: #e2f1ea; --rv-success-line: #addecb; --rv-success-icon: #2f9e7c; --rv-warning-fg: #8c5f00; --rv-warning-solid: #9a6b12; --rv-warning-tint: #f5eedc; --rv-warning-line: #e3d4ad; /* danger: ①不可逆操作の確認ダイアログ ②ジョブ失敗 ③セキュリティ警告 のみ。 通常のバリデーションエラー（必須未入力・形式不正）は warning を使う */ --rv-danger-fg: #9d352d; --rv-danger-solid: #af3d34; --rv-danger-tint: #ffece9; --rv-danger-line: #fabfb6; --rv-info-fg: #1867a3; --rv-info-solid: #1b73b5; --rv-info-tint: #e7f3ff; --rv-info-line: #b2d6f9; --rv-neutral-fg: #3b564c; --rv-neutral-solid: #5e7a70; --rv-neutral-tint: #eaf5f0; --rv-neutral-line: #d9ece4; /* ---- Interaction ---- */ --rv-state-hover-tint: #f3faf6; --rv-state-hover-tint-2: #d6ebe3; --rv-state-active-tint: #e7f4ef; --rv-state-selected-bg: #e7f4ef; --rv-state-selected-mark: #19866a; --rv-state-disabled-bg: #e9f1ee; --rv-state-disabled-fg: #81908a; --rv-state-disabled-line: #d5e0dc; --rv-focus-ring: #0e5a45; --rv-focus-ring-offset: #ffffff; --rv-action-bg: #19866a; --rv-action-bg-hover: #0e5a45; --rv-action-bg-active: #0b4435; --rv-on-action: #ffffff; /* ---- Data visualization ---- */ --rv-viz-1: #1f8a6d; --rv-viz-2: #366fc7; --rv-viz-3: #b68100; --rv-viz-4: #008e9a; --rv-viz-5: #9356b2; --rv-viz-6: #ab4b90; /* ---- Elevation (green-tinted) ---- */ --rv-shadow-1: 0 1px 2px rgba(14, 90, 69, 0.06), 0 1px 1px rgba(14, 90, 69, 0.05); --rv-shadow-2: 0 2px 6px rgba(14, 90, 69, 0.07), 0 1px 2px rgba(14, 90, 69, 0.06); --rv-shadow-3: 0 12px 32px rgba(14, 90, 69, 0.12), 0 2px 6px rgba(14, 90, 69, 0.07); --rv-shadow-lift: 0 18px 48px rgba(14, 90, 69, 0.16); /* ---- 検出カテゴリ（マスキング UI 専用） ---- 仕様 §5。**色相帯 150〜180°（ブランド緑）/ 60〜100°（warning）/ 10〜45°（danger）/ 235〜260°（info）は使用禁止**なので、残りの 205〜340° に配置してある。勝手に色相を足さないこと。 revai のカテゴリは 13 種で、この 8 グループを線種と組み合わせて割り当てる （対応は `editor.css` の「カテゴリの色と線種」を参照）。**色だけでは 区別できない**組があるので、線種と凡例を必ず併用する。 */ --rv-ent-person-ink: #3752ae; --rv-ent-person-tint: #ebf1ff; --rv-ent-person-line: #b7cbff; --rv-ent-person-solid: #3049a4; --rv-ent-address-ink: #006481; --rv-ent-address-tint: #dff5ff; --rv-ent-address-line: #8ed8f7; --rv-ent-address-solid: #005b76; --rv-ent-phone-ink: #006770; --rv-ent-phone-tint: #dbf7fb; --rv-ent-phone-line: #86dde7; --rv-ent-phone-solid: #005e66; --rv-ent-email-ink: #5c46a7; --rv-ent-email-tint: #f0efff; --rv-ent-email-line: #cbc4ff; --rv-ent-email-solid: #543d9e; --rv-ent-org-ink: #8e3075; --rv-ent-org-tint: #ffeaf7; --rv-ent-org-line: #f3b7de; --rv-ent-org-solid: #84266c; --rv-ent-finance-ink: #783a94; --rv-ent-finance-tint: #f8ecff; --rv-ent-finance-line: #e1bcf4; --rv-ent-finance-solid: #70318b; --rv-ent-id-ink: #ffffff; --rv-ent-id-tint: #24404e; --rv-ent-id-line: #24404e; --rv-ent-id-solid: #24404e; --rv-ent-custom-ink: #3b564c; --rv-ent-custom-tint: #eaf5f0; --rv-ent-custom-line: #c4e3d8; --rv-ent-custom-solid: #5e7a70; /* ---- 紙面（PDF ページ）: **テーマに追従させない** ---- `.page-wrapper` / `.thumb` の白は UI の面ではなく**書類そのもの**。 `--rv-surface-*` を当てると、ダークのエディタで PDF プレビューが 緑黒になってしまう。文字も同様に紙の上の色で固定する。 */ --rv-paper: #ffffff; --rv-paper-ink: #1b3129; /* ---- Shape ---- */ --rv-r-xs: 4px; --rv-r-sm: 7px; --rv-r-md: 11px; --rv-r-lg: 16px; } /* === Dark theme ================================================== エディタ画面（`editor.html` の ``）で効く。 ================================================================ */ [data-theme="dark"] { /* **地と罫線は無彩色（僅かに緑寄りのグラファイト）にする。** 仕様 §7 の ダーク定義は緑の面（#041e17 / #072f25 / #143e31）だが、実機で見ると **緑の地の上に検出の 8 色が乗って「ゲームのような」印象**になり、 色が「検出の種別」を指しているのか「ブランド」なのかが混ざっていた。 エディタの仕事は書類を眺めて検出の当たり外れを判断すること。**色の予算は すべて検出の意味に使う**。ブランドの緑は主ボタン・リンク・選択・ フォーカスにだけ残す。白い紙面も無彩色の地のほうが締まる。 仕様書からの意図的な逸脱。コントラストは全項目を実測して確認済み （本文 13.38:1 / フォーム枠 5.01:1 など）。 */ --rv-brand-500: #2f9e7c; --rv-brand-550: #2f9e7c; --rv-brand: #5fd6a9; --rv-brand-text: #5fd6a9; --rv-ink-1: #f1f5f4; --rv-ink-2: #dbe3e1; --rv-ink-3: #b3bfbc; --rv-ink-4: #8e9c98; --rv-ink-5: #6b7a76; --rv-ink-inverse: #0c1f1a; --rv-ink-inverse-2: #3b564c; --rv-surface-0: #0d1211; --rv-surface-1: #151b19; --rv-surface-2: #1e2624; --rv-surface-3: #111716; --rv-surface-raised: #252e2b; --rv-surface-inverse: #f3faf6; --rv-scrim: rgba(5, 8, 7, 0.68); --rv-line-1: #2c3634; --rv-line-2: #222b29; --rv-line-3: #3b4744; --rv-line-4: #c4e3d8; --rv-line-field: #7c8d89; --rv-success-fg: #5fd6a9; --rv-success-solid: #168568; /* 白文字 4.58:1 を維持するためライト値を流用 */ --rv-success-tint: #144031; --rv-success-line: #286853; --rv-success-icon: #5fd6a9; --rv-warning-fg: #edbf71; --rv-warning-solid: #9a6b12; --rv-warning-tint: #453312; --rv-warning-line: #715625; /* 面との境界が 2.45:1 なので、ベタ塗りには fg の輪郭を足すこと */ --rv-danger-fg: #fa9487; --rv-danger-solid: #af3d34; --rv-danger-tint: #4f2b26; --rv-danger-line: #804a43; --rv-info-fg: #85c4fe; --rv-info-solid: #1b73b5; --rv-info-tint: #1d3951; --rv-info-line: #365e83; --rv-neutral-fg: #b6d6c8; --rv-neutral-solid: #5e7a70; --rv-neutral-tint: #222b29; --rv-neutral-line: #2c3634; --rv-state-hover-tint: #1e2624; --rv-state-hover-tint-2: #2c3634; --rv-state-active-tint: #111716; --rv-state-selected-bg: #1e2624; --rv-state-selected-mark: #5fd6a9; --rv-state-disabled-bg: #1a201f; --rv-state-disabled-fg: #707d79; --rv-state-disabled-line: #2c3634; --rv-focus-ring: #5fd6a9; --rv-focus-ring-offset: #0d1211; --rv-action-bg: #5fd6a9; /* 明るい緑地／濃緑文字へ反転 */ --rv-action-bg-hover: #7eeabf; --rv-action-bg-active: #9af4d0; --rv-on-action: #072f25; --rv-viz-1: #54c9a4; --rv-viz-2: #82b2fd; --rv-viz-3: #d9a850; --rv-viz-4: #31c7d5; --rv-viz-5: #bd9ff2; --rv-viz-6: #e492c9; /* ---- 検出カテゴリ（ダーク） ---- */ --rv-ent-person-ink: #abc3ff; --rv-ent-person-tint: #28365c; --rv-ent-person-line: #abc3ff; --rv-ent-person-solid: #3049a4; --rv-ent-address-ink: #62d4ff; --rv-ent-address-tint: #003e52; --rv-ent-address-line: #62d4ff; --rv-ent-address-solid: #005b76; --rv-ent-phone-ink: #36dcec; --rv-ent-phone-tint: #004046; --rv-ent-phone-line: #36dcec; --rv-ent-phone-solid: #005e66; --rv-ent-email-ink: #c3baff; --rv-ent-email-tint: #383159; --rv-ent-email-line: #c3baff; --rv-ent-email-solid: #543d9e; --rv-ent-org-ink: #fca2df; --rv-ent-org-tint: #4f2843; --rv-ent-org-line: #fca2df; --rv-ent-org-solid: #84266c; --rv-ent-finance-ink: #e3aaff; --rv-ent-finance-tint: #452c51; --rv-ent-finance-line: #e3aaff; --rv-ent-finance-solid: #70318b; --rv-ent-id-ink: #ffffff; --rv-ent-id-tint: #3c5566; --rv-ent-id-line: #3c5566; --rv-ent-id-solid: #3c5566; --rv-ent-custom-ink: #b6d6c8; --rv-ent-custom-tint: #18372d; --rv-ent-custom-line: #25493d; --rv-ent-custom-solid: #5e7a70; /* ダークでは影が効かない。明度差でエレベーションを作る */ --rv-shadow-1: 0 0 0 1px #2c3634; --rv-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.40), 0 0 0 1px #2c3634; --rv-shadow-3: 0 16px 40px rgba(0, 0, 0, 0.50), 0 0 0 1px #2c3634; --rv-shadow-lift: 0 24px 56px rgba(0, 0, 0, 0.58), 0 0 0 1px #3b4744; } /* === 紙面の上だけライトに戻す ==================================== **検出のハイライトは白い紙の上に描かれる。** エディタ全体が `data-theme="dark"` なので、そのままだとダーク用の明るい ent 色 （`#abc3ff` 等）が白地に乗り、7 カテゴリすべてが 1.6〜1.9:1 になって ほぼ見えなくなる（WCAG 1.4.11 は非テキストに 3:1 を要求）。 紙面を包む要素にこのクラスを付け、**ent トークンだけ**ライト値へ戻す。 面や文字のトークンは触らない（周囲の UI はダークのまま）。 ============================================================== */ .rv-on-paper { --rv-ent-person-ink: #3752ae; --rv-ent-person-tint: #ebf1ff; --rv-ent-person-line: #b7cbff; --rv-ent-person-solid: #3049a4; --rv-ent-address-ink: #006481; --rv-ent-address-tint: #dff5ff; --rv-ent-address-line: #8ed8f7; --rv-ent-address-solid: #005b76; --rv-ent-phone-ink: #006770; --rv-ent-phone-tint: #dbf7fb; --rv-ent-phone-line: #86dde7; --rv-ent-phone-solid: #005e66; --rv-ent-email-ink: #5c46a7; --rv-ent-email-tint: #f0efff; --rv-ent-email-line: #cbc4ff; --rv-ent-email-solid: #543d9e; --rv-ent-org-ink: #8e3075; --rv-ent-org-tint: #ffeaf7; --rv-ent-org-line: #f3b7de; --rv-ent-org-solid: #84266c; --rv-ent-finance-ink: #783a94; --rv-ent-finance-tint: #f8ecff; --rv-ent-finance-line: #e1bcf4; --rv-ent-finance-solid: #70318b; --rv-ent-id-ink: #ffffff; --rv-ent-id-tint: #24404e; --rv-ent-id-line: #24404e; --rv-ent-id-solid: #24404e; --rv-ent-custom-ink: #3b564c; --rv-ent-custom-tint: #eaf5f0; --rv-ent-custom-line: #c4e3d8; --rv-ent-custom-solid: #5e7a70; }