/* ============================================================================= ゼンテクト プロダクト デザイントークン / tokens.css ----------------------------------------------------------------------------- 単一情報源：guidelines/design-system.md（主管：アオイ） 準拠元：ロゴガイドライン 2025.10.08版 / brand-guidelines.md（木村主管） 対象：ゼンフォームライト（https://zenform-lite.vercel.app/）ほか全プロダクトUI バージョン：v2（2026-06-04） 使い方： 1) このファイルを全画面で読み込む（）。 2) 色・余白・角丸・影は必ず var(--color-xxx) 等で参照する。HEX/生pxのベタ書き禁止。 3) ダーク切替は 。OS追従は末尾の @media を参照。 4) Tailwind config / JSON / Figma Variables へはこのファイルを機械変換すれば移植できる （セマンティック名がそのままトークンキーになる設計）。 アクセシビリティ方針（重要）： - Teal-05 / Moss-05 は「装飾・塗り・グラフの面」専用。白背景の文字には使わない （白との比 2.82 / 1.95:1 で WCAG AA 不合格）。 - 読む要素（本文・リンク・ボタンラベル）は Teal-07 #007782（白比 5.3:1）以降を使う。 - プライマリボタンは Teal-07 塗り＋白文字。 ========================================================================== */ /* フォント：プロダクトUIは Inter（欧文）＋ Noto Sans JP（和文）。 ともに可変ウェイト・無償（SIL OFL）。読込を最小化したい場合はこの @import を外し、 ローカルフォント（Hiragino/Yu Gothic）へのフォールバックだけで運用してよい。 */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap'); :root { /* =========================================================================== 原色パレット（参照元。直接使わず、必ずセマンティック越しに使う） ロゴガイドライン2025.10.08版の確定値。★=ロゴ上の主役トーン。 ========================================================================= */ --teal-00:#CCEEF1; --teal-01:#A3E0E6; --teal-02:#7AD3DB; --teal-03:#52C5D0; --teal-04:#29B8C5; --teal-05:#00AABA; /* ★主役・静・信頼 */ --teal-06:#00919E; --teal-07:#007782; /* 読む要素の基準色（白比5.3:1） */ --teal-08:#005E66; --teal-09:#00444A; --moss-00:#E0F5EF; --moss-01:#C8EDE1; --moss-02:#AFE4D4; --moss-03:#96DCC7; --moss-04:#7ED4BA; --moss-05:#65CCAD; /* ★差し色・動・成長（装飾専用） */ --moss-06:#56AD93; --moss-07:#478F79; --moss-08:#38705F; /* 成功の文字色（白比5.75:1） */ --moss-09:#285245; --black:#151515; /* 本文（白比18.26:1） */ --white:#FFFFFF; /* グレースケール：パレットに無いため新規定義。Teal-09へ僅かに寄せた中立グレー */ --gray-50:#F7F9F9; /* 最薄背景 */ --gray-100:#EEF1F1; /* 区切り背景・無効面 */ --gray-200:#E1E5E6; /* 標準境界 */ --gray-300:#CBD1D2; /* 強めの境界 */ --gray-400:#9AA3A4; /* プレースホルダ・無効テキスト */ --gray-500:#6B7374; /* 補助テキスト（白比5.6:1） */ --gray-700:#3A4041; /* 準本文 */ /* =========================================================================== セマンティックカラー（LIGHT）— 実装ではこの名前だけを参照する ========================================================================= */ /* 面・背景 */ --color-bg:var(--white); /* ページ背景 */ --color-bg-muted:var(--gray-50); /* 副次背景・区切り帯 */ --color-surface:var(--white); /* カード・パネル面 */ --color-surface-raised:var(--white); /* 浮いた面（モーダル等。影で持ち上げ） */ /* 境界 */ --color-border:var(--gray-200); /* 標準境界 */ --color-border-strong:var(--gray-300); /* 強調境界・入力hover枠 */ /* テキスト */ --color-text:var(--black); /* 本文 */ --color-text-secondary:var(--gray-500); /* 補助テキスト・説明文 */ --color-text-muted:var(--gray-400); /* 無効・プレースホルダ */ --color-text-on-accent:var(--white); /* アクセント塗り上の文字 */ /* インタラクティブ（読む要素＝Teal-07以降。AA担保） */ --color-primary:var(--teal-07); /* リンク・ボタン塗りの基準色 */ --color-primary-hover:var(--teal-08); /* hover */ --color-primary-active:var(--teal-09); /* active/押下 */ --color-primary-surface:var(--teal-00); /* 薄塗り（選択行・タグ・active chip背景） */ /* 装飾の主役（塗り・図形・glow・進捗の面・ステッパー現在）— 文字には使わない */ --color-accent:var(--teal-05); --color-accent-moss:var(--moss-05); /* focusリング基準色（面に対し3:1以上を満たす値） */ --color-focus:var(--teal-05); /* ステータス */ --color-success:var(--moss-08); /* 成功文字（白比5.75:1） */ --color-success-surface:var(--moss-00); /* 成功の薄塗り背景 */ --color-warning:#92400E; /* 警告文字（白比7.09:1） */ --color-warning-surface:#FEF0C7; /* 警告の薄塗り背景 */ --color-warning-icon:#DC6803; /* 警告アイコン/大要素のみ */ --color-danger:#B42318; /* エラー文字（白比6.57:1） */ --color-danger-strong:#D92D20; /* 破壊的アクション塗り（白文字4.83:1） */ --color-danger-surface:#FEE4E2; /* エラーの薄塗り背景 */ /* =========================================================================== タイポグラフィ ========================================================================= */ --font-sans:"Inter","Noto Sans JP",system-ui,-apple-system,"Segoe UI","Hiragino Sans","Yu Gothic",Meiryo,sans-serif; --font-numeric:"Inter",system-ui,sans-serif; /* 数字の表組みに tabular-nums と併用 */ --text-display:3.052rem; /* 49px LP・ヒーロー */ --text-h1:2.441rem; /* 39px 画面タイトル */ --text-h2:1.953rem; /* 31px セクション見出し */ --text-h3:1.563rem; /* 25px サブ見出し */ --text-h4:1.25rem; /* 20px カード見出し */ --text-lg:1.125rem; /* 18px リード文 */ --text-base:1rem; /* 16px 本文標準 */ --text-sm:0.875rem; /* 14px 補助・ラベル */ --text-xs:0.75rem; /* 12px キャプション・注記 */ --leading-tight:1.2; --leading-snug:1.35; --leading-normal:1.6; --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; /* =========================================================================== スペーシング（8pxベースグリッド。4pxは細部調整のみ） ========================================================================= */ --space-0:0; --space-1:4px; /* アイコン⇔文字 */ --space-2:8px; /* インライン要素間・入力内パディング縦 */ --space-3:12px; /* 小要素間 */ --space-4:16px; /* 標準要素間・入力左右パディング */ --space-5:20px; /* カード内パディング（小） */ --space-6:24px; /* カード内パディング（標準）・セクション内間隔 */ --space-8:32px; /* ブロック間・セクション間 */ --space-10:40px; /* 大セクション間 */ --space-12:48px; /* 画面の主要区切り */ --space-16:64px; /* LPセクション間 */ --space-20:80px; /* LP大区切り */ /* レイアウト */ --container-max:1200px; /* 本文系コンテンツ最大幅 */ --container-form:640px; /* フォーム単体（集中のため絞る） */ --sidebar-w:240px; /* アプリシェル サイドバー幅（現状183pxから拡張） */ /* ブレークポイント（参照用。@media では実値を書く） */ --bp-sm:640px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px; /* =========================================================================== 角丸（鋭すぎず丸すぎず＝落ち着いた信頼感。標準8px） ========================================================================= */ --radius-none:0; --radius-sm:4px; /* タグ・バッジ・チェックボックス */ --radius-md:8px; /* 標準：入力・ボタン・小カード */ --radius-lg:12px; /* カード・パネル */ --radius-xl:16px; /* モーダル・大きな面 */ --radius-full:9999px;/* ピル・アバター・トグル */ /* =========================================================================== 影（Elevation）— 控えめ・低彩度。Zenの静けさを壊さない ========================================================================= */ --shadow-xs:0 1px 2px rgba(21,21,21,.05); /* 入力・小ボタン */ --shadow-sm:0 1px 3px rgba(21,21,21,.08), 0 1px 2px rgba(21,21,21,.04); /* カード標準 */ --shadow-md:0 4px 12px rgba(21,21,21,.08); /* ドロップダウン・hover浮上 */ --shadow-lg:0 12px 28px rgba(21,21,21,.12); /* モーダル・トースト */ --shadow-focus:0 0 0 3px rgba(0,170,186,.40); /* focusリング（Teal-05のα） */ /* =========================================================================== モーション（状態を伝えるためだけに使う。驚かせない） ========================================================================= */ --duration-fast:150ms; --duration-base:200ms; --ease:cubic-bezier(0.22,0.61,0.36,1); /* ease-out系・上品に */ /* =========================================================================== タップ領域・z-index階層 ========================================================================= */ --tap-min:44px; --z-base:0; --z-dropdown:1000; --z-sticky:1100; --z-drawer:1200; --z-overlay:1300; --z-modal:1400; --z-toast:1500; } /* ============================================================================= ダークテーマ / 原色9段階に無いHEX（surface/border系）はTeal-09基準の派生値。 ダーク面上で本文10:1前後・境界3:1以上を満たすよう選定済み。 ========================================================================== */ [data-theme="dark"] { --color-bg:var(--teal-09); --color-bg-muted:#003A40; --color-surface:#0A4F57; --color-surface-raised:#0E5A63; --color-border:#1C6770; --color-border-strong:#2E7B85; --color-text:var(--white); --color-text-secondary:var(--teal-01); --color-text-muted:#7FB8BE; --color-text-on-accent:var(--teal-09); --color-primary:var(--teal-01); /* ダークでは明るいTealがリンク色 */ --color-primary-hover:var(--teal-00); --color-primary-active:var(--teal-02); --color-primary-surface:#0E5A63; --color-accent:var(--teal-04); --color-accent-moss:var(--moss-03); --color-focus:var(--teal-02); --color-success:var(--moss-03); --color-success-surface:#10463F; --color-warning:#FEC84B; --color-warning-surface:#4A2E05; --color-warning-icon:#FEC84B; --color-danger:#FDA29B; --color-danger-strong:#F04438; --color-danger-surface:#4A1410; /* 影はダークで弱める（面の区別はborderで行う） */ --shadow-xs:0 1px 2px rgba(0,0,0,.25); --shadow-sm:0 1px 2px rgba(0,0,0,.30); --shadow-md:0 4px 12px rgba(0,0,0,.35); --shadow-lg:0 12px 28px rgba(0,0,0,.45); --shadow-focus:0 0 0 3px rgba(122,211,219,.45); } /* OS追従させたい場合（任意・data-theme未指定時のみ効かせる）。 data-theme="light" を明示指定したユーザーには適用しない。 */ @media (prefers-color-scheme: dark) { :root:not([data-theme]):not([data-theme="light"]) { --color-bg:var(--teal-09); --color-bg-muted:#003A40; --color-surface:#0A4F57; --color-surface-raised:#0E5A63; --color-border:#1C6770; --color-border-strong:#2E7B85; --color-text:var(--white); --color-text-secondary:var(--teal-01); --color-text-muted:#7FB8BE; --color-text-on-accent:var(--teal-09); --color-primary:var(--teal-01); --color-primary-hover:var(--teal-00); --color-primary-active:var(--teal-02); --color-primary-surface:#0E5A63; --color-accent:var(--teal-04); --color-accent-moss:var(--moss-03); --color-focus:var(--teal-02); --color-success:var(--moss-03); --color-success-surface:#10463F; --color-warning:#FEC84B; --color-warning-surface:#4A2E05; --color-danger:#FDA29B; --color-danger-strong:#F04438; --color-danger-surface:#4A1410; --shadow-sm:0 1px 2px rgba(0,0,0,.30); --shadow-md:0 4px 12px rgba(0,0,0,.35); --shadow-lg:0 12px 28px rgba(0,0,0,.45); --shadow-focus:0 0 0 3px rgba(122,211,219,.45); } } /* 動きを減らす設定の尊重（アクセシビリティ） */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } /* ベースタイポ適用例（任意。プロダクト側のリセットに合わせて調整可） */ body { font-family:var(--font-sans); font-size:var(--text-base); line-height:var(--leading-normal); color:var(--color-text); background:var(--color-bg); -webkit-font-smoothing:antialiased; }