@charset "UTF-8";
/* ==========================================================================
   ブランドトークン（色のみ）
   --------------------------------------------------------------------------
   ★ 色替えの複製サイトを作るときは、このファイルだけを差し替える。
   ★ 他のCSSファイルには hex値を書かないこと。必ず var() 経由で参照する。

   出典：lgram-media-redesign rev.19 / assets/style.css セクション1
   ========================================================================== */
:root{

  /* --- Brand Purple ------------------------------------------------------
     現行は #7b56e0（カテゴリラベル）と #6c3bff（CTA）が混在していたので
     #7b56e0 に一本化する。#724bd6 も同系のためこちらへ寄せる。 */
  --c-brand:       #146deb;
  --c-brand-dark:  #0b5ed7;   /* リンク文字・hover */
  --c-brand-deep:  #0e3a78;   /* 濃い面 */
  --c-brand-tint:  #eaf4ff;   /* チップ・アイコン地 */
  --c-brand-pale:  #f6faff;   /* H2の地 */
  --c-brand-line:  #d7e9ff;   /* 青系の淡い面に使う境界線 */

  /* --- Brand Yellow ------------------------------------------------------
     公式サイト lgram.jp の実測値（2026-07-28）。
     CTAとマーカーで別の黄色を使い分けているのでトークンも分ける。
     黄地の文字は必ず黒（--c-on-accent）。
     現行は黄・橙が6種類（#ffc679 #ffc14d #f7d02e #f09819 #edde5d #f8c678）
     あるので、この2つに集約していく。 */
  --c-accent:      #fce94c;   /* CTAボタン背景 */
  --c-accent-deep: #f2dc2a;   /* CTA hover / active */
  --c-on-accent:   #222222;   /* 黄地に乗せる文字色 */
  --c-marker:      #fff55a;   /* 本文の黄色マーカー */

  /* --- Alert -------------------------------------------------------------
     現行の bold-red を踏襲 */
  --c-alert:       #e60033;
  --c-alert-pale:  #fff2f4;
  --c-alert-line:  #f3d3da;   /* 注意ボックスの境界線 */

  /* --- 3サービス（フッターバナー・関連メディア導線） ----------------------- */
  --c-lgram:       #7b56e0;
  --c-lmessage:    #12b45c;
  --c-lsite:       #1677ff;

  /* --- Ink（文字） --------------------------------------------------------
     --c-ink-3 までが「意味のある文字」に使える下限（白地 5.0:1）。
     --c-ink-4 は罫・ドット・矢印などの装飾専用（白地 2.8:1）で文字には使わない。 */
  --c-ink:         #1c1b22;   /* 現行 #333（38箇所）の置き換え先 */
  --c-ink-2:       #43414d;
  --c-ink-3:       #6f6c7d;   /* 現行 #666 #555 #777777 #707070 の置き換え先 */
  --c-ink-4:       #9b98a8;   /* 装飾専用 */

  /* --- Surface（面・罫） --------------------------------------------------
     現行はグレーが11種類（#ddd #d2d6d6 #f0f0f0 #f5f5f5 #f7f7f7 #eaeaea
     #ececec #cdcdcd #c4c4c4 #bbb #aaa）あるので、この4つに集約していく。 */
  --c-bg:          #ffffff;
  --c-bg-sub:      #f7f6fb;
  --c-line:        #e6e3ef;
  --c-line-strong: #d2cee0;

  /* --- 画像の上に重ねる面 --------------------------------------------------
     カードのカテゴリラベルなど。--c-ink の半透明。 */
  --c-scrim:       rgba(28, 27, 34, .78);
  --c-on-dark:     #ffffff;   /* 暗い面に乗せる文字色 */

  /* --- フッター（暗い面） --------------------------------------------------
     現行は #333 のベタ。--c-ink(#1c1b22) と同じ紫寄りの色相に振って、
     本文側の黒とつながって見えるようにする。
     --c-footer-ink は暗地 7.4:1、--c-footer-ink-2 は 4.6:1 で、
     どちらも本文として読める明るさ。 */
  --c-footer-bg:    #23222b;
  --c-footer-title: #ffffff;   /* 見出し・hover */
  --c-footer-ink:   #c9c6d4;   /* リンク・本文 */
  --c-footer-ink-2: #8e8b9c;   /* 補足・コピーライト */
  --c-footer-line:  rgba(255, 255, 255, .12);
}