/* =========================================================
   見つける君 UI  -  Design Tokens
   Figmaの variables / styles をそのまま CSS変数に落とし込んだもの。
   色・タイポ・余白・角丸・影・アイコンを一元管理します。
   ページ側ではこの変数を参照するだけで、色変更などが一括で効きます。
   ========================================================= */

:root {
  /* ---------- Color : Brand ---------- */
  --mk-white:            #FFFFFF;
  --mk-black:            #212121;   /* 基本テキスト */
  --mk-ivory:           #FFFDF5;   /* secondary active 背景 */

  /* primary = orange 系（主要アクション） */
  --mk-orange:          #EC9418;   /* default */
  --mk-orange-hover:    #E57600;   /* hover / active */
  --mk-orange-disabled: #E3D4BE;   /* disabled */

  /* accent = blue 系（補助・確定アクション） */
  --mk-blue:            #2093CE;   /* default */
  --mk-blue-hover:      #0075C4;   /* hover / active */
  --mk-blue-disabled:   #D4E0E7;   /* disabled */

  /* neutral = gray 系（テキストボタン等） */
  --mk-gray:            #B0B0B0;   /* default / border */
  --mk-gray-hover:      #8C8C8C;   /* hover */

  /* surface */
  --mk-light-blue:      #EBF6FC;   /* タグ / option hover 背景 */
  --mk-logo-blue:       #AFD7EC;   /* タグ hover 背景 */

  /* state : error */
  --mk-error:           #E54500;   /* エラー文字 / 枠線 */
  --mk-error-bg:        #FFE7E4;   /* エラー背景 */

  /* ---------- Typography ---------- */
  --mk-font: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;

  /* Body/Large = 16 / Bold(700) / line-height 32 */
  --mk-text-lg-size:   16px;
  --mk-text-lg-weight: 700;
  --mk-text-lg-lh:     32px;

  /* Body/Large = 16 / Bold(700) / line-height 32 (only sp) */
  --mk-text-lg-size-onlysp:   14px;
  --mk-text-lg-lh-onlysp:     28px;

  /* Body/Medium = 14 / Regular(400) / line-height 20 */
  --mk-text-md-size:   14px;
  --mk-text-md-weight: 400;
  --mk-text-md-lh:     20px;

  /* Body/Medium = 14 / Regular(400) / line-height 20 */
  --mk-text-md-size-onlysp:   12px;
  --mk-text-md-lh-onlysp:     18px;

  /* ラベル = 12 / Regular */
  --mk-text-sm-size:   12px;
  --mk-text-sm-lh:     20px;

  /* ラベル = 12 / Regular */
  --mk-text-sm-size-onlysp:   11px;
  --mk-text-sm-lh-onlysp:     16px;

  /* エラー注記 = 10 */
  --mk-text-xs-size:   10px;

  /* ---------- Spacing scale（Figmaで使用されている値） ---------- */
  --mk-space-1:  4px;
  --mk-space-2:  8px;
  --mk-space-3:  10px;
  --mk-space-4:  12px;
  --mk-space-5:  16px;
  --mk-space-6:  32px;
  --mk-space-7:  48px;
  --mk-space-8:  80px;

  --mk-space-1-onlysp:  2px;
  --mk-space-2-onlysp:  4px;
  --mk-space-3-onlysp:  5px;
  --mk-space-4-onlysp:  6px;
  --mk-space-5-onlysp:  8px;
  --mk-space-6-onlysp:  16px;
  --mk-space-7-onlysp:  24px;
  --mk-space-8-onlysp:  40px;

  /* ---------- Radius ---------- */
  --mk-radius:      4px;    /* ボタン / 入力 */
  --mk-radius-pill: 16px;   /* タグ / バッジ */

  /* ---------- Shadow ---------- */
  --mk-shadow-btn:  0 4px 2px rgba(0, 0, 0, 0.25);  /* ボタン hover/active */
  --mk-shadow-pop:  0 4px 2px rgba(0, 0, 0, 0.15);  /* ドロップダウン */

  /* ---------- Icons（currentColorで色追従するマスク用SVG） ---------- */
  --mk-icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M2 2l4 4-4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mk-icon-chevron-down:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M2 2l4 4 4-4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mk-icon-x:             url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 1l6 6M7 1l-6 6' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --mk-icon-pin:           url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M5 13C5 13 9 8.5 9 5A4 4 0 1 0 1 5C1 8.5 5 13 5 13Z' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Ccircle cx='5' cy='5' r='1.6' fill='%23000'/%3E%3C/svg%3E");
}