/* ============================================
   tokens.css
   デザイントークン - デザイナー側でデザイン時に更新
   ============================================ */

:root {
  /* Colors（Figma変数に準拠） */
  --color-primary: #f92962;        /* Figma: color/primary */
  --color-white: #ffffff;          /* Figma: Gray scale color/white */
  --color-bg-page: #ffffff;        /* Figma: color/bg-page */
  --color-bg-header: #ffffff;
  --color-bg-footer: #e9e9e9;
  --color-bg-card: #ffffff;
  --color-card-bg: #fafafb;            /* カード本体の背景（通常）＝ Figma gray/card */
  --color-card-bg-selected: #ffedf2;   /* 選択中カードの背景（薄ピンク）＝ Figma brand/pale */
  --color-bg-placeholder: #f0f0f0;
  --color-btn-disabled: #e9e9e9;     /* 非活性ボタン背景（UIキット準拠） */
  --color-border: #e9e9e9;
  --color-border-light: #e9e9e9; /* Figma: Gray scale color/border-line light */
  --color-text-primary: #333333;   /* Figma: Gray scale color/black */
  --color-text-secondary: #888888; /* Figma: Gray scale color/Gray */
  --color-text-on-primary: #ffffff;
  --color-overlay: rgba(0, 0, 0, 0.4);

  /* Typography */
  --font-family-base: 'Noto Sans JP', 'Inter', sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 30px;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --line-height-base: 1.5;
  --line-height-tight: 1.3;

  /* Border radius */
  --radius-card: 10px;
  --radius-btn: 8px;   /* Figma: radius/btn */
  --radius-pill: 100px;   /* カプセル（カード選択トグル・詳細モーダルの選択ボタン等） */
  --radius-badge: 4px;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Layout */
  --max-width-site: 1000px;      /* 一覧グリッド・ヘッダー/フッター/トレイ inner の幅 */
  --max-width-content: 640px;    /* Figma: 通常コンテンツ幅（フォーム/TOP情報 等・261:2/87:7 準拠） */
  --max-width-modal: 480px;

  /* Image */
  --logo-max-width: 144px;
  --logo-max-height: 36px;   /* Figma logo/max-height に一致 */

  /* Z-index */
  --z-header: 100;
  --z-sticky-bar: 400;
  --z-modal-overlay: 200;
  --z-modal: 300;

  /* Breakpoints (参照用 - media queryには直接値を使う) */
  /* --bp-tablet: 768px; */
  /* --bp-pc: 1024px;   */
}