/* Bomi · design tokens (Web / LP)
 * 出典: spec/design-guide-v2.md を OKLCH に変換したもの＋LPセッションで追加した「花のパレット」
 * 作成: 2026-07-31（LPセッション）
 *
 * ⚠️ アプリ側（SwiftUI / BomiColors.swift）の正は design-guide-v2.md。
 *    このファイルは Web 用の写しであり、**アプリの正ではない**。
 *    ただし「花のパレット」だけはここが初出で、アプリ側にはまだ無い（→ 論点1の決着待ち）。
 */

:root{
  /* ── 背景 ───────────────────────────────────────────── */
  --color-paper:      oklch(97.8% 0.005 67.8);   /* #FAF7F4  bg/secondary · 画面の地（温クリーム） */
  --color-paper-pure: oklch(100%  0     0);      /* #FFFFFF  bg/primary   · カード・シート        */
  --color-paper-3:    oklch(94.0% 0.009 62.6);   /* #F0EAE5  bg/grouped                          */

  /* ── 文字 ───────────────────────────────────────────── */
  --color-ink:        oklch(29.8% 0.017  5.9);   /* #352A2C  label/primary   · 13.83:1 on 白      */
  --color-ink-soft:   oklch(50.3% 0.018  8.0);   /* #6E6062  label/secondary ·  5.61:1 on クリーム */
  --color-ink-faint:  oklch(65.8% 0.017 54.8);   /* #9A8F88  label/tertiary  · 大きい字のみ        */

  /* ── CTA ────────────────────────────────────────────── */
  --color-cta:        oklch(36.6% 0.031  2.9);   /* #4D383D  白文字で 10.77:1 */
  --color-on-cta:     oklch(100%  0     0);

  /* ── 線 ─────────────────────────────────────────────── */
  --color-rule:       oklch(91.4% 0.011 63.4);   /* #E8E1DB  separator   */
  --color-border:     oklch(84.9% 0.017 58.6);   /* #D6CBC3  border/firm */

  /* ── アクセント · サクラピンク 355° ───────────────────────
   * 500 は白背景で 2.37:1。塗り専用。前景には必ず 700 以上を使う。 */
  --color-accent-50:  oklch(97.0% 0.012 11.0);   /* #FDF2F3 */
  --color-accent-100: oklch(92.2% 0.032 10.6);   /* #FADDE0 */
  --color-accent-200: oklch(87.0% 0.051 12.2);   /* #F4C7CB */
  --color-accent-300: oklch(81.1% 0.078 12.9);   /* #EFADB3 */
  --color-accent-500: oklch(74.6% 0.107 14.8);   /* #E89097 · ブランドコア・大面積のみ */
  --color-accent-700: oklch(55.7% 0.143 18.1);   /* #B84A53 · 前景（5.07:1 on 白）    */
  --color-accent-800: oklch(46.7% 0.128 18.6);   /* #94353D · 淡い塗りの上の文字       */

  /* ── 状態 ───────────────────────────────────────────── */
  --color-success:    oklch(52.9% 0.106 154.6);  /* #2E7D4F */
  --color-error:      oklch(50.1% 0.178  28.7);  /* #B3261E */

  /* ══ 花のパレット（2026-07-31 LPセッションで新設）═══════════════════
   * 「春には色んな花が咲く。でもどれも、同じ春の光の下にいる。」
   *
   * accent-200 の L(87%) と C(0.051) を固定し、色相だけを回したもの。
   * OKLCH は知覚均等なので、色数を増やしても明るさと鮮やかさが揃う。
   *
   * 実測（本文インク #352A2C を上に載せたとき）:
   *   sakura 9.15 / kaki 9.21 / nanohana 9.36 / wakaba 9.53 / sora 9.39 / fuji 9.20
   *   → 6色すべて 9.15〜9.53:1。ばらつき 0.38。全色 AAA。
   *
   * これは design-guide-v2 の「部位タグに色を割り当てない」判断の
   * 根拠のうち **「色を割ると必ずコントラスト不合格が出る」だけを無効化する**。
   * 「タグは文字で読めるので識別に色は要らない」という理由は依然として有効。 */
  --flower-sakura:   oklch(87% 0.051  12);   /* #F4C7CB さくら   */
  --flower-kaki:     oklch(87% 0.051  45);   /* #F2CAB9 かき     */
  --flower-nanohana: oklch(87% 0.051  95);   /* #DED5AF なのはな */
  --flower-wakaba:   oklch(87% 0.051 165);   /* #B6DFCC わかば   */
  --flower-sora:     oklch(87% 0.051 245);   /* #B9D9F4 そら     */
  --flower-fuji:     oklch(87% 0.051 305);   /* #DCCCF0 ふじ     */

  /* ⚠️ 運用ルール：サクラは他の花と対等ではない
   * 花のパレットは「色相を平等に並べたもの」だが、**Bomi はサクラ**。
   * ボミの頭に咲いているのもサクラ、カレンダーの達成マークもサクラ。
   * 6色を平等に扱うと、ブランドカラーが画面から消える（2026-07-31 に実際に起きた）。
   *
   *   → 花を複数置く画面では、**サクラが最大面積か、読み始めの位置のどちらかを必ず取る。**
   *     他の5色はサクラの周りに咲いている、という関係を崩さない。
   *
   * 「春には色んな花が咲く」＝多様性。「でも Bomi はサクラ」＝主役。両方いる。 */

  /* 器の上に載せる前景（アイコン・線）。L55%/C0.10 で全色相 3.17〜3.38:1 */
  --flower-sakura-deep:   oklch(55% 0.10  12);   /* #A35762 */
  --flower-kaki-deep:     oklch(55% 0.10  45);   /* #A15D3E */
  --flower-nanohana-deep: oklch(55% 0.10  95);   /* #847020 */
  --flower-wakaba-deep:   oklch(55% 0.10 165);   /* #288463 */
  --flower-sora-deep:     oklch(55% 0.10 245);   /* #3977A8 */
  --flower-fuji-deep:     oklch(55% 0.10 305);   /* #7F62A0 */

  /* ── 書体 ───────────────────────────────────────────────
   * アプリはシステムフォント確定（design-guide-v2 §3.1）。
   * Web は自由なので、ここで別の答えを試している。
   *   Zen Kaku Gothic New — 角ゴだが角が丸く、「円を少しだけ崩した形」の法則と揃う
   *   Baloo 2 — ワードマーク "Bomi" と英語ラベル（eyebrow）専用
   * 明朝は使わない（design-guide-v2）。イタリック見出しも使わない（hallmark gate 38a）。
   *
   * 🔴 2026-08-17: ワードマークを **Bricolage Grotesque → Baloo 2** に変えた。
   *  ★アプリアイコン（`scripts/build-app-icon.py` = Baloo 2 800）と
   *   Xヘッダー（`scripts/build-x-header.py` = Baloo 2）が Baloo 2 なのに
   *   **LPだけ別の書体だった**。看板が3か所で食い違うので揃えた。 */
  --font-wordmark: "Baloo 2", ui-sans-serif, sans-serif;
  --font-display:  "Zen Kaku Gothic New", ui-sans-serif, system-ui, sans-serif;
  --font-body:     "Zen Kaku Gothic New", ui-sans-serif, system-ui, sans-serif;

  /* ── スケール · major third 1.25 ─────────────────────── */
  --text-xs:  0.8rem;
  --text-sm:  0.9rem;
  --text-base:1rem;
  --text-md:  1.25rem;
  --text-lg:  1.5625rem;
  --text-xl:  1.9531rem;
  --text-2xl: 2.4414rem;
  --text-display:   clamp(2.4rem, 4.6vw + 0.6rem, 4.6rem);
  --text-display-s: clamp(2rem,   3.4vw + 0.6rem, 3.4rem);

  /* ── 余白 · 8pt グリッド（design-guide-v2 §4）─────────── */
  --space-xs:  0.5rem;   --space-sm:  0.75rem;  --space-md:  1rem;
  --space-lg:  1.5rem;   --space-xl:  2rem;     --space-2xl: 3rem;
  --space-3xl: 5rem;     --space-4xl: 7.5rem;

  /* ── 角丸・動き ─────────────────────────────────────── */
  --radius-thumb: 8px;   --radius-input: 12px;  --radius-card: 16px;
  --radius-pill:  999px;
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --dur: 620ms;
}