/* ==========================================================================
   ZENKIGEN Design Tokens（コレドウ用）
   Figma「ZENKIGEN_Component（コレドウ用）」から取得した変数定義をそのまま反映
   ========================================================================== */

:root {
  /* ---- Text ---- */
  --text-01:            #2F3233;
  --text-02:            #6F7476;
  --text-03:            #838789;
  --text-placeholder:   #CACCCD;
  --text-on-color:      #FFFFFF;
  --text-black:         #000000;

  /* ---- Icon ---- */
  --icon-01:            #6F7476;
  --icon-on-color:      #FFFFFF;

  /* ---- Border ---- */
  --ui-border-01:       #DEDFE0;
  --ui-border-02:       #CACCCD;
  --ui-border-03:       #A4A5A6;

  /* ---- Background ---- */
  --ui-bg-01:           #FFFFFF;
  --ui-bg-02:           #F3F4F5;
  --ui-bg-02-light:     #FAFAFA;
  --bg-overlay-black:   rgba(0, 0, 0, 0.55);

  /* ---- Interactive ---- */
  --interactive-01:     #177EE5;
  --interactive-02:     #6F7476;

  /* ---- Disabled ---- */
  --disabled-01:        #DEDFE0;

  /* ---- Support ---- */
  --support-success:    #2DC87D;

  /* ---- Color ramps ---- */
  --blue-60:            #1571CE;
  --blue-10:            #F1F7FD;
  --green-60:           #29B471;
  --green-10:           #ECFBF4;
  --yellow-10:          #FFFADC;

  /* ---- Button（Figma: Button コンポーネントの実測値） ---- */
  --btn-fill:           #177EE5;   /* Fill / Default   = Interactive01 */
  --btn-fill-hover:     #1366B9;   /* Fill / Hover  */
  --btn-fill-active:    #0E4B87;   /* Fill / Active */
  --btn-disable:        #DEDFE0;   /* Fill / Disable = Disabled01 */
  --btn-outline-hover:  #E9EAEB;   /* Outline / Hover  */
  --btn-outline-active: #CACCCD;   /* Outline / Active */
  --btn-select-bg:      #D9EAFB;   /* Outline / Select */
  --btn-danger:         #D92B57;
  --btn-danger-hover:   #B22045;
  --btn-danger-active:  #821732;

  /* ---- Radius ---- */
  --radius-sm:          4px;
  --radius-md:          6px;
  --radius-lg:          8px;

  /* ---- Font ---- */
  --font-sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Noto Sans JP", Arial, sans-serif;
}

/* ==========================================================================
   Typography（Figma の Heading / Body / Label スケール）
   ========================================================================== */
.h1 { font-size: 32px; font-weight: 700; line-height: 1.25; }
.h2 { font-size: 24px; font-weight: 700; line-height: 1.33; }
.h3 { font-size: 20px; font-weight: 700; line-height: 1.6;  }
.h5 { font-size: 14px; font-weight: 700; line-height: 1.71; }

.body16 { font-size: 16px; font-weight: 400; line-height: 1.8;  }
.body14 { font-size: 14px; font-weight: 400; line-height: 1.71; }
.body14-bold { font-size: 14px; font-weight: 700; line-height: 1.71; }
.body12 { font-size: 12px; font-weight: 400; line-height: 1.33; }

.label16 { font-size: 16px; font-weight: 400; line-height: 1; }
.label16-bold { font-size: 16px; font-weight: 700; line-height: 1; }
.label14 { font-size: 14px; font-weight: 400; line-height: 1; }
.label14-bold { font-size: 14px; font-weight: 700; line-height: 1; }
.label12 { font-size: 12px; font-weight: 400; line-height: 1; }
.label12-bold { font-size: 12px; font-weight: 700; line-height: 1; }
.label11-bold { font-size: 11px; font-weight: 700; line-height: 1; }