/* ===================================================
   WSG Design Tokens
   ===================================================

   Layer 1: Brand Palette  — 原色定義
   Layer 2: Semantic Tokens — 役割ベース（component はここを参照）

   ルール:
   - component は --palette-* を直接参照しない
   - 新色を追加する場合は Palette に追加してから Semantic に紐付ける
   - alpha 派生は Semantic 層で用途名を付けて定義する
   =================================================== */

:root {
  /* ── Layer 1: Brand Palette ──────────────────────────
     原色のみ。直接 component から参照しないこと。
     ─────────────────────────────────────────────────── */
  --palette-blue-dark:   #20a2dc;
  --palette-blue-mid:    #68bedf;
  --palette-blue-light:  #c4e9fb;
  --palette-blue-xlight: #d9eef8;
  --palette-navy-dark:   #1a3c55;
  --palette-navy-mid:    #3a4f66;


  /* ── Layer 2: Semantic Tokens ────────────────────────
     役割ベース。component はここを参照する。
     ─────────────────────────────────────────────────── */

  /* Accent
     ホバー・ページャー・アイコン等のアクティブ/強調色 */
  --color-accent:      var(--palette-blue-dark);
  --color-accent-soft: var(--palette-blue-mid);    /* ボタン通常色 */

  /* Alpha 派生: CSS の var() からは安全に alpha 合成できないため直書き。
     --palette-blue-dark (#20a2dc) を変更した場合は下記も合わせて更新すること。 */
  --color-accent-a50:  #20a2dc80;                  /* 半透明: アイコンボタン・ページャー選択背景 */
  --color-accent-a10:  #20a2dc1a;                  /* 薄透明: 選択カード背景 */

  /* Surface
     カードボーダー・セクション見出し背景・チップ背景 */
  --color-surface:        var(--palette-blue-light);
  --color-surface-subtle: var(--palette-blue-xlight);

  /* Brand Text
     ネイビー系テキスト（チップ・カテゴリタグ固有） */
  --color-chip-text:     var(--palette-navy-dark);  /* チップテキスト */
  --color-category-text: var(--palette-navy-mid);   /* カテゴリタグテキスト */

  /* Neutral
     汎用の背景・テキスト・ボーダー・ユーティリティ */
  --color-bg:             #fff;
  --color-border:         #f0f0f0;

  --color-text:           #333;      /* 本文（デフォルト） */
  --color-text-emphasis:  #1a1a1a;   /* 見出し・強調 */
  --color-text-muted:     #444;      /* 補助テキスト */
  --color-text-subtle:    #666;      /* さらに薄い */

  --color-overlay:              rgba(0, 0, 0, 0.5);  /* モーダルオーバーレイ */
  --color-skeleton:             #e4e4e4;              /* スケルトンブロック */
  --color-skeleton-highlight:   #f2f2f2;              /* スケルトンハイライト */
}