:root {
  /*** Color ***/
  /*
   *-----------------------------------
   * UPDATE AUTHOR   :AI Agent @colony-i
   * UPDATE DATE     :2026/09/03
   * UPDATE COMMENT  :text.baseをFigmaのtext.primary命名へ変更
   * UPDATE CODE     :@ai/feature/11
   */
  /* ---------------UPDATE CODE @ai/feature/11 START---------- */
  /*** Brand ***/
  --color-brand-base: var(--color-bluescale-700);
  --color-brand-light: var(--color-bluescale-50);
  --color-brand-medium: var(--color-bluescale-200);
  --color-brand-dark: var(--color-bluescale-900);

  /*** Text ***/
  --color-text-primary: var(--color-grayscale-900);
  --color-text-white: var(--color-grayscale-0);
  --color-text-secondary: var(--color-grayscale-600);
  --color-text-placeholder: var(--color-grayscale-200);
  --color-text-accent: #e80000;

  /*** Border ***/
  /*
   *-----------------------------------
   * UPDATE AUTHOR   :AI Agent @colony-i
   * UPDATE DATE     :2026/09/03
   * UPDATE COMMENT  :border-lightをFigmaのlight-gray命名へ変更
   * UPDATE CODE     :@ai/feature/11
   */
  /* ---------------UPDATE CODE @ai/feature/11 START---------- */
  --color-border-light-gray: var(--color-grayscale-50);
  /* ---------------UPDATE CODE @ai/feature/11 E N D---------- */
  --color-border-base: var(--color-grayscale-100);
  --color-border-dark: var(--color-grayscale-200);
  --color-border-textbox: var(--color-grayscale-200);

  /*** Background ***/
  --color-bg-brand: var(--color-brand-light);
  --color-bg-white: var(--color-grayscale-0);
  --color-bg-light-gray: var(--color-grayscale-30);
  --color-bg-base-gray: var(--color-grayscale-100);
  --color-bg-dark-gray: var(--color-grayscale-200);

  /* Grayscale */
  --color-grayscale-0: #fff;
  --color-grayscale-30: #f6f6f6;
  --color-grayscale-50: #f2f2f2;
  --color-grayscale-100: #e6e6e6;
  --color-grayscale-200: #cbcbcd;
  --color-grayscale-300: #b0b1b6;
  --color-grayscale-400: #95979d;
  --color-grayscale-500: #7a7d85;
  --color-grayscale-600: #62646a;
  --color-grayscale-700: #494b50;
  --color-grayscale-800: #313235;
  --color-grayscale-900: #18191b;

  /* Bluescale */
  --color-bluescale-50: #f0f7fc;
  --color-bluescale-100: #dbecf8;
  --color-bluescale-200: #b1d7f2;
  --color-bluescale-300: #7bbceb;
  --color-bluescale-400: #4aa2e5;
  --color-bluescale-500: #218ada;
  --color-bluescale-600: #0872c8;
  --color-bluescale-700: #005aaa;
  --color-bluescale-800: #004582;
  --color-bluescale-900: #002f5c;
  --color-bluescale-950: #001b35;
  /* ---------------UPDATE CODE @ai/feature/11 E N D---------- */

  /*** Font ***/
  --font-inter: "Inter";

  /*** Other ***/
  --opacity: 0.8;

  /*** CVG ***/
  --svg-left: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%207%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M6.5%2012.5L0.5%206.5L6.5%200.5%22%20stroke%3D%22currentColor%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --svg-right: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%207%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0.5%2012.5L6.5%206.5L0.499999%200.5%22%20stroke%3D%22currentColor%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  /*
   *-----------------------------------
   * UPDATE AUTHOR   :AI Agent @colony-i
   * UPDATE DATE     :2026/09/03
   * UPDATE COMMENT  :Figmaのarrow-itemに合わせて下向き矢印SVGを更新
   * UPDATE CODE     :@ai/feature/11
   */
  /* ---------------UPDATE CODE @ai/feature/11 START---------- */
  --svg-down: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3.5%206L8%2010.5L12.5%206%22%20stroke%3D%22%2318191B%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%2F%3E%3C%2Fsvg%3E');
  /* ---------------UPDATE CODE @ai/feature/11 E N D---------- */

}