/* ============================================================
   しぶえびの商談会 ブログ — デザイントークン
   ------------------------------------------------------------
   白背景 / Google カラー / Noto Sans JP
   移植で触るのはこのファイルだけです。HTML側は全てこのトークンを
   参照しているため、値を差し替えれば全ページに反映されます。
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

:root{
  color-scheme: light;

  /* --- 面 --- */
  --bg:            #ffffff;
  --surface:       #f8f9fa;   /* カード地・囲み */
  --surface-2:     #f1f3f4;   /* 帯・テーブルヘッダ */
  --line:          #dadce0;
  --line-2:        #e8eaed;

  /* --- 文字（すべて白地で4.5:1以上） --- */
  --ink:           #202124;   /* 本文・見出し      16.1:1 */
  --ink-2:         #3c4043;   /* 副文              11.6:1 */
  --muted:         #5f6368;   /* メタ・ラベル       6.1:1 */
  --faint:         #80868b;   /* 罫線まわりの装飾のみ。本文には使わない */

  /* --- Google 4色（純色。帯・アイコン・装飾に使う） --- */
  --g-blue:        #4285f4;
  --g-red:         #ea4335;
  --g-yellow:      #fbbc05;
  --g-green:       #34a853;

  /* --- 同系の濃色（文字として使う。白地で4.5:1以上） --- */
  --g-blue-ink:    #1557b0;   /* 6.95:1 */
  --g-red-ink:     #c5221f;   /* 5.80:1 */
  --g-yellow-ink:  #b06000;   /* 4.65:1 */
  --g-green-ink:   #188038;   /* 5.02:1 */

  /* --- 同系の淡色（チップの地色） --- */
  --g-blue-bg:     #e8f0fe;
  --g-red-bg:      #fce8e6;
  --g-yellow-bg:   #fef7e0;
  --g-green-bg:    #e6f4ea;

  /* --- 役割色 --- */
  --accent:        #1a73e8;
  --accent-ink:    #1a73e8;   /* リンク色 4.51:1 */
  --accent-hover:  var(--g-blue-ink);

  /* --- CTA --- */
  --cta-bg:        #1a73e8;
  --cta-ink:       #ffffff;
  --cta-bg-hover:  #1557b0;

  /* --- 字 --- */
  --sans: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- 寸法 --- */
  --measure: 36em;   /* 一覧ページの説明文などの最大幅 */
  --post-w: 780px;   /* 記事ページの幅。ヘッダー・パンくず・本文がこの幅でそろう */
  --gutter: 24px;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(60,64,67,.1), 0 2px 6px rgba(60,64,67,.08);
  --shadow-lift: 0 1px 3px rgba(60,64,67,.12), 0 6px 18px rgba(60,64,67,.14);
}

/* クラスタごとの色。cluster の slug と対応します。
   チップは「淡い地色＋濃い文字」で、色だけに意味を持たせません。 */
[data-cluster="trade"]{ --c-ink:var(--g-blue-ink);   --c-bg:var(--g-blue-bg);   --c-bar:var(--g-blue) }
[data-cluster="area"] { --c-ink:var(--g-green-ink);  --c-bg:var(--g-green-bg);  --c-bar:var(--g-green) }
[data-cluster="issue"]{ --c-ink:var(--g-yellow-ink); --c-bg:var(--g-yellow-bg); --c-bar:var(--g-yellow) }
[data-cluster="spec"] { --c-ink:var(--g-red-ink);    --c-bg:var(--g-red-bg);    --c-bar:var(--g-red) }