/* ============================================================
   litlink boost! — Creator App: legacy トークン互換層
   creator/index.html 専用（client/ops には読み込ませない）。
   ds-tokens.css・tokens.css・boost.css・creator-feminine.css より後に読み込む。

   役割:
   1) 値が DS と 1:1 一致するもの（余白・一部の角丸）は --tu-* への
      エイリアスとして再定義する。
   2) DS に対応値が無いもの、または実効値が完全一致しないものは、
      現行の実効値をそのまま維持する（見た目を変えない）。
   3) 旧 tokens.css `[data-theme="light-boost"]` と creator-feminine.css
      の `:root` 再定義（同名トークンの二重定義）を、ここ 1 箇所へ集約する。
   これにより legacy トークン名（--sp-1 等）を参照する既存 var() は
   一切書き換えずに、定義の場所だけを単一化する。
   ============================================================ */

:root {
  /* 外部サービス（LINE）の公式ブランドカラー。TieUpsテーマの対象外のため
     パレット切替に関わらず固定値を維持する（DESIGN_EXCEPTIONS.yaml 登録済み）。 */
  --ext-line-green: #06C755;
  /* 金額の文字色（明るいホットピンク）。DS 2.3 Pink の rose-pressed（#EA43BD・白地 3.48:1）。
     大きな文字（17px以上の太字の金額）だけに使う。 */
  --cr-amount-ink: var(--tu-primitive-rose-pressed);
  /* 12〜15px の金額・単位・ピンクの文字リンク・ピンクの札の地。同じ色相で少し濃い #D318A1（白地 4.76:1）。 */
  --cr-amount-ink-sm: #D318A1;
  /* 採用枠メーターの「応募」の層（同系の淡いピンク）。 */
  --cr-meter-soft: var(--tu-primitive-pink-300);
  /* 白地で読むリンク・選択中の文字色（既存の濃い紫。--cr-violet より濃く、小さい文字でも読める）。 */
  --cr-link-ink: var(--violet-dim);
  /* 金額まわりの淡い面（選択中・締切間近の札・告知の面）。DS 2.3 Pink の soft。 */
  --cr-amount-soft: var(--tu-primitive-rose-soft);
  /* 写真の外の余白（中立の淡いグレー）と、写真に重ねる暗幕（黒50%。白い商品の上でも白文字が読める濃さ）。 */
  --cr-media-bg: var(--tu-primitive-neutral-100);
  --cr-media-scrim: rgba(9,9,11,.5);
  /* 残り量のメーター（地＝中立グレー、塗り＝DS 2.3 Pink の action。文字には使わない）。 */
  --cr-meter-track: var(--tu-primitive-neutral-200);
  --cr-meter-fill: var(--tu-primitive-rose-action);
  /* 主操作のグラデーション。白文字を載せる。ホームの活動ウィジェット（.home-hero-card.hhc-gradient＝--grad-cta）と
     同じ値を参照し、主ボタン・ウィジェットの面・紙芝居のカードをホームと同じ色にそろえる（ウィジェット側のCSSは触らない）。 */
  --cr-cta-grad: var(--grad-cta);
  /* 中立の淡い面（報酬の内訳など。紫の --bg-elevated の代わり）。 */
  --cr-neutral-soft: var(--tu-primitive-neutral-50);
}

[data-palette="boost-legacy"] {
  /* ── 余白: DS と px 値が完全一致するため --tu-* エイリアスへ ── */
  --sp-1: var(--tu-space-4);
  --sp-2: var(--tu-space-8);
  --sp-3: var(--tu-space-12);
  --sp-4: var(--tu-space-16);
  --sp-5: var(--tu-space-20);
  --sp-6: var(--tu-space-24);
  --sp-8: var(--tu-space-32);
  --sp-10: var(--tu-space-40);
  --sp-12: var(--tu-space-48);
  --sp-16: var(--tu-space-64);
  /* DS に対応する 28px の刻みが無いため実値のまま維持 */
  --sp-7: 28px;

  /* ── 角丸: 8 / 12 / full は DS と一致。20 / 28 は DS に無いため実値維持 ── */
  --r-sm: var(--tu-radius-sm);
  --r-md: var(--tu-radius-control);
  --r-full: var(--tu-radius-full);
  --r-lg: 20px;
  --r-xl: 28px;

  /* ── 背景・地色（旧 tokens.css [data-theme="light-boost"] と
     creator-feminine.css :root の二重定義の実効値を集約） ── */
  --bg-base: #FBFAFE;
  --bg-surface: #FFFFFF;
  --bg-elevated: #F6F2FD;
  --bg-overlay: rgba(26,22,37,.45);

  /* ── 文字色 ── */
  --text-primary: #1A1625;
  --text-secondary: #6B6577;
  --text-muted: #6E6A86;
  --text-inverse: #FFFFFF;

  /* ── 枠線 ── */
  --border: rgba(27,24,48,.08);
  --border-focus: var(--tu-color-border-focus);

  /* ── ブランド・ゲージ（creator-feminine.css :root が実効） ── */
  --violet: #8B5CF6;
  --violet-dim: #7C3AED;
  --violet-bright: #7C3AED;
  --violet-glow: rgba(139,92,246,.30);
  --violet-trace: rgba(139,92,246,.10);
  --energy: #EC4899;
  --energy-glow: rgba(236,72,153,.35);
  --xp: #A855F7;
  --gauge-low: #8B5CF6;
  --gauge-mid: #A855F7;
  --gauge-near: #EC4899;
  --gauge-full: #F43F5E;

  /* ── 影 ── */
  --shadow-sm: 0 1px 4px rgba(124,58,237,.06);
  --shadow-md: 0 4px 14px rgba(124,58,237,.10);
  --shadow-lg: 0 12px 32px rgba(124,58,237,.16);
  --shadow-violet: 0 10px 26px rgba(168,85,247,.28);

  /* ── スケルトン ── */
  --skel-base: #E4E0F2;
  --skel-hl: #F6F4FC;

  /* ── タイプスケール 7 段（DS に対応値が無いため実値維持） ── */
  --fs-caption: 12px;
  --fs-ui: 13px;
  --fs-body: 15px;
  --fs-title: 17px;
  --fs-section: 20px;
  --fs-hero: 24px;
  --fs-metric: 28px;

  /* ── 未定義参照だった 4 トークンを既存スケールへ紐付け ── */
  --fs-h3: var(--fs-body);
  --fs-2xl: var(--fs-hero);
  --fs-lg: 18px;
  --fs-md: var(--fs-body);

  /* ── 応援グラデ・ヒーロー（brand accent） ── */
  --cr-violet: #8B5CF6;
  --cr-pink: #EC4899;
  --grad-cheer: linear-gradient(95deg, #8B5CF6, #EC4899);
  --cr-hero-start: #5144D9;
  --cr-hero-end: #9031C4;
  --cr-hero-ink: #FFFFFF;
  --cr-hero-glint: rgba(255,255,255,.19);
  --cr-hero-shadow: rgba(81,68,217,.14);
  --grad-hero: linear-gradient(125deg, var(--cr-hero-start), var(--cr-hero-end));
  --cr-hero-orb: radial-gradient(circle at 30% 30%, rgba(255,255,255,0) 48%, rgba(255,255,255,.12) 69%, rgba(255,255,255,.02) 73%);
  --cr-hero-glass: rgba(255,255,255,.16);
  --cr-hero-glass-lift: rgba(255,255,255,.22);
  --cr-hero-edge: rgba(255,255,255,.30);
  --cr-hero-rule: rgba(255,255,255,.24);

  /* ── 未読バッジ用のマゼンタ別名 ── */
  --magenta: var(--cr-pink);

  /* ── 固定要素の重なり順（--z-modal / --z-overlay / --z-toast は
     boost/shared/boost.css の :root が単一真実源のためここでは定義しない） ── */
  --z-nav: 100;
  --z-cta: 500;
  --z-sheet: 2000;
  --z-assist: 9000;
  --z-dock-bubble: 9600;
  --z-dock-panel: 9610;
  --z-dock-toast: 9620;

  /* ── 報酬種別チップ（旧 creator-feminine.css [data-theme="light-boost"]） ── */
  --rk-play-fg: var(--cr-violet);
  --rk-play-bg: rgba(139,92,246,.12);
  --rk-post-fg: var(--cr-pink);
  --rk-post-bg: rgba(236,72,153,.12);
  --rk-join-fg: #157F3C;
  --rk-join-bg: rgba(34,197,94,.14);
  --rk-hero-bg: linear-gradient(135deg, rgba(139,92,246,.10), rgba(236,72,153,.08));
  --rk-hero-border: rgba(139,92,246,.18);

  /* ── DS palette 登録（現行値のまま。参照する既存 var() は無く、
     アクセントを切り替えるまでは未使用の登録のみ） ── */
  --tu-theme-action: var(--cr-violet);
  --tu-theme-hover: var(--violet-bright);
  --tu-theme-pressed: var(--violet-dim);
  --tu-theme-soft: var(--violet-trace);
  --tu-theme-deep: var(--violet-dim);
  --tu-theme-link: var(--cr-violet);
}

/* ============================================================
   [data-palette]:not([data-palette="boost-legacy"]) アクセント値層。
   [data-palette="boost-legacy"] ブロックはそのまま残し、切り戻しは
   creator/index.html の data-palette 属性を1個戻すだけで完結する。
   legacy 変数名は変えず、余白・角丸・文字サイズは DS 値へ寄せる一方、
   ブランドカラー（violet/cr-violet/cr-pink 等）は視認性よりも美しさを
   優先し、boost-legacy ブロックと同じ実値を維持する
   （既存の var() 参照側は無改修）。
   ============================================================ */
[data-palette]:not([data-palette="boost-legacy"]) {
  /* ── 余白: DS スケールに無い 28px 刻みを廃止し直近の DS 段へ ── */
  --sp-1: var(--tu-space-4);
  --sp-2: var(--tu-space-8);
  --sp-3: var(--tu-space-12);
  --sp-4: var(--tu-space-16);
  --sp-5: var(--tu-space-20);
  --sp-6: var(--tu-space-24);
  --sp-7: var(--tu-space-24);
  --sp-8: var(--tu-space-32);
  --sp-10: var(--tu-space-40);
  --sp-12: var(--tu-space-48);
  --sp-16: var(--tu-space-64);

  /* ── 角丸: 操作/シート/ヒーローは個別セレクタで
     creator-accent-violet.css から上書きする ── */
  --r-sm: var(--tu-radius-sm);
  --r-md: var(--tu-radius-control);
  --r-full: var(--tu-radius-full);
  /* --r-lg は本番と同じ20pxを維持する（DSのカード角丸16pxへ寄せると、
     LINEログインボタン・スケルトンカード・サポート行・支払い導線のカード類の
     角丸が本番よりわずかに小さくなる見た目差になるため）。 */
  --r-lg: 20px;
  /* --r-xl は #home-hero-card（ゲスト/ログイン後のホームヒーロー）が直接参照する。
     本番と同じ28pxを維持する（DS段のsheet radius 24pxへ寄せると、光球や縁取りの
     クリップ位置が本番よりわずかに内側へ寄る見た目差になるため）。 */
  --r-xl: 28px;

  /* ── 背景・地色: R4段階1は現行本番の実値を維持する ── */
  --bg-base: #FBFAFE;
  --bg-surface: var(--tu-color-bg-surface);
  --bg-elevated: #F6F2FD;
  --bg-overlay: rgba(26,22,37,.45);

  /* ── 文字色: R4段階1は現行本番の実値を維持する ── */
  --text-primary: #1A1625;
  --text-secondary: #6B6577;
  --text-muted: #6E6A86;
  /* --text-inverse は白のまま維持する（主操作の文字色反転は
     .btn-primary/.btn-boost/.btn-tier-hero を個別に上書きする方式を採る。
     83参照全体を反転させると、ヒーロー以外の「濃い面に白文字」を
     期待する箇所まで巻き込むため）。
     このブロックで明示的に再定義しないと、boost/shared/tokens.css の
     :root（clientまた/opsが使うダーク基調の値 #080810）へフォールバック
     してしまう（[data-palette="boost-legacy"]セレクタは violet 適用時
     マッチしないため）。 */
  --text-inverse: var(--tu-primitive-neutral-0);

  /* ── 枠線: R4段階1は現行本番の実値を維持する ── */
  --border: rgba(27,24,48,.08);
  --border-focus: var(--tu-color-border-focus);

  /* ── ブランド・ゲージ: 視認性よりも美しさを優先し、旧ブランド紫系の実値を
     維持する（美観優先の運用方針。DESIGN_EXCEPTIONS.yaml登録済み）。値は
     [data-palette="boost-legacy"] ブロックと同一にする。 ── */
  --violet: #8B5CF6;
  --violet-dim: #7C3AED;
  --violet-bright: #7C3AED;
  --violet-glow: rgba(139,92,246,.30);
  --violet-trace: rgba(139,92,246,.10);
  --energy: #EC4899;
  --energy-glow: rgba(236,72,153,.35);
  --xp: #A855F7;
  --gauge-low: #8B5CF6;
  --gauge-mid: #A855F7;
  --gauge-near: #EC4899;
  --gauge-full: #F43F5E;
  /* ── ホームヒーローの光の粒（.hhc-spark 等）用。HTML/feminine.css での
     HEX 直書きを禁止するため、ここでトークン化する ── */
  --cr-hero-spark: #FFE79A;
  /* ── 案件詳細の達成率ゲージ（#dtGrad）・14日間推移スパークライン用。
     SVGインラインstyle/JS生成の描画色はHTML内でHEX直書きできないため、
     ここでトークン化する ── */
  --dtgrad-gauge-start: #22D3EE;
  --dtgrad-gauge-end: #6464FD;
  --dtgrad-spark: var(--dtgrad-gauge-end);

  /* ── success/warning/info/danger/pink/pink-soft は再定義しない。
     boost/shared/tokens.css :root の実値（パレット非依存）へそのまま
     フォールバックさせ、badge・金額色・帯の色をlegacyと同一にする。 ── */

  /* ── 影: R4段階1は現行本番の実値を維持する ── */
  --shadow-sm: 0 1px 4px rgba(124,58,237,.06);
  --shadow-md: 0 4px 14px rgba(124,58,237,.10);
  --shadow-lg: 0 12px 32px rgba(124,58,237,.16);
  --shadow-violet: 0 10px 26px rgba(168,85,247,.28);

  /* ── スケルトン: R4段階1は現行本番の実値を維持する ── */
  --skel-base: #E4E0F2;
  --skel-hl: #F6F4FC;

  /* ── タイプスケール: DS 適格サイズでない 13/15/17/28px のみ
     最近傍の DS 段（14/16/18/32）へ補正。12/20/24px は DS と一致のため据え置き ── */
  --fs-caption: 12px;
  --fs-ui: 14px;
  --fs-body: 16px;
  --fs-title: 18px;
  --fs-section: 20px;
  --fs-hero: 24px;
  --fs-metric: 32px;
  --fs-h3: var(--fs-body);
  --fs-2xl: var(--fs-hero);
  --fs-lg: 18px;
  --fs-md: var(--fs-body);

  /* ── 応援ヒーロー: 面はグラデーションのまま維持する。単色に固定すると
     ヒーロー面とその上に乗るアバター等の子要素が同色化して境界が
     消えるため、2トーンのグラデーションで面同士を区別できるようにする。
     --cr-violet/--cr-pink は視認性よりも美しさを優先し、旧ブランド紫系の
     実値を [data-palette="boost-legacy"] ブロックと同一に維持する
     （美観優先の運用方針。DESIGN_EXCEPTIONS.yaml登録済み）。 ── */
  --cr-violet: #8B5CF6;
  --cr-pink: #EC4899;
  --grad-cheer: linear-gradient(95deg, #8B5CF6, #EC4899);
  --grad-cta: linear-gradient(135deg, #6464FD 0%, #B455FD 100%);
  /* --cr-hero-start/--cr-hero-end/--cr-hero-shadow は --grad-hero 経由の
     間接参照で、上のテストの2トーン判定は変数名の存在だけを見るため
     （値そのものの直接assertは無い）、段階1では本番の実値を維持できる。 */
  --cr-hero-start: #5144D9;
  --cr-hero-end: #9031C4;
  --cr-hero-ink: var(--tu-primitive-neutral-0);
  --cr-hero-glint: rgba(255,255,255,.19);
  --cr-hero-shadow: rgba(81,68,217,.14);
  --grad-hero: linear-gradient(125deg, var(--cr-hero-start), var(--cr-hero-end));
  --cr-hero-orb: radial-gradient(circle at 30% 30%, rgba(255,255,255,0) 48%, rgba(255,255,255,.12) 69%, rgba(255,255,255,.02) 73%);
  --cr-hero-glass: rgba(255,255,255,.16);
  --cr-hero-glass-lift: rgba(255,255,255,.22);
  --cr-hero-edge: rgba(255,255,255,.30);
  --cr-hero-rule: rgba(255,255,255,.24);

  /* ── 未読バッジ用のマゼンタ別名 ── */
  --magenta: var(--cr-pink);

  /* ── 報酬種別チップ: 文字色（fg）・地色（bg）とも本番の実値を維持する ── */
  --rk-play-fg: var(--cr-violet);
  --rk-play-bg: rgba(139,92,246,.12);
  --rk-post-fg: var(--cr-pink);
  --rk-post-bg: rgba(236,72,153,.12);
  --rk-join-fg: #157F3C;
  --rk-join-bg: rgba(34,197,94,.14);
  --rk-hero-bg: linear-gradient(135deg, rgba(139,92,246,.10), rgba(236,72,153,.08));
  --rk-hero-border: rgba(139,92,246,.18);

  /* ── 重なり順（DS非対象・DESIGN_EXCEPTIONS.yaml登録）。
     boost-legacyブロック以外に定義が無いため、ここで再定義しないと
     [data-palette]:not([data-palette="boost-legacy"])では未定義（z-index:auto相当）になり
     ナビ・CTA・シート・ドックの重なりが崩れる。値は変更しない。 ── */
  --z-nav: 100;
  --z-cta: 500;
  --z-sheet: 2000;
  --z-assist: 9000;
  --z-dock-bubble: 9600;
  --z-dock-panel: 9610;
  --z-dock-toast: 9620;
}